design-md

Stitch で作った画面から、意匠の決まりを文書に起こすときです。

次の画面を作らせるための原本

目的が本文にはっきり書かれています。

DESIGN.md は、既存の意匠の言語に完全に沿った新しい画面を Stitch に作らせるためのプロンプトの「唯一の原本」になる。

つまりこの文書は人が読むためだけのものではありません。次に Stitch へ渡す入力として使います。

Stitch の見方に合わせる

本文に 1 行あります。

Stitch は意匠を「視覚的な記述」として解釈し、それを具体的な色の値が支える。

だから DESIGN.md も、その形に合わせて書かせます。色の 16 進数だけでも、言葉だけでも足りない、という前提です。

★allowed-tools で確認なしに使う道具を 4 つ宣言している

frontmatter にこうあります。

allowed-tools:
  - "stitch*:*"
  - "Read"
  - "Write"
  - "web_fetch"

allowed-tools は、スキルが呼ばれた回に確認なしで使える道具の宣言（事前承認）です。挙がっているのは Stitch の道具、ファイルの読み書き、Web の取得の 4 つで、シェルの実行は挙がっていません。

ほかの道具が使えなくなるわけではありません。挙がっていない道具は、利用者の権限の設定に従って確認されます。

取得の手順が 6 段

1. 道具の名前空間を調べるlist_tools で接頭辞を得る
2. プロジェクトを探すID が無ければ list_projects
3. 画面を探すID が無ければ list_screens
4. 画面の情報を取るget_screen
5. 資産を落とすHTML と画面写真
6. プロジェクトの情報を取るget_project

1 段目が「接頭辞を調べる」なのが実務的です。 MCP の道具の名前は環境によって変わるので、決め打ちにせず最初に確かめます。

4 段目で返るもの

4 段目で返るものが列挙されています。

• screenshot.downloadUrl意匠の見た目
• htmlCode.downloadUrlHTML と CSS の全体
• width height deviceType寸法と対象の端末
• designTheme色と様式

5 段目と 6 段目で取り出すもの

5 段目で HTML を落として、Tailwind の class・独自の CSS・部品の型を取り出します。

6 段目の designTheme には、色の方式・書体・角の丸み・独自の色が入ります。プロジェクト全体の決まりです。

ID の渡し方に注意書きがある

細かいですが効く注記です。

同じ ID を 2 通りで渡す必要があります。知らないと失敗します。

書き出す DESIGN.md は 5 節

書き出す形も決まっています。雰囲気、色と役割、文字の決まり、部品の様式、配置の原則の 5 節です。色は「性格の分かる名前＋16 進数＋役割」で書き、rounded-full を「錠剤の形」のように言葉に直せ、としています。同梱の examples/DESIGN.md が書き上がりの見本です。

Stitch を使っていない

Stitch を使っていないなら要りません。 MCP サーバーへの接続が前提です。

設計済みの画面が無い

設計済みの画面が無いと何も起こせません。前提に「1 枚以上の設計済みの画面」があります。

Figma から取り込みたい

Figma からの取り込みなら別物です。figma は Figma の資産を動画に持ち込むものです。目的も対象も違います。

画面を作りたい

画面を作る側ではありません。意匠の決まりを文書に起こすのが仕事です。作るのは Stitch 側です。

画面のコードを点検したい

画面のコードを点検したいなら別物です。web-design-guidelines の側です。

実際には外部と通信し、ファイルを書く

SKILL.md の解析では、外部通信・シェル実行・ファイル書き換えの記述は見つかっていません。同梱ファイルは 2 件です（2026-09-21 時点）。

入れる前の確かめ方はスキルを入れる前に確認することにあります。

Stitch のプロジェクトを読む

Stitch のプロジェクトを読みます。list_projects で自分が持つプロジェクトの一覧を取るので、対象を絞らないと関係ないものまで見られます。

資産を落とし、DESIGN.md を書く

資産を落とします。HTML と画面写真をダウンロードします。置き場所を確認してください。

DESIGN.md を上書きする可能性があります。既にある場合は控えを取ってください。

allowed-tools は制限ではない

allowed-tools は使える道具を絞る指定ではありません。 Claude Code の文書では、挙げた道具をその回は確認なしで使えるようにするもので、ほかの道具もそのまま呼べます。Agent Skills の仕様でも「事前承認」で、試験的な項目とされています。

ファイルの書き込み（Write）も確認なしで走る側に入っています。

外部の文書を参照する

外部の文書を参照します。前提に Stitch のプロンプトの手引き（stitch.withgoogle.com）への接続が挙がっています。

ライセンス

ライセンス: Apache-2.0。再配布や商用利用の前に公開元の表記を確認してください。

`DESIGN.md` は何のためのファイルですか

次の画面を Stitch に作らせるための入力です。人が読むためだけの文書ではありません。

本文は「唯一の原本」と呼んでいます。

なぜ最初に道具の名前を調べるのですか

MCP の道具の名前空間が環境によって変わるからです。list_tools で接頭辞（mcp_stitch: のような）を取り、それ以降の呼び出しに使います。

決め打ちにしないための手順です。

画面が無くても使えますか

使えません。前提に「設計済みの画面が 1 枚以上」があります。

意匠を読み取る元が無いと、何も起こせません。

`allowed-tools` は何のためですか

呼ばれた回に確認なしで使える道具の宣言（事前承認）です。Stitch の道具・読み・書き・Web の取得の 4 つが挙がっています。

ほかの道具が使えなくなるわけではなく、そちらは権限の設定に従います。

ID の渡し方で失敗します

2 通りあります。 list_screens と get_screen には数字の ID だけ、get_project には完全な経路（projects/{id}）を渡します。

本文に注記があります。

対応しているエージェントはどれですか

公開元は明記していません。 SKILL.md は標準の形式なので、仕様に沿った実行環境で読めます。ただし MCP サーバーへの接続が前提なので、その仕組みを持つ環境が要ります（指標の意味と限界）。