1仕組みと動作原理
成果物はコードや画像ではなくDESIGN.md仕様書ファイルです。同リポジトリ内の他スキルの「アンチ・スロップ（粗製乱造防止）」フロントエンドルールを、Google Stitchが解釈可能なセマンティックデザイン言語に変換し、以降の画面生成における唯一の信頼できる情報源（Single Source of Truth）とします。
skills/stitch-skill/SKILL.md
This skill generates `DESIGN.md` files optimized for Google Stitch screen generation.
ここでの処理内容：Stitchの入力インターフェースはコードトークンではなく自然言語による「視覚的説明」を受け取るため、同一の美学規約を機能させるには異なる表現媒体（説明的な名称＋正確な数値）に置き換える必要があります。
「唯一の信頼できる情報源」としての位置づけ：DESIGN.mdを一度作成すれば、以降のすべてのStitch画面生成がこれに準拠するため、複数画面にわたって色、フォント、角丸、余白の一貫性を担保できます。
skills/stitch-skill/SKILL.md
The generated `DESIGN.md` serves as the **single source of truth** for prompting Stitch to generate new screens that align with a curated, high-agency design language.
これは「画面ごとにプロンプトを都度投げる」従来手法との最大の違いです。一貫性を個人のプロンプト作成の癖から、再利用およびレビュー可能なドキュメント資産へと引き上げます。
仕様は7つの必須要素（雰囲気/色彩/フォント/コンポーネント/レイアウト/モーション/アンチパターン）に固定分割されており、DESIGN.mdの構造的な完全性を担保し、項目の欠落を防ぎます。
skills/stitch-skill/SKILL.md
Generate a `DESIGN.md` file that encodes:
本文に続いて「1 Visual atmosphere / 2 Color calibration / 3 Typographic architecture / 4 Component behaviors / 5 Layout principles / 6 Motion philosophy / 7 Anti-patterns」を定義し、§Output Formatにも同様の7セクションからなるそのまま流用可能なスケルトンを提供します。
「設定ダイヤル」とシーンに応じた形容詞を用いて、抽象的な美学を調整可能なパラメータへと変換：密度（Density）、バリエーション（Variance）、モーション（Motion）をそれぞれ3段階に分け、デフォルト基準値として「8-6-4」を設定しています。
skills/stitch-skill/SKILL.md
Default baseline: Variance 8, Motion 6, Density 4. Adapt dynamically based on user's vibe description.
同リポジトリのv1/v2におけるDESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITYの3つのダイヤルの思想をそのまま引き継ぎ、Stitch向けのセマンティック表現に変更しています。DESIGN.mdの冒頭部分に手動編集可能な設定表として展開されます。
ルールは「禁止事項＋代替案」のペアで提示：Interを禁止する際はGeist/Outfit/Cabinet Grotesk/Satoshiを同時に指定し、紫青ネオンを禁止する際はニュートラル基調＋単一アクセントカラーを指定、純黒を禁止する際はOff-Black/Zinc-950/Charcoalを指定します。
skills/stitch-skill/SKILL.md
- **Font Selection:** `Inter` is BANNED for premium/creative contexts. Force unique character: `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`
代替案をペアで提示することが本スキルを実用化するための前提です。禁止するだけで代替案を示さないと、モデルはより質の低いデフォルト設定へ後退してしまいます。
カラーには16進数（hex）と機能的役割の指定を必須とし、アクセントカラーは最大1色、彩度は80%未満に抑えることで、典型的な「AI特有の紫青グラデーション」を根本から排除します。
skills/stitch-skill/SKILL.md
- Maximum 1 accent color. Saturation below 80%
§Output Formatのサンプルカラーパレットでは、各色の用途（背景/カード面/本文/セカンダリテキスト/ボーダー/アクセント）を詳細に規定しており、DESIGN.mdをそのままStitchで再利用できるようにしています。
モーションはStitchにアニメーション生成を要求するのではなく「実装意図」としてドキュメントに記述：Springパラメータ（stiffness 100 / damping 20）＋transform/opacityのみを対象とする制約を記載し、後続のコーディングエージェントに実装を委ねます。
skills/stitch-skill/SKILL.md
- **Spring Physics default:** `stiffness: 100, damping: 20` — premium, weighty feel. No linear easing
DESIGN.mdのセクション8で「Stitch generates static screens — it does not animate（Stitchは静止画画面を生成するものであり、アニメーションは行わない）」と明示し、モーションセクションをAntigravityやCursorなどのコーディングエージェント向けの実装指示書として位置づけています。
すぐに参照可能な完成サンプルを同梱：同一ディレクトリにあるDESIGN.mdは、§Output Formatのスケルトンを具現化したバージョンです（手動編集可能なCreativity/Density/Variance/Motionの4つのダイヤル表を含む）。
skills/stitch-skill/DESIGN.md
> **How to use:** Change the numbers above to match your project's vibe.
このDESIGN.mdは成果物であると同時にサンプルでもあります。ユーザーはゼロから生成することなく、直接コピーして4つの数値とアクセントカラーのみを変更して利用できます。
2コア機能
01構造化されたDESIGN.mdデザインシステム仕様書の生成（7つの必須セクション）
02Stitch向けセマンティック表現：説明的な名称と正確なhex/rem/px値の組み合わせ
03カラーキャリブレーションとアクセントカラーの限定（アクセントは最大1色、彩度80%未満、純黒および紫青ネオンの禁止）
04タイポグラフィ規約：Interおよび汎用セリフの禁止と、強制代替フォントスタックの提供
05Hero仕様とシグネチャー手法「インライン画像タイポグラフィ」（単語間に画像を視覚的句読点として配置）
06アンチパターンリスト（AI特有の粗悪表現）：絵文字、Inter、純黒、ネオングロー、3列の等幅カード、架空の名前/数値、プレースホルダーテキスト
07レスポンシブおよびパフォーマンスの厳格な制約（h-screenではなく100dvh、タッチターゲット≥44px、モバイル1列表示、transform/opacityに限定したアニメーション）
08コンポーネントの挙動仕様：ボタンの触覚フィードバック、階層が必要な場合のみのカード使用、スピナーではなくスケルトンスクリーンの採用
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| api | Google Stitch（屏幕生成服务，人工在浏览器中使用） |
| package | Stitch MCP Server（可选，用于与 Cursor / Antigravity / Gemini CLI 程序化集成） |
| network | picsum.photos（禁用 Unsplash 后指定的占位图源，写入 DESIGN.md 供产物使用） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
作業ディレクトリを限定
管理者向け
操作ログを保持
判定根拠（ファイルパスと抜粋）
- 本地工作目录: ファイルの読み書きと成果物の出力：DESIGN.md —— 本スキルの最優先成果物：指示によりエージェントはユーザーのプロジェクト内にDESIGN.md仕様書ファイルを生成/書き込みます（成果物レイヤーにおける通常の挙動）。
監査ノート： 純粋な指示型スキルです。スクリプトの実行、外部ネットワーク通信、認証情報の読み込みは行いません。唯一の「書き込み」は、定義された成果物であるDESIGN.md（ユーザープロジェクト内の仕様書ファイル）の生成のみであり、これはコーディングエージェントがコードファイルを生成するのと同義で、状態や認証情報の永続化には該当しません。外部との2つの接点は、いずれもスキルが自動でトリガーするものではなく、ユーザーの手動操作が必要です（ブラウザでのlabs.google/stitchの利用、またはオプションであるStitch MCP Serverの各自インストール。このサードパーティ接続の評価はユーザーの責任となり、スキル自体は呼び出しを行いません）。なお、本スキルの成果物はGoogle Stitchクラウドサービスに入力されますが、これはユーザー自身の意図的な選択によるものです。
5二重目の独立検証
- [ok] 是否真的只产出 DESIGN.md（有无夹带代码/图片生成指令） — 全文无生成图片、无写代码的实现指令；§Motion 部分甚至显式限定为『给编码 agent 的意图说明』而非让 Stitch 动画。grep 'code' 在该文件零命中。
- [ok] Google Stitch 的说法是否有事实依托 — §Prerequisites 指向 labs.google/stitch，并要求具备 Stitch 使用权限；SKILL.md 未声称调用任何 Stitch API，也无端点/密钥，属『人工在 Stitch 里消费本规格』的定位，无夸大。
- [ok] Stitch MCP Server 是否构成供应链依赖 — 文中标注为 'Optionally'，未给安装命令或端点，skill 亦无任何调用代码；列为可选第三方接线，风险由用户自评，故未升级风险档。
- [ok] 外部依赖清单完整性 — URL/token 扫描命中仅 labs.google/stitch 与 picsum.photos（DESIGN.md 内另有 shadcn/ui 自定义要求，属框架建议非依赖）。无包管理器指令、无 npm/pip、无 curl。
- [ok] 颜色/字体禁令是否有内部矛盾 — SKILL.md 与 DESIGN.md 两份文件对 Inter 禁令、紫蓝霓虹禁令、纯黑禁令、三列等宽卡禁令、填充文案禁令表述一致（DESIGN.md 的 §Banned Colors/§Banned Fonts/§Anti-Patterns 与 SKILL.md §2/§3/§9 对应），无互相打脸。
- [ok] 元数据（license / stars / last_push / 路径 / commit） — gh api：MIT、87309 stars、pushed_at 2026-08-24T15:23:56Z；git ls-files 确认 skills/stitch-skill/{SKILL.md,DESIGN.md}；HEAD == origin/main == ccbc15639c97057cbfcf32ecebc38ef716e4bb37。
6結論
最適な用途： Google Stitchを使用してUIを生成し、複数画面で統一されたデザイン言語を維持したいチームや個人。AIに画面を生成させる前に、レビュー可能なデザイン仕様書を策定したい方。Stitchをラピッドプロトタイピングツールとして活用し、完成したデザインをCursorやAntigravityなどのエージェントに引き渡してコーディングを進めたいフロントエンドエンジニア。また、DESIGN.mdをプロジェクトのデザイントークンドキュメントとしてそのまま流用したい場合にも最適です。
不向きな用途： Stitchを使用しないワークフロー（本スキルのセマンティック表現はStitch専用に設計されているため、一般的なコーディングシナリオには同リポジトリのdesign-taste-frontendやsoft-skillなどを選択してください）。仕様書ではなく画像やコードそのものの出力を求めるタスク（本スキルは描画もコーディングも行いません）。プログラムによる機械的な美学強制が必要な環境（lintやCI手段は含まれません）。すでに独自のデザインシステムが確立されているプロジェクト（本スキルの27の禁止事項が既存のブランド規約と競合する可能性があります）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload stitch-design-taste.tar.gz
sha256:
Option B · Copy Guide for Agent58fc7a0076ba73cc…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit ccbc15639c.