1实现原理 · 为什么它能做到

产出物是一份 DESIGN.md 规格文件，而不是代码或图片：把同仓库其余 skill 的『反 slop』前端规则翻译成 Google Stitch 能读的语义化设计语言，作为后续生成屏幕的唯一事实源。

skills/stitch-skill/SKILL.md

This skill generates `DESIGN.md` files optimized for Google Stitch screen generation.

这里在做什么：Stitch 的输入端接受自然语言『视觉描述』而非代码 tokens，所以同一套审美纪律必须换一种表达载体（描述性名称 + 精确数值）才能生效。

定位是『单一事实源』：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.

这是与『每屏一句提示词』式用法的主要差别：把一致性从提示词习惯提升为一份可复用、可 review 的文档资产。

规格被拆成固定 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 给出同样七节的可抄写骨架。

用『设定盘』+ 场景化形容词把抽象审美转成可调参数：密度/变异/动效各分三档，并有默认基线 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 三盘一脉相承，只是换成 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`

配对给出替代项是这套 skill 能落地的前提——只禁不给会让模型回退到更差的默认值。

色彩被要求带 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 上动画，交给后续 coding agent 实现。

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』，把动效段落定位为给 Antigravity/Cursor 等编码 agent 的施工说明。

自带一份可参考的成品样例：DESIGN.md 排在同目录，是 §Output Format 骨架的实例化版本（含可手改的 Creativity/Density/Variance/Motion 四盘表）。

skills/stitch-skill/DESIGN.md

> **How to use:** Change the numbers above to match your project's vibe.

这份 DESIGN.md 同时是资产与示例：用户可以直接复制它、只改四个数字与强调色，无需从零生成。

2核心能力

01生成结构化的 DESIGN.md 设计系统规格（7 个固定成分）

02Stitch 语义化表达：描述性名称 + hex/rem/px 精确值配对

03色彩校准与强调色收敛（最多 1 个强调色、饱和度 < 80%、禁纯黑/紫蓝霓虹）

04排版纪律：禁 Inter 与通用衬线，给强制替代字体栈

05Hero 规范与『行内图排版』签名手法（字词之间嵌图作视觉标点）

06反模式清单（AI tells）：emoji、Inter、纯黑、霓虹辉光、三列等宽卡、假名字假数字、填充文案

07响应式与性能硬约束（100dvh 而非 h-screen、触控目标 ≥44px、手机端单列、仅 transform/opacity 动画）

08组件行为规格：按钮触感反馈、卡片仅在需要层级时使用、骨架加载而非转圈 spinner

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 —— skill 的第一等产出物：指令要求 agent 在用户项目内生成/写入一份 DESIGN.md 规格文件（属交付物层面的正

审计说明： 。纯指令型 skill：无脚本执行、无网络外发、无凭证读取。唯一『写入』是它所定义的交付物 DESIGN.md（用户项目内的规格文件），性质等同 coding agent 生成代码文件，不构成状态/凭据层面的落盘。两个对外接触点均需用户人工介入而非 skill 自动发起：浏览器里使用 labs.google/stitch，或自行安装可选的 Stitch MCP Server（该第三方接线由用户负责评估，skill 不调用它）。可注意本 skill 产出会流入 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结论

把审美纪律沉淀为可复用文档：一次写成 DESIGN.md，多屏生成都受约束，一致性从『提示词习惯』升级为『可 review 的资产』。

禁令与替代项成对，模型不会因被禁而回退到更差默认值（禁 Inter → 给 Geist/Outfit/Cabinet Grotesk/Satoshi）。

自带可直接抄的成品骨架（DESIGN.md），含可手改的四个档位与带 hex 的调色板，落地成本极低。

规则覆盖完整且带实现细节：色彩含饱和度上限、字体含 Banned 清单、布局含 100dvh 与 44px 触控、动效含 spring 参数与硬件加速约束。

边界诚实：明说 Stitch 只出静态屏幕，动效段落是给编码 agent 的施工说明，不虚假承诺。

适合： 用 Google Stitch 做界面生成、希望多屏保持同一套设计语言的团队与个人；想先立一份可 review 的设计规范再让 AI 出屏的人；把 Stitch 当快速原型工具、需要把成品交接给 Cursor/Antigravity 继续编码的前端。也适合直接抄 DESIGN.md 当项目的设计 token 文档。

不适合： 不用 Stitch 的工作流（本 skill 的语义表达是为 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: 58fc7a0076ba73cc…

Option B · Copy Guide for Agent

install.json

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit ccbc15639c.