小学生でもわかる AI図鑑
速報
  1. ホーム
  2. 小学生でもわかるClaude Design
  3. 第8話

Claude Design 第8話

【小学生でもわかる】渡すのは指示書だけ！Claude DesignからClaude Codeへの引き渡し

左がClaude Designで作った画面。右が、それを受け取って作られた本物のページ。あいだにあるのが、この回の主役です。引き渡しのボタンを押すと、長い文章が1つコピーされます。押した瞬間に実装が始まるわけではありません。

  • 有料（Claude DesignもClaude Codeも共通の枠から）
Xで記事を読む シェア
コードへ渡すのカバー

どんな話？

引き渡しで手に入るのは指示文が1つだけで、画面にも「Claude Codeを開いて貼ってください」と書いてあります。渡し先は自分のパソコンかブラウザのClaude Code。しくみはMCPで、逆向きに /design-sync でデザイン側を既存の部品から始めることもできます。ただし「最高の忠実度」はReactの部品を使っている場合の話です。

この記事でわかること

  • 引き渡しで手に入るのは、指示文が1つだけ。押しても実装は始まらない
  • 渡し先は2つ。自分のパソコンか、ブラウザのClaude Code
  • ファイルの一覧は「先に見るもの」の指定。★を外したものも読まれる（隠す機能ではない）
  • しくみはMCP。公式のコマンドでつないで /design-login でログインする
  • 逆向きもある。Claude Codeで /design-sync すると、デザイン側が既存の部品から始まる
  • 「最高の忠実度」はReactの部品を使っている場合の話。貼ったあとの結果はこの記事では確認していない

やることチェックリスト

0/6

記事を読みながら、できたものにチェックを付けていけます。チェックはこの端末に残ります。

くわしい手順と画面の図は、Xの記事にあります。

こんな人に

  • Claude Designで作った画面を、本物のページにしたい人
  • Claude Codeとの受け渡しの仕組みを知りたい人
  • すでにReactの部品を持っている人

この話のTIPS

  • コツClaude DesignからClaude Codeへの引き渡しで手に入るのは、指示文が1つだけです。押しても実装は始まりません。ファイルの一覧の★は「先に見るもの」の指定で、外したものも読まれます。
すべてのTIPS