デザインMDファイルとは
前回の動画で計画を立てたので、今回はデザインの方向性を決めていきます。具体的には、デザインMDファイルと参考画像（ワイヤーフレーム）を用意します。
getDesign.mdを使ってデザイントークンを取得する
getDesign.mdというサイトを使うと、有名なサービスのデザインテーマを簡単に取得できます。
例えば以下のようなサービスのデザインMDファイルが用意されています。
- Claude ー Claude Codeに似たカラーテーマ
- Cursor ー シンプルで見やすいデザイン
- Notion ー シンプルなデザイン
- Resend ー ダークテーマ寄り
- Presentation など
好みのデザインテーマを選んで、右上のコピーボタンでデザインMDをコピーします。今回はCursorのデザインテーマを使用します。
Claude CodeにデザインMDを渡す
コピーしたデザインMDをClaude Codeに貼り付けます。
- Claude Codeで「以下がdesign MDです」と伝える
- Ctrl + V で貼り付け
- Enterキーで送信
Claude Codeがドキュメントのデザイントークンとして保存してくれます。
ワイヤーフレームを作成する
デザインの方向性は決まりましたが、画面の構成（どこに何を配置するか）も決める必要があります。指定しないとClaude Codeが勝手に作るので、こだわりたい場合はワイヤーフレームを用意しましょう。
ChatGPTの画像生成機能を使う
ChatGPTに「動画講座プラットフォームのワイヤーフレームのデザインをいくつか画面で生成してください」と指示すると、ワイヤーフレーム画像を作成してくれます。
気に入るものが出るまで画像生成を繰り返してもOKです。
ワイヤーフレームの作り方の選択肢
- ChatGPTの画像生成 ー 手軽に生成できる
- 手書き ー 骨格レベルで描けば十分
- Figma ー デザインツールを使って作成
ワイヤーフレームは「骨格」という意味なので、大まかなレイアウトがわかれば十分です。
Claude Codeにワイヤーフレームを渡す
生成した画像をスクリーンショットして、Claude Codeに貼り付けます。
- Windows：Alt + V で画像を貼り付け
- Mac：Ctrl + V（または類似のショートカット）
Claude Codeがワイヤーフレームをドキュメントに保存してくれます。
次のステップ
仕様書とデザインが決まりました。次の動画ではMCPサーバー（Turso MCPとPlaywright MCP）を設定して、ハーネスを自律的に動かしていきます。データベースの作成やテーブル作成をAIが自律的に行えるようになります。
なお、Google認証に関してはGoogle Cloud Platformで手動での設定が必要です。