Google Stitch × Claude Code｜URL入力から30秒で「いい感じのUI」を自動生成する最新デザインワークフロー

前回の記事👉 

自分のサイトのURLをGoogle Stitchに渡したら、AIが「The Modern Calligrapher」を提案してきた

想像していなかった名前でした。

自分はデザイナーではありません。カラーパレットを決めるのも、余白の感覚をつかむのも、ずっと難しいと感じてきた分野です。DESIGN.mdという概念を知ったときも、「これはデザイナーが使うものだろう」と最初は距離を置いていました。

それでも試してみようと思ったのは、「URLやスクリーンショットを渡すだけで生成できる」という一点でした。

DESIGN.md適応前のサイト

適応後のサイト➡️   :  https://www.takibilab.com/

Claude Code で作成したポートフォリオサイトのURLやスクリーンショットをGoogle Stitchに入力して、DESIGN.mdを生成してもらったとき。数十秒後に画面に現れたのは、こんな一行でした。

「書道家？」と思いながら読み進めると、日本の美意識（Ma＝間）とエディトリアルデザインを融合させたコンセプトが、かなり詳しく説明されていました。カラーコードも、タイポグラフィの対比も、コンポーネントごとのルールも。「こんなに出るの？」というのが正直な感想です。

「DESIGN.mdって、カラーコードを並べたファイルでしょ？」と半分舐めていた自分には、ちょっと驚きでした。

Google StitchでDESIGN.mdを生成する流れ

やることはシンプルで、3ステップです。

①Google Stitchにアクセスする

②サイトのURLもしくは画像を入力する。
A. プラスボタンから画像・URLをUploadできます

③ AIに「DESIGN.mdを作って」と伝える。30秒ほど待つと、デザイントークンとルールを含んだMarkdownドキュメントが出てきます。　ポイントはサイトのゼロベース構築ではない場合は、Redesignを指定すること。新しいデザインを考える場合のおすすめはThinking with 3.1 Proの利用です。　

実際にかかった時間は30秒ほど。正直「もっと手動設定が必要かな」と想像していましたが、URLを渡すだけでした。「AIが既存サイトを読んで、そこからデザイン原則を逆算する」という動きです。

このような形で、スクリーンショットからサイトのコンテキストを読み取り、AIがデザインを"言語化" してくれます。 

※とてもわかりにくかったのですが、DESIGN.md　はカラーパレットを選択すると出るようになります

驚いたのは「コンセプト名」じゃなく「ルールの具体度」

最初は「The Modern Calligrapher」というネーミングの発想に驚きましたが、本当に驚いたのはその後でした。

たとえば、カラーの項目に「The No-Line Rule（ノーラインルール）」というセクションがあって、こう書いてありました。

そして Roundedness Scale（角丸スケール）は 0px。「ボタンからカードまで、すべてのUI要素は 90 度の角を使うこと。わずか 2px の角丸でさえ、このシステムの建築的なシャープさを損なう」という内容です。

想定の3倍くらい具体的でした。「こういうことが書いてあるとは思っていなかった」という種類の驚きです。

有料部分ではここから先を公開しています

• 実際に生成されたDESIGN.mdの全6セクション（カラーコード・タイポグラフィ・コンポーネント定義の実際の値）

• Claude Codeへの渡し方（CLAUDE.mdへの組み込み方)

• リデザイン後に変わったこと・気づいたこと

• ゼロベースでもデザインしてみたこと

• 今後の戦略

👉 ここから先は有料部分です