design-md

design-md スキルの概要

design-md ができること

design-md スキルは、Stitch プロジェクトを画面の背後にある意味的なデザインシステムを捉えた DESIGN.md に変換します。単なる見た目の監査ではなく、プロンプト可能なデザインの正本を必要とする人向けのものです。Stitch で新しい画面を生成しつつ、レイアウト、トーン、色、コンポーネントの言語を一貫させたいなら、design-md スキルはそのために作られています。

どんな人に向いているか

実際の画面を持つ Stitch プロジェクトで、デザインシステムを言葉で再現可能な形に記述したいなら design-md スキルを使ってください。プロダクトデザイナー、AI 支援のフロントエンドビルダー、そして既存 UI をドキュメント化して、Stitch が整合性のある新しい UI を生成できるようにしたいチームに特に適しています。

このスキルが他と違う理由

design-md の主な価値は「翻訳」にあります。技術的なデザインのシグナルを読み取り、自然で再利用しやすいデザイン指針に変換します。これは、Stitch が曖昧なスタイル名だけでなく、具体的な値に裏打ちされた記述的なデザイン言語に最もよく反応するからです。このスキルは、目の前の画面を一回要約するだけでなく、今後の生成を導ける DESIGN.md が必要なときに特に役立ちます。

design-md スキルの使い方

Stitch ワークフローにスキルをインストールする

npx skills add google-labs-code/stitch-skills --skill design-md --global で design-md をインストールします。リポジトリのパスは google-labs-code/stitch-skills で、スキル本体は skills/design-md にあります。グローバル設定でない場合は、ローカルの skills ワークフローに合わせてインストール方法を調整してください。

最初のコンテキストを適切に与える

design-md usage をうまく使うには、明確な Stitch 対象を最初に渡すことが重要です。たとえば、プロジェクト名または ID、分析したい画面やフロー、そして生成した DESIGN.md に何を支援してほしいのかを示します。よいプロンプトは、何を文書化したいのか、そしてその理由まで書きます。たとえば「Furniture Collection プロジェクトの Home 画面を分析し、新しい商品一覧画面の生成に使える DESIGN.md を作成して」といった具合です。これは、単に一般的なデザイン要約を求めるよりも優れています。なぜなら、スキルが最適化すべき対象を明確にできるからです。

まず読むべきファイル

実用的な design-md guide としては、まず SKILL.md でワークフローを確認し、次に README.md でインストール手順と使用例を見て、さらに examples/DESIGN.md をレビューして、期待される出力の形と詳細レベルを把握してください。自分の repo や運用に合うかを判断したいなら、この 3 つのファイルが最速の判断材料になります。

出力品質を高めるワークフロー

少なくとも 1 つ、実際にデザインされた Stitch 画面がある状態で使うのが理想です。スキルはプロジェクトの取得情報とデザインメタデータに依存するため、入力に実在するプロジェクト、特定の画面、そして意図的なスタイルと単なる実装上の都合を切り分けられるだけのコンテキストが含まれているほど、生成される DESIGN.md の質は上がります。目的が 1 画面以上に広い場合は、弱い 1 サンプルからシステムを推測させるのではなく、代表的な複数の画面をまたいで要約するようスキルに依頼してください。

design-md スキル FAQ

design-md は Stitch プロジェクト専用ですか？

はい、design-md スキルは Stitch プロジェクトと Stitch MCP アクセス専用に作られています。Stitch を使っていない場合は、一般的なデザインプロンプトや別のドキュメント化ワークフローのほうが適しています。

実行前に何を用意すべきですか？

少なくとも、対象プロジェクトを特定できる情報と、分析したい画面または画面セットを用意してください。対象が具体的であるほど、design-md が意味的なデザインシステムを組み立てる際の推測が少なくて済みます。

design-md スキルは初心者にも使いやすいですか？

はい、プロジェクト名と画面名を言えるなら使えます。初心者にありがちな失敗は、実際の正本を与えずにデザイン文書だけを求めてしまうことです。このスキルは、曖昧なプロンプトから雰囲気を推測するより、実際の Stitch アセットを参照できるときに最もよく機能します。

どんなときに使わないほうがいいですか？

すばやい見た目の印象、マーケティング調の説明、1 段落の UI 批評だけが欲しいなら design-md は使わないでください。また、Stitch MCP ツールにアクセスできない場合や、意味のあるデザインデータを持つプロジェクトがない場合も適切ではありません。

design-md スキルを改善するには

より狭く、シグナルの強い対象を与える

最も強い design-md skill の出力は、焦点を絞ったプロンプトから生まれます。文書化したい正確な画面、フロー、またはプロジェクトの一部を指定し、基盤レベルのシステムが欲しいのか、コンポーネント中心のシステムが欲しいのか、それとも生成向けのプロンプトガイドが欲しいのかを明示してください。そうすることで、スキルは再利用に本当に重要な点を優先できます。

重要なデザイン判断を共有する

DESIGN.md を形づくるべき制約をすでに把握しているなら、最初にまとめて伝えてください。ブランドのトーン、アクセシビリティ要件、レイアウトの密度、レスポンシブ挙動、あるいは出力で実装詳細よりも編集的な言語を優先したいかどうか、などです。これは特に design-md for Design Systems で重要です。実際の目的は、表示要素を一つひとつ記述することではなく、再現可能な判断を残すことだからです。

よくある失敗パターンに注意する

最大のリスクは、1 画面に過剰適合してしまうこと、または一時的な UI コンテンツをシステム規則と誤認することです。コアトークン、再利用可能なパターン、画面固有の例外を区別するよう依頼すると、結果は改善します。初回の出力が一般的すぎるなら、色の役割、タイポグラフィの階層、余白のロジック、コンポーネントの振る舞いについて、より強い指針を求める 2 回目のプロンプトで絞り込んでください。

最初の DESIGN.md から反復する

最初の出力は最終成果物ではなく、デザイン言語の下書きとして扱ってください。Stitch の生成に十分な具体性があるかを確認し、パレットの役割、ボタン状態、レイアウト規則など弱い部分を明確にする修正を依頼します。最も役立つ design-md install の結果は、今後のプロンプトが毎回システムを説明し直さなくても、そのまま再利用できる DESIGN.md です。