---

name: stitch-design-taste description: "用于为高端排版、色彩、布局、动效意图和反通用UI规则生成Google Stitch DESIGN.md系统。" category: frontend risk: safe source: community source_repo: Leonxlnx/taste-skill source_type: community date_added: "2026-04-17" author: Leonxlnx tags: [stitch, design-system, frontend, ui] tools: [claude, cursor, codex, antigravity]

Stitch设计品味 — 语义化设计系统技能

何时使用

• 当用户想要一个兼容Google Stitch的DESIGN.md或语义化设计系统用于AI界面生成时使用。
• 当将高端前端品味规则转化为Stitch友好的视觉描述、色彩角色、排版规格和组件行为时使用。
• 当设计系统必须在生成界面之前防止通用AI UI模式时使用。

限制

• 此技能为Stitch生成语义化设计系统指南；不保证Stitch会精确渲染每个约束。
• 生成的 DESIGN.md 文件仍需根据实际产品简报、品牌约束、无障碍需求和界面内容进行审查。
• 动效部分记录的是后续编码代理的实现意图，因为Stitch本身可能生成静态界面。

概述

此技能生成针对Google Stitch界面生成优化的 DESIGN.md 文件。它将经过实战验证的反平庸前端工程指令转化为Stitch的原生语义设计语言 — 描述性的自然语言规则配合精确值，Stitch的AI代理可以解释这些规则来生成高端、非通用的界面。

生成的 DESIGN.md 作为唯一真实来源，用于提示Stitch生成与精心策划的高自主设计语言一致的新界面。Stitch通过**"视觉描述"**来解释设计，辅以特定的色彩值、排版规格和组件行为。

前提条件

• 通过 labs.google.com/stitch 访问Google Stitch
• 可选：Stitch MCP Server用于与Cursor、Antigravity或Gemini CLI的程序化集成

目标

生成一个编码以下内容的 DESIGN.md 文件：

1. 视觉氛围 — 情绪、密度和设计哲学
2. 色彩校准 — 中性色、强调色和禁止模式（含十六进制代码）
3. 排版架构 — 字体栈、层级比例和反模式
4. 组件行为 — 按钮、卡片、输入框及交互状态
5. 布局原则 — 网格系统、间距哲学、响应式策略
6. 动效哲学 — 动画引擎规格、弹簧物理、持续微交互
7. 反模式 — 明确列出禁止的AI设计陈词滥调

分析与综合指南

1. 定义氛围

评估目标项目的意图。使用品味光谱中的描述性形容词：

• 密度： "艺术画廊般通透" (1–3) → "日常应用平衡" (4–7) → "驾驶舱般密集" (8–10)
• 变化度： "可预测对称" (1–3) → "偏移不对称" (4–7) → "艺术性混乱" (8–10)
• 动效： "静态克制" (1–3) → "流畅CSS" (4–7) → "电影级编排" (8–10)

默认基线：变化度8，动效6，密度4。根据用户的氛围描述动态调整。

2. 映射色彩调色板

为每种颜色提供：描述性名称 + 十六进制代码 + 功能角色。

强制约束：

• 最多1个强调色。饱和度低于80%
• "AI紫色/蓝色霓虹"美学严格禁止 — 无紫色按钮发光、无霓虹渐变
• 使用绝对中性基底（Zinc/Slate）配合高对比度单一强调色
• 整个输出坚持一个调色板 — 不允许暖/冷灰色波动
• 永远不使用纯黑（#000000）— 使用Off-Black、Zinc-950或Charcoal

3. 建立排版规则

• 展示/标题： 紧凑字距，受控比例。不要喊叫。通过字重和颜色建立层级，而非仅靠巨大尺寸
• 正文： 宽松行高，每行最多65个字符
• 字体选择： Inter 在高端/创意场景中禁止使用。强制独特个性：Geist、Outfit、Cabinet Grotesk 或 Satoshi
• 衬线字体禁令： 通用衬线字体（Times New Roman、Georgia、Garamond、Palatino）禁止使用。如果编辑/创意场景需要衬线，仅使用独特的现代衬线：Fraunces、Gambarino、Editorial New 或 Instrument Serif。衬线在仪表板或软件UI中始终禁止
• 仪表板约束： 专用无衬线配对（Geist + Geist Mono 或 Satoshi + JetBrains Mono）
• 高密度覆盖： 当密度超过7时，所有数字必须使用等宽字体

4. 定义主视觉区域

主视觉区域是第一印象，必须创意、醒目且绝不通用：

• 内联图片排版： 在标题的文字或字母之间直接嵌入小型、上下文相关的照片或视觉元素。图片以字体高度内联放置，圆角处理，作为视觉标点