AgentSkillsCN

figma-implement-design

从Figma设计实现React SPA的UI。用于组件拆分、样式命名、可访问性、资产管理和实施时差异检查。关键词：Figma、UI、React、组件、可访问性

SKILL.md
--- frontmatter
name: figma-implement-design
description: 'FigmaのデザインからReact SPAのUIを実装する。コンポーネント分割、スタイル命名、アクセシビリティ、アセット管理、実装時の差分チェックに使う。キーワード: Figma, UI, React, component, accessibility'
license: MIT

Figma Implement Design Skill

目的

Figmaのデザインを、勤怠アプリのUIとして正確かつ保守しやすい形に落とす。

When to Use

  • •新規画面のUIをFigmaから実装する
  • •既存画面をデザイン差分に合わせて更新する
  • •コンポーネント分割やスタイルの見直しが必要

進め方

  1. •画面の責務を整理
    • •画面単位の目的、主要操作、状態（読み込み/空/エラー）を明確化
  2. •コンポーネント分割
    • •共通UIと画面固有UIを分ける
    • •表示のバリエーション（サイズ/状態）を最小で表現
  3. •スタイル方針
    • •余白/タイポグラフィ/カラーのルールを固定
    • •既存のUIコンポーネントを優先利用
  4. •アクセシビリティ
    • •ラベル、フォーカス、コントラスト、キーボード操作を確認
  5. •差分チェック
    • •見た目、挙動、レスポンシブの差分を確認

成果物

  • •UIコンポーネント一覧
  • •レイアウト/余白/文字サイズのルール
  • •実装後の差分チェック項目

依頼例

  • •「Figmaのログイン画面を実装して、主要状態（初期/エラー/ローディング）を揃えて」
  • •「ダッシュボードのカードUIをコンポーネント化して」

References