テック技報最新号へ →
デザイン

Claude DesignからClaude Codeに渡すときは「再現して」ではなく「実際に動くアプリとして作って」と指示する

Claude Design の Handoff to Claude Code で実装を引き継げる。ただ「再現して」とだけ頼むと、見た目だけで動かないモックになりやすい。

@suna_gaku · 投稿 2026-04-25
#AIデザイン#ClaudeDesign#ClaudeCode#ハンドオフ

どんな問題を解決するか / いつ使うか

Claude Design で作ったデザインを実装に回すとき。デザインシステムをClaude DesignとClaude Codeの間で同期したいとき。

やり方

  1. Claude Design 右上の Share → Handoff to Claude Code で、Web版またはローカルのCLIに引き継ぐ。
  2. 依頼文は「このデザインを実際に動くアプリとして作って」にする（「再現して」だけだと見た目だけのモックになる）。
  3. デザインシステムを行き来させたいときは、Claude Code 側の /design-sync コマンドでデザインシステムを取り込み → Claude Design で編集 → 送り返して同期する。
  4. 社内のデザインシステムを最初に Claude Design に取り込んでおくと、デザイナー以外でもデザインシステムに沿ったUI案を大量に出せる（@tonkotsuboy_com の例）。

注意点・対応状況

  • メニュー名・コマンド名は投稿時点（2026年4〜6月）のもの。最新は公式ドキュメントで確認する。

出典

X の元の投稿を開く