コードベースからインポート

あなたのコードベースには、すでにデザイン言語があります。スタイルシートのあちこちに散らばったカラー、コンポーネントファイルに埋もれた余白パターン、Tailwind 設定に固定されたタイポグラフィの選択。DESIGN.md はそのすべてを 1 か所にまとめ、Stitch が白紙のデフォルトではなく、あなたのプロダクトの一部のように見える画面を生成できるようにします。

そこに到達する方法は 2 つあります。任意のコーディングエージェントに貼り付けられる手軽なプロンプトか、パイプライン全体を自動化する専用スキルです。

手軽なプロンプト

プロジェクトディレクトリから、このプロンプトを任意のコーディングエージェント（Gemini、Claude Code、Cursor、Antigravity）にコピーします。スキルやプラグインは不要です。エージェントがソースファイルを読み、見つけた内容から DESIGN.md を書き出します。

PROMPT

Context — optionalAdd specifics about your codebase’s purpose, critical files, and goals.

InstructionsRead the codebase and/or website before designing. The repo and/or website are the source of truth. Start with real content. Pull product names, taglines, and copy from the README. Pull labels, values, and terminology from config files, CLI help text, schemas, and error messages. Nothing invented, nothing placeholder — if the repo doesn’t contain it, the design doesn’t show it. Look at existing code for visual identity: color values, type scales, spacing tokens, component patterns. If a design system exists, inherit it. If values are scattered across files, collect them — they reveal visual intent even when undocumented. Read the core logic and data structures, not just the docs. They tell you the product’s native shape — a timeline, a graph, a catalog, a pipeline. Let that shape organize the page instead of a section template. Find what the README leads with. That feature dominates the page. Establish its weight before placing anything else — what matters before what measures.

プロンプトの役割

このプロンプトは、テンプレートから前向きに組み立てるのではなく、コードから逆算して作業するようエージェントに指示します。抽出するのは次の 3 つのレイヤーです。

コンテンツ — ソースから直接取得したプロダクト名、ラベル、コピー。埋め草のテキストも lorem ipsum もありません。
視覚的アイデンティティ — スタイルシート、テーマファイル、Tailwind 設定から収集したカラー、フォント、余白、コンポーネントパターン。
情報アーキテクチャ — プロダクトデータの自然な形。これがページの構成を決めます。

出力される DESIGN.md は .stitch/DESIGN.md に置けば、すぐに画面生成に使えます。

より良い結果を得るためのヒント

エージェントに特定のディレクトリを指定します。 コンテキストブロックに「src/styles/、tailwind.config.ts、src/components/ に注目してください」のような行を追加します。
スタックを伝えます。 「これは React + Tailwind + shadcn/ui のプロジェクトです」と伝えると、エージェントが適切な場所を探しやすくなります。
イテレーションします。 最初の抽出は全体像をつかむものです。「アクセントカラーはフッターの青ではなく、ナビゲーションバーのティールにしてください」のように磨き上げます。

Stitch Design Skills による自動抽出

上記のプロンプトはどこでも使えますが、エージェントの一般的な推論に依存しています。Stitch Design Skills は、主要なフレームワーク（React、Vue、Svelte、Angular、プレーン CSS、Tailwind）でデザイントークンをどこから探すべきかを正確に把握する、専用設計のエージェント指示です。

Stitch Design Skills とは？

Stitch Design Skills は、3 つのプラグインに整理された 13 のエージェントスキルのオープンソースコレクションです：

プラグイン	役割
stitch-design	デザインの作成とキャプチャ — コードからトークンを抽出し、実行中のアプリをスナップショットし、Stitch にアップロード
stitch-build	デザインをコードに変換 — React コンポーネント、ウォークスルー動画、shadcn/ui 統合
stitch-utilities	品質を強化 — プロンプト最適化、プレミアムデザインシステム、自律的な複数ページ生成

スキルは Agent Skills のオープン標準に従っており、互換性のあるあらゆるコーディングエージェントで動作します。

プラグインスイートをインストールする

npx plugins add google-labs-code/stitch-skills --scope project --target claude-code

使用するエージェントに応じて、claude-code を cursor、gemini-cli、antigravity に置き換えてください。

ソースコードから DESIGN.md を抽出する

extract-design-md スキルは、アプリケーションのビルドや実行を必要とせずにソースツリーをスキャンします：

PROMPT

Extract the design system from ./src and write it to .stitch/DESIGN.md

スキルはスタック（Tailwind 設定、CSS カスタムプロパティ、テーマファイル、styled-components）を自動的に検出し、各デザイン要素を順に処理します：

視覚的雰囲気 — 全体的なムード、余白の哲学、色温度
カラーパレット — すべての固有カラーを重複排除し、機能的な役割を割り当て
タイポグラフィ — フォントファミリー、タイプスケールの階層、ウェイトと余白のパターン
コンポーネントスタイル — ボタン、カード、ナビゲーション、入力欄、ドメイン固有の要素
レイアウト原則 — グリッドシステム、レスポンシブブレークポイント、余白戦略

出力には、YAML frontmatter（機械可読なトークン）と Markdown の文章（人間可読なデザインの根拠）の両方が含まれます。この二重形式が、DESIGN.md をツールと AI エージェントの両方で機能させる理由です。

Stitch にアップロードする

DESIGN.md ができたら、Stitch プロジェクトにプッシュして、生成されるすべての画面がデザインシステムに従うようにします：

PROMPT

Upload .stitch/DESIGN.md to Stitch and create a design system from it.

manage-design-system スキルがアップロードを処理し、プロジェクトレベルでデザインシステムを登録します。以後のすべての画面はトークンを自動的に継承します。

コードからデザインへの完全なパイプライン

デザインシステムの抽出、静的 HTML のキャプチャ、Stitch へのアップロードを 1 回で行う完全なインポートには、オーケストレータースキルを使用します：

PROMPT

Upload the frontend at ./my-app into a Stitch project called “My App Migration”.

code-to-design スキルは 3 つのステップを連鎖させます。実行中のアプリから静的 HTML を抽出し、ソースからデザインシステムを逆算し、すべてを Stitch にアップロードします。

どの方法を使うべきか

状況	推奨する方法
手早く抽出したい（セットアップなし）	上記のプロンプトを任意のエージェントにコピーする
フレームワークを考慮した徹底的な抽出	スキルをインストールし、`extract-design-md` を使う
Stitch への完全な移行	スキルをインストールし、`code-to-design` を使う
DESIGN.md をゼロから書く	フォーマットについては DESIGN.md とは？を参照