findscripter Stitch 设计品味：排版色彩布局动效系统生成
何时使用
- 用户想要一份兼容 Google Stitch 的
DESIGN.md或语义化设计系统，用来驱动 AI 生成屏幕。 - 需要把「高端前端品味规则」翻译成 Stitch 能理解的视觉描述：色彩角色、字体规格、组件行为，自然语言描述配精确数值。
- 设计系统必须在生成屏幕之前就堵死通用 AI UI 套路（AI-slop）。
不该用的边界：
- 本技能产出的是面向 Stitch 的语义设计指南，不保证 Stitch 会逐条像素级还原每个约束。
- 生成的
DESIGN.md仍需对照真实产品简报、品牌约束、无障碍需求与屏幕内容复核，不能直接当成品。 - 动效小节是写给后续编码 Agent 的「实现意图」——Stitch 本身可能只产出静态屏幕，别期待它跑动画。
- 不负责直接写最终前端代码；要落地代码请转交对应前端/设计系统技能。
步骤
- 定氛围（Atmosphere）：用品味坐标三维度打分，缺省基线 = Variance 8 / Motion 6 / Density 4，按用户 vibe 动态调整：
- 密度 Density：画廊通透(1–3) → 日常均衡(4–7) → 座舱密集(8–10)
- 变化 Variance：可预测对称(1–3) → 偏移非对称(4–7) → 艺术混沌(8–10)
- 动效 Motion：克制静态(1–3) → 流体 CSS(4–7) → 电影编排(8–10)
- 映射色板：每色给「描述名 + Hex + 功能角色」三件套（见指令）。
- 立字体规则：标题/正文/等宽分别选字，套用禁用清单。
- 设计 Hero：行内图像排版为签名技法；Variance>4 时禁居中。
- 描述组件：按钮/卡片/输入/加载/空态/错误态逐一定形状、色、阴影、交互。
- 定布局与响应式：Grid 优先、
min-h-[100dvh]、<768px 强制单列。 - 编码动效意图：弹簧物理参数、永续微交互、错峰入场、只动 transform/opacity。
- 显式列反模式：把所有「NEVER DO」写进
DESIGN.md。
指令
色彩硬约束：
- 最多 1 个强调色，饱和度 < 80%。
- 严禁「AI 紫/蓝霓虹」：无紫色按钮辉光、无霓虹渐变。
- 用绝对中性基底（Zinc/Slate）配单一高对比强调色；全局一套灰，不冷暖灰乱跳。
- 绝不用纯黑
#000000，改用 Off-Black / Zinc-950 / Charcoal。
字体规则：
- 标题：紧字距、克制字号，靠字重和颜色建层级，而非单纯堆大字号。
- 正文：宽松行高，每行 ≤ 65 字符。
Inter在高端/创意语境被禁，强制用有性格的字：Geist、Outfit、Cabinet Grotesk、Satoshi。- 通用衬线被禁（
Times New Roman/Georgia/Garamond/Palatino）；editorial 需要衬线时只用Fraunces/Gambarino/Editorial New/Instrument Serif；仪表盘/软件 UI 一律禁衬线。 - 仪表盘只用无衬线配对（
Geist+Geist Mono或Satoshi+JetBrains Mono）。 - 高密度覆盖：Density > 7 时，所有数字必须用等宽。
Hero 区（第一印象，禁通用）：
- 行内图像排版（签名技法）：把小幅语境图嵌进标题文字/字母之间，图与字同高、圆角，当视觉标点。
- 文字绝不与图像/其他文字重叠，每个元素独占干净空间分区。
- 禁填充文案：「Scroll to explore」「Swipe down」、滚动箭头、弹跳 chevron 一律删。
- Variance > 4 时禁居中 Hero，改 Split Screen / 左对齐 / 非对称留白。
- 最多 1 个主 CTA，不要「Learn more」次级链接。
组件规范：
- 按钮：active 时给触觉下压反馈（如 -1px 位移）；无外发光；无自定义鼠标光标。
- 卡片：仅当用「抬升」表达层级时才用；阴影染背景色调；高密度布局改用
border-top分隔线或负空间替代卡片。 - 输入/表单：label 在上、helper 可选、error 在下，标准间距。
- 加载态：与布局尺寸匹配的骨架屏，不用通用圆形 spinner。
- 空态：有构图的引导式占位，不是干巴巴「No data」。
- 错误态：清晰的行内报错。
布局原则：
- 无重叠，每元素独占空间；不要 absolute 堆叠。
calc()百分比 hack 禁用，CSS Grid 优先于 Flexbox 数学。- 用
max-width收口（如 1400px 居中）。 - 全高区块必须
min-h-[100dvh]，绝不用h-screen（iOS Safari 灾难性跳动）。 - 通用「3 等宽横排卡片」禁用，改 2 列 Zig-Zag / 非对称网格 / 横向滚动。
响应式：
- <768px 所有多列塌成单列，无例外；移动端横向溢出 = 严重缺陷。
- 标题用
clamp()缩放；正文最小1rem/14px；触控目标 ≥44px。 - 行内排版图在移动端堆到标题下方；区块纵向间距按比例缩
clamp(3rem, 8vw, 6rem)。
动效哲学：
- 弹簧物理缺省
stiffness: 100, damping: 20（高级、有重量感），不用线性缓动。 - 永续微交互：每个活跃组件都有无限循环态（Pulse/Typewriter/Float/Shimmer）。
- 错峰编排：列表绝不瞬时挂载，用级联延迟做瀑布揭示。
- 性能：只动
transform和opacity，绝不动top/left/width/height；颗粒/噪点滤镜只放固定伪元素。
反模式（写进 DESIGN.md 的 NEVER DO）：无 emoji、无 Inter、无通用衬线、无纯黑、无霓虹外发光、无过饱和强调色、无大标题渐变文字、无自定义鼠标光标、无重叠、无 3 等宽卡片、无「John Doe/Acme/Nexus」假名、无 99.99%/50% 假整数、无 AI 文案套话（Elevate/Seamless/Unleash/Next-Gen）、无填充 UI 文案、无失效 Unsplash 链接（改 picsum.photos 或 SVG 头像）、高 Variance 项目无居中 Hero。
示例
DESIGN.md 输出骨架（七段，落地时填实数值）：
# Design System: [项目名]
## 1. Visual Theme & Atmosphere
（描述 mood / density / variance / motion 强度。
例：克制的画廊通透界面，自信的非对称布局 + 流体弹簧动效；
气质清冷而温暖，像一间光线充足的建筑工作室。）
## 2. Color Palette & Roles
- **Canvas White** (#F9FAFB) — 主背景
- **Pure Surface** (#FFFFFF) — 卡片/容器填充
- **Charcoal Ink** (#18181B) — 主文字，Zinc-950 深度
- **Muted Steel** (#71717A) — 次要文字/元信息
- **Whisper Border** (rgba(226,232,240,0.5)) — 1px 结构线
- **[Accent]** (#XXXXXX) — 唯一强调色，CTA/激活/焦点环
（最多 1 强调色，饱和 < 80%，禁紫/霓虹。）
## 3. Typography Rules
- **Display:** [字体] — 紧字距、克制字号、字重驱动层级
- **Body:** [字体] — 宽松行高、65ch 最大宽、中性次色
- **Mono:** [字体] — 代码/元信息/时间戳/高密度数字
- **Banned:** Inter、高端语境的通用系统字、仪表盘衬线
## 4. Component Stylings
* **Buttons:** 扁平无外发光，active -1px 位移；主按钮强调填充，次级 ghost/outline。
* **Cards:** 大圆角(2.5rem)，弥散 whisper 阴影，仅服务层级时用；高密度改 border-top 分隔。
* **Inputs:** label 在上、error 在下，焦点环用强调色；无浮动 label。
* **Loaders:** 匹配布局尺寸的骨架 shimmer，无圆形 spinner。
* **Empty States:** 有构图的引导式占位，非「No data」。
## 5. Layout Principles
（Grid 优先响应式；Hero 非对称分栏；<768px 强制单列；
max-width 收口；不用 flexbox 百分比数学；内边距充裕。）
## 6. Motion & Interaction
（全交互弹簧物理；级联错峰揭示；活跃仪表盘组件永续微循环；
仅硬件加速 transform；CPU 重动画隔离进 Client Component。）
## 7. Anti-Patterns (Banned)
（显式禁列：无 emoji、无 Inter、无纯黑、无霓虹辉光、
无 3 等宽网格、无 AI 文案套话、无假占位名、无失效图链。）
前置：访问 labs.google.com/stitch；可选用 Stitch MCP Server 接 Cursor/Antigravity/Gemini CLI 做编程式集成。
注意事项
- 描述要具体：写「Deep Charcoal Ink (#18181B)」，别只写「深色文字」；每个 token 都给 Hex/rem/px 精确值，并说明功能角色。
- 术语翻译：用「generously rounded corners」这类语义描述，别甩
rounded-xl之类工具类 jargon 给 Stitch。 - 全局一致：同一术语贯穿全文，命名按用途（功能）而非外观。
- 要有立场：这不是中性模板，它强制一套特定高端审美——反模式清单和正向规则同等重要，删掉它就退回「安全的通用设计」。
- DESIGN.md 是 prompt Stitch 的唯一真相源，但生成后仍须对照真实简报、品牌、无障碍复核。
互见
- related：
high-end-visual-design、minimalist-editorial-ui、industrial-brutalist-ui、glassmorphism-ui-design（同源品味体系的不同风格分支，选型时对照取舍）。 - combines_with：
ui-design-system-builder（把 DESIGN.md 沉淀为可复用设计系统）、theme-factory（生成主题 token）、design-spells-microinteractions（落地动效意图）。
采编自 sickn33/antigravity-awesome-skills（原作者 Leonxlnx，taste-skill），MIT 许可。