interactive-prototype

インタラクティブプロトタイプ

静的なモックアップではなく、クリックして操作できるプロトタイプを作成します。バージョンを固定した React + Babel のインライン構成を使用し、DeviceFrame でラップします。

フェーズ 0 — コンテキストの事前確認（自動検出、質問は最大 1 つ）

デザインに関する質問をする前に、コンテキストを何も言わずに確認します。

1. .claude/design-tokens.json が存在する場合は Read .claude/design-tokens.json
2. Bash(ls ~/.claude/design-systems/ 2>/dev/null) — brief にフォルダー名と一致するブランドの記載がある場合は自動的に適用します
3. コードベースのトークンを Glob で検索します：**/tailwind.config.*、**/theme.{ts,js,json}、**/tokens.{css,scss}、**/_variables.*
4. brief をスキャンします：github URL → Skill: ingest-github、Figma URL → Skill: ingest-figma、画像の添付 → Skill: ingest-screenshot、.md/.pdf → Read

何も見つからない場合は、AskUserQuestion を 1 回だけ使用して、レジストリ／コードベース／スクリーンショット／Figma／なし（frontend-design を使用）／Claude に任せる、から選んでもらいます。「Using . Proceeding.」と報告します。

フェーズ 1 — 曖昧さの確認

brief で次の項目を確認します：プラットフォーム（iOS／Android／デスクトップ／ウェブ）、アプリのカテゴリー（フードデリバリー、ソーシャル、生産性など）、機能の数、デザインコンテキスト（ブランド／コードベース）。

プラットフォームとカテゴリーが記載されている場合、確認質問は最大 2 つです。それ以外の場合は AskUserQuestion を使用します。

• プラットフォーム
• 必要な画面（リスト）
• 画面間の遷移（即時／スライド／フェード／カスタム）
• 「ライブデータ」のモック（偽の API 応答）が必要か
• 操作方法 — タップのみか、スクロール／スワイプ／ドラッグも含むか
• 希望するバリエーション

ブランドのコンテキストについては質問しないでください。 フェーズ 0 で確認済みです。

フェーズ 2 — ビジュアルシステム

フェーズ 0 で得たコンテキストを使い、モバイルに適したシステムを確定します。

• モバイルではタップ領域を最低 44px にします
• 読み込んだトークンに基づき、スペーシング／文字サイズのスケールを統一します
• トークンがない場合は Skill: frontend-design を呼び出します

フェーズ 3 — ビルド

1. 次のシェルを含む artifacts/<slug>.html を作成します。

   <!doctype html>
   <html>
   <head>
     <meta charset="utf-8"/>
     <title>{{name}}</title>
     <script src="https://unpkg.com/[email protected]/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
     <script src="https://unpkg.com/@babel/[email protected]/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
     <script src="./device_frame.jsx" type="text/babel"></script>
     <script src="./animations.jsx" type="text/babel"></script>
     <style>body { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f4f4f6; }</style>
   </head>
   <body>
     <div id="root"></div>
     <script type="text/babel">
       const { useState } = React;
       // your components here
       function App() {
         const [screen, setScreen] = useState('home');
         return <DeviceFrame kind="ios">
           {screen === 'home' && <HomeScreen onNav={setScreen}/>}
           {screen === 'detail' && <DetailScreen onBack={() => setScreen('home')}/>}
         </DeviceFrame>;
       }
       ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
     </script>
   </body>
   </html>
   

2. Bash(cp starters/device_frame.jsx "$(dirname <html>)/") + Bash(cp starters/animations.jsx "$(dirname <html>)/") — HTML と同じディレクトリにコピーします
3. ナビゲーションパターン：現在の画面には useState を使用します。遷移には animations.jsx の <Transition> を使用します。
4. 重要な React のルール： const styles = {...} は使用しないでください。const headerStyles、const cardStyles のように、コンポーネント名を先頭に付けてください。インラインスタイルも使用できます。
5. モックデータはインラインで記述し、外部 fetch は使用しません。

フェーズ 4 — 検証

重要： この成果物は外部の .jsx スターターを読み込むため、file:// では CORS エラーが発生します。最初に /serve を実行してください（初回のみ）。その後、http 経由でプレビューします。

/serve
/done http://127.0.0.1:4567/artifacts/<slug>.html

エラーを修正し、バックグラウンドで Skill: verify-artifact を実行します。

フェーズ 5 — 次のステップ

• /make-tweakable で調整項目（primaryColor、fontSize、density variants）を公開します
• /export-standalone でオフライン用の成果物を作成します
• /handoff で開発チーム向けのコンポーネントファイルを作成します
• /register-asset で概要に追加します