design-to-code

Design to Code

Figma のデザインから、本番環境で使用可能な React + TypeScript コンポーネントへの高忠実度な UI 再現を行います。 この SKILL は、手作業によるミスを最小限に抑え、ピクセル単位で正確な結果を得るために、堅牢なヘルパースクリプトを使用します。

前提条件

1. Figma API トークン: Figma → Settings → Personal Access Tokens から取得してください
2. Node.js: バージョン 18 以上
3. coderio: scripts/ フォルダにインストールされます（Setup フェーズで処理されます）

ワークフローの概要

Phase 0: SETUP    → Create helper script and script environment
Phase 1: PROTOCOL → Generate design protocol (Structure & Props)
Phase 2: CODE     → Generate components and assets

---

Phase 0: Setup

Step 0.1: ヘルパースクリプトの初期化

ユーザーの操作: 以下のコマンドを実行して、実行用のヘルパーを作成し、その依存関係を分離してください。

mkdir -p scripts

# 1. Copy script files
# Note: Ensure you have the 'skills/design-to-code/scripts' directory available
cp skills/design-to-code/scripts/package.json scripts/package.json
cp skills/design-to-code/scripts/coderio-skill.mjs scripts/coderio-skill.mjs

# 2. Install coderio in scripts directory (adjust version if needed)
cd scripts && pnpm install && cd ..

Step 0.2: プロジェクトの雛形作成（任意）

新規プロジェクトを開始する場合:

1. 実行: node scripts/coderio-skill.mjs scaffold-prompt "MyApp"
2. AI タスク: コマンドが出力する指示に従ってファイルを作成してください。

---

Phase 1: Protocol Generation

Step 1.1: データの取得

# Replace with your URL and Token
node scripts/coderio-skill.mjs fetch-figma "https://figma.com/file/..." "figd_..."

確認: process/thumbnail.png が存在している必要があります。

Step 1.2: 構造の生成

1. プロンプトの生成:

   node scripts/coderio-skill.mjs structure-prompt > scripts/structure-prompt.md
   

2. AI タスク（構造）:

   • ATTACH: process/thumbnail.png（必須）
   • READ: scripts/structure-prompt.md
   • INSTRUCTION: 「プロンプトと添付のサムネイルに基づいて、コンポーネント構造の JSON を生成してください。視覚的なグルーピングに注目してください。テキスト内容を使って、コンポーネント名を正確に付けてください（例: 'FAQ' ではなく 'SafeProducts'）。」
   • SAVE: 生成された JSON を scripts/structure-output.json に貼り付けます。

3. 結果の処理:

   node scripts/coderio-skill.mjs save-structure
   

Step 1.3: Props の抽出（反復）

1. コンポーネントの一覧表示:

   node scripts/coderio-skill.mjs list-components
   

2. 一覧の各コンポーネントについて:

   a. プロンプトの生成:

   node scripts/coderio-skill.mjs props-prompt "ComponentName" > scripts/current-props-prompt.md
   

   b. AI タスク（Props）:

   • ATTACH: process/thumbnail.png（必須）
   • READ: scripts/current-props-prompt.md
   • INSTRUCTION: 「props と state のデータを抽出してください。テキストと画像パスをピクセル単位で正確にしてください。」
   • SAVE: 生成された JSON を scripts/ComponentName-props.json に貼り付けます。

   c. 保存と検証:

   node scripts/coderio-skill.mjs save-props "ComponentName"
   # 失敗した場合は、サムネイルをより注意深く確認して手順 'b' をやり直してください
   

---

Phase 2: Code Generation

Step 2.1: タスクの計画

node scripts/coderio-skill.mjs list-gen-tasks

これにより、インデックス（0, 1, 2...）付きのタスク一覧が出力されます。

Step 2.2: コンポーネントの生成（反復）

タスクのインデックスごと（0 から開始）:

1. プロンプトの生成:

   node scripts/coderio-skill.mjs code-prompt 0 > scripts/code-prompt.md
   # '0' を現在のタスクインデックスに置き換えてください
   

2. AI タスク（コード）:

   • ATTACH: process/thumbnail.png（必須）
   • READ: scripts/code-prompt.md
   • INSTRUCTION: 「React コンポーネントのコードを生成してください。サムネイルに完全に一致させてください。入力データの厳密なテキスト内容を使用し、捏造しないでください。」
   • SAVE: コードブロックを scripts/code-output.txt に貼り付けます。

3. コードの保存:

   node scripts/coderio-skill.mjs save-code 0
   # '0' を現在のタスクインデックスに置き換えてください
   

Step 2.3: 最終統合

ルートコンポーネントを App.tsx に組み込みます。Phase 2.1 の最後のタスクで見つかったパスを使用してください。

---

トラブルシューティング

• 「Props validation failed」: AI が空の props を生成しました。process/thumbnail.png が添付されており、AI から閲覧可能かを確認してください。props の生成手順を再試行してください。
• 「Module not found」: 親コンポーネントより前に、子コンポーネントに対して node scripts/coderio-skill.mjs save-code が実行されていることを確認してください。Phase 2 は順番（0, 1, 2...）に実行する必要があります。
• 「Visuals don't match」: サムネイルを添付しましたか？ AI は、生データには含まれていない余白やレイアウトのニュアンスについて、サムネイルに依存しています。