stitch-design-taste

Google Stitch に画面を作らせる前に、見た目の決まりを 1 枚にまとめたいときに効きます。作るのは DESIGN.md という設計の決まりの文書で、Stitch に画面を頼むときの唯一の拠り所にします。

公開元は 2026-10-19 に、このスキルを Leonxlnx/taste-skill-classics へ移しました。導入名は変わっていません。エージェントが自分で選ぶことはなく、名前で呼んだときだけ動きます。

taste-skill の旧版を Stitch 向けに翻訳したもの

翻訳元は、公開元の taste-skill が v2 より前に配っていた、コードを書くエージェントに直接効かせる禁止事項集です。今は同じ移転先に design-taste-frontend-v2-experimental の名前で残っています。こちらはその中身を、Stitch が読める形（自然文の説明＋正確な値）に翻訳したものです。

DESIGN.md に書かせる項目は 7 つ

DESIGN.md に書かせる項目は 7 つです。

• 雰囲気密度、揺らぎ、動きの 3 つの値と、その言い表し
• 色名前＋16 進の値＋役割。差し色は 1 色まで
• 文字書体の組み合わせ、大きさの段、禁止する書体
• 部品ボタン、カード、入力欄、読み込み中、空の状態
• 配置格子、余白、狭い画面での崩し方
• 動きばねの値、常時の小さな動き、順番に出す演出
• 禁止事項「AI っぽさ」の型を名指しで列挙

3 つの値で雰囲気を決める

密度・揺らぎ（左右対称か非対称か）・動きの 3 つを、それぞれ 1〜10 で決めます。

揺らぎの既定

8

動きの既定

6

密度の既定

4

既定は揺らぎ 8・動き 6・密度 4で、かなり非対称で動きの多い側に寄せてあります。依頼の雰囲気に合わせて動かす前提です。

Stitch を使わないとき

Stitch を使わないとき。コードを書くエージェントに直接効かせたいなら design-taste-frontend のほうが直接的です。すでにある Stitch のプロジェクトから DESIGN.md を起こすなら、Google の design-md（Stitch の MCP サーバーで画面を読み取って書く）が合います。

控えめで落ち着いた画面にしたいとき

控えめで落ち着いた画面にしたいとき。本文は「中立の雛形ではない。特定の高級感を押し付ける」と自分で書いています。揺らぎが 4 を超えると中央ぞろえの見出しを禁止し、同じ大きさのカード 3 枚の横並びも禁止するなど、好みがはっきりしています。

和文が中心の画面

和文が中心の画面。書体の候補に挙がるのは Geist、Satoshi、Outfit などで、和文の書体の名前はありません。和文の書体をどう選ぶかは書かれていないので、自分で足す必要があります。

外部通信・シェル実行・ファイル操作の記述は見つかっていない

SKILL.md の解析では、外部通信・シェル実行・ファイル操作の記述は見つかっていません。同梱ファイルは 2 件で、書き上がりの見本の DESIGN.md と、Codex 向けの設定（agents/openai.yaml。自動では呼ばれない設定）です。書き出すのは DESIGN.md の 1 枚で、画面の生成は Stitch 側で行います。

見本の DESIGN.md は、本文の 3 つの値に「創造性」（既定 8）を足した 4 つの値で始まります。また「Stitch は静止した画面を作り、動かさない」と断り、動きの節はあとでコードを書くエージェント向けの意図だとしています。

動きを減らす設定に触れていない

本文は「動いている部品には、常に繰り返す小さな動き（脈打つ、打ち込み風、浮遊、きらめき）を持たせよ」と指示していますが、prefers-reduced-motion（動きを減らしたい利用者の設定）への対応は、本文にも見本にも書かれていません。

禁止する書体に Inter が入っている

禁止する書体に Inter が入っています。「高級感・創作向けの文脈では Inter を禁止」、一般的なセリフ体（Times New Roman、Georgia など）も禁止です。すでに Inter で組んでいる製品の画面を作るときは、この項目を外すよう頼んでください。

禁止事項は生成物の点検表にも使える

禁止事項の中身は具体的で使えます。絵文字、純粋な黒（#000000）、紫や青の光る演出、「Elevate」「Seamless」のような決まり文句、「99.99%」のような作った丸い数字、John Doe や Acme のような仮の名前。生成物の点検表としても使えます。

インストール数

インストール数は約 28 万件です。移る前のリポジトリにあった 13 件は約 22 万〜45 万件に収まっていて（2026-09-20 の上流集計）、一部がまとまって入っている形です。

Stitch のアカウントが無くても使えますか

DESIGN.md を書くところまではできます。ただしこの文書は Stitch に画面を作らせるための入力なので、Stitch が無いと出番がありません。コードで直接組むなら design-taste-frontend を使ってください。

design-taste-frontend と両方入れる必要はありますか

使う道具で選べば足ります。Stitch に作らせるならこちら、エージェントにコードを書かせるなら design-taste-frontend です。どちらも「AI っぽさ」を消すのがねらいなので、両方を同時に効かせる意味は薄いです。

3 つの値はどう決めればいいですか

密度は「美術館のように空いている（1〜3）」から「操縦席のように詰まっている（8〜10）」、揺らぎは「左右対称（1〜3）」から「芸術的に崩す（8〜10）」、動きは「止まっている（1〜3）」から「映画のような演出（8〜10）」です。業務用の画面なら、揺らぎと動きを既定より下げるよう最初に伝えてください。

狭い画面の決まりはありますか

あります。768px 未満では多段の配置を必ず 1 段に崩す、横にはみ出すのは致命的な失敗、押せる部分は最低 44px、全画面の高さは h-screen ではなく min-h-[100dvh] を使う（iOS の Safari で画面が跳ぶため）、と書かれています。