どんな話？
引き渡しで手に入るのは指示文が1つだけで、画面にも「Claude Codeを開いて貼ってください」と書いてあります。渡し先は自分のパソコンかブラウザのClaude Code。しくみはMCPで、逆向きに /design-sync でデザイン側を既存の部品から始めることもできます。ただし「最高の忠実度」はReactの部品を使っている場合の話です。
この記事でわかること
- 引き渡しで手に入るのは、指示文が1つだけ。押しても実装は始まらない
- 渡し先は2つ。自分のパソコンか、ブラウザのClaude Code
- ファイルの一覧は「先に見るもの」の指定。★を外したものも読まれる（隠す機能ではない）
- しくみはMCP。公式のコマンドでつないで /design-login でログインする
- 逆向きもある。Claude Codeで /design-sync すると、デザイン側が既存の部品から始まる
- 「最高の忠実度」はReactの部品を使っている場合の話。貼ったあとの結果はこの記事では確認していない
こんな人に
- Claude Designで作った画面を、本物のページにしたい人
- Claude Codeとの受け渡しの仕組みを知りたい人
- すでにReactの部品を持っている人
この話のTIPS
- コツClaude DesignからClaude Codeへの引き渡しで手に入るのは、指示文が1つだけです。押しても実装は始まりません。ファイルの一覧の★は「先に見るもの」の指定で、外したものも読まれます。