| name | stitch-design-taste |
| description | 为 Google Stitch 打造的语义化设计系统技能。生成对代理友好的 DESIGN.md 文件，强制执行高端、反通用的 UI 标准——严格字体、精校配色、非对称布局、永续微动效与硬件加速性能。 |
Stitch Design Taste —— 语义化设计系统技能
概览
本技能生成为 Google Stitch 屏幕生成优化的 DESIGN.md 文件。它把久经实战的反垃圾前端工程指令翻译成 Stitch 的原生语义设计语言——描述性的自然语言规则，搭配 Stitch 的 AI 代理能解读的精确数值，以产出高端、非通用的界面。
生成的 DESIGN.md 充当单一事实来源，用于提示 Stitch 生成与精心策划的高能动性设计语言相符的新屏幕。Stitch 通过**「视觉描述」**结合具体颜色值、字体规格与组件行为来解读设计。
前置条件
目标
生成一个编码了以下内容的 DESIGN.md 文件：
- 视觉氛围 —— 情绪、密度与设计哲学
- 颜色校准 —— 中性色、强调色，以及带十六进制码的禁用模式
- 字体架构 —— 字体栈、尺度层级与反模式
- 组件行为 —— 按钮、卡片、输入框及其交互状态
- 布局原则 —— 栅格系统、间距哲学、响应式策略
- 动效哲学 —— 动画引擎规格、弹簧物理、永续微交互
- 反模式 —— 明确列出被禁用的 AI 设计陈词滥调
分析与综合指令
1. 定义氛围
评估目标项目的意图。用品味谱系上有画面感的形容词：
- Density： 「艺术画廊般空灵」（1–3）→「日常应用平衡」（4–7）→「座舱般密集」（8–10）
- Variance： 「可预测对称」（1–3）→「偏移非对称」（4–7）→「艺术性混乱」（8–10）
- Motion： 「静态克制」（1–3）→「流畅 CSS」（4–7）→「电影级编排」（8–10）
默认基线：Variance 8、Motion 6、Density 4。根据用户的氛围描述动态调整。
2. 映射配色
每种颜色提供：描述性名称 + 十六进制码 + 功能角色。
强制约束：
- 最多 1 种强调色。饱和度低于 80%
- 「AI 紫/蓝霓虹」美学严格禁用——无紫色按钮发光，无霓虹渐变
- 用绝对中性底色（Zinc/Slate）配高对比的单一强调色
- 整个产出坚持一套配色——无暖/冷灰波动
- 绝不用纯黑（
#000000）——用近黑、Zinc-950 或 Charcoal
3. 确立字体规则
- Display/标题： 紧字距、受控尺度。不喧哗。层级靠字重与颜色，而非仅靠巨大尺寸
- Body： 宽松行距，每行最多 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. 定义 Hero 分区
Hero 是第一印象，必须有创意、醒目、绝不通用：
- 内嵌图片字体： 把小的、贴合语境的照片或视觉直接嵌进标题的词或字母之间。图片以字高内嵌、圆角，作为视觉标点。这是招牌创意技法
- 无重叠： 文字绝不与图片或其他文字重叠。每个元素占据自己干净的空间区
- 无填充文字： 「Scroll to explore」「Swipe down」、滚动箭头图标、弹跳雪佛龙为禁用。内容应自然吸引用户
- 非对称结构： 当 variance 超过 4 时居中 Hero 布局禁用
- CTA 克制： 最多一个主 CTA。无次要「Learn more」链接
5. 描述组件样式
对每种组件类型，描述形状、颜色、阴影深度与交互行为：
- Buttons： 激活态触觉按压反馈。无霓虹外发光。无自定义鼠标光标
- Cards： 仅当抬升能传达层级时使用。给阴影着背景色相。高密度布局用 border-top 分隔线或负空间替代卡片
- Inputs/Forms： 标签在输入框上方，帮助文字可选，错误文字在下方。标准间隙间距
- Loading States： 骨架加载器匹配布局尺寸——无通用圆形转圈
- Empty States： 有构图的组合，指示如何填充数据
- Error States： 清晰、行内的错误报告
6. 定义布局原则
- 无重叠元素——每个元素占据自己清晰的空间区。无绝对定位内容堆叠
- 当 variance 超过 4 时居中 Hero 分区禁用——强制用分屏、左对齐或非对称留白
- 通用的「水平 3 张等分卡片」特性行禁用——用 2 列 Z 字形、非对称栅格或横向滚动
- CSS Grid 优于 Flexbox 计算——绝不用
calc() 百分比 hack
- 用 max-width 约束容纳布局（如 1400px 居中）
- 全高分区必须用
min-h-[100dvh]——绝不用 h-screen（iOS Safari 灾难性跳动）
7. 定义响应式规则
每个设计必须跨所有视口工作：
- 移动优先塌缩（< 768px）： 所有多列布局塌缩为单列。无例外
- 无横向滚动： 移动端横向溢出是关键失败
- 字体缩放： 标题通过
clamp() 缩放。正文最低 1rem/14px
- 触控目标： 所有交互元素最小
44px 点击目标
- 图片行为： 内嵌字体图片（词间照片）在移动端堆叠到标题下方
- 导航： 桌面水平导航塌缩为干净的移动菜单
- 间距： 纵向分区间隙按比例缩小（
clamp(3rem, 8vw, 6rem)）
8. 编码动效哲学
- 弹簧物理默认：
stiffness: 100, damping: 20——高端、有重量的感觉。无线性缓动
- 永续微交互： 每个活跃组件都应有无限循环态（Pulse、Typewriter、Float、Shimmer）
- 交错编排： 绝不瞬间挂载列表——用级联延迟做瀑布式显现
- 性能： 只通过
transform 与 opacity 做动画。绝不动画 top、left、width、height。颗粒/噪点滤镜只用于固定伪元素
9. 列出反模式（AI 破绽）
在 DESIGN.md 中把这些编码为明确的「绝不做」规则：
- 处处无 emoji
- 无
Inter 字体
- 无通用衬线字体（
Times New Roman、Georgia、Garamond）——如需只用有辨识度的现代衬线
- 无纯黑（
#000000）
- 无霓虹/外发光阴影
- 无过饱和强调色
- 大标题上无过度渐变文字
- 无自定义鼠标光标
- 无重叠元素——始终干净空间分离
- 无 3 列等分卡片布局
- 无通用名字（「John Doe」「Acme」「Nexus」）
- 无假整数（
99.99%、50%）
- 无 AI 文案陈词滥调（「Elevate」「Seamless」「Unleash」「Next-Gen」）
- 无填充 UI 文字：「Scroll to explore」「Swipe down」、滚动箭头、弹跳雪佛龙
- 无失效 Unsplash 链接——用
picsum.photos 或 SVG 头像
- 无居中 Hero 分区（对高 variance 项目）
输出格式（DESIGN.md 结构）
# Design System: [Project Title]
## 1. Visual Theme & Atmosphere
(Evocative description of the mood, density, variance, and motion intensity.
Example: "A restrained, gallery-airy interface with confident asymmetric layouts
and fluid spring-physics motion. The atmosphere is clinical yet warm — like a
well-lit architecture studio.")
## 2. Color Palette & Roles
- **Canvas White** (#F9FAFB) — Primary background surface
- **Pure Surface** (#FFFFFF) — Card and container fill
- **Charcoal Ink** (#18181B) — Primary text, Zinc-950 depth
- **Muted Steel** (#71717A) — Secondary text, descriptions, metadata
- **Whisper Border** (rgba(226,232,240,0.5)) — Card borders, 1px structural lines
- **[Accent Name]** (#XXXXXX) — Single accent for CTAs, active states, focus rings
(Max 1 accent. Saturation < 80%. No purple/neon.)
## 3. Typography Rules
- **Display:** [Font Name] — Track-tight, controlled scale, weight-driven hierarchy
- **Body:** [Font Name] — Relaxed leading, 65ch max-width, neutral secondary color
- **Mono:** [Font Name] — For code, metadata, timestamps, high-density numbers
- **Banned:** Inter, generic system fonts for premium contexts. Serif fonts banned in dashboards.
## 4. Component Stylings
* **Buttons:** Flat, no outer glow. Tactile -1px translate on active. Accent fill for primary, ghost/outline for secondary.
* **Cards:** Generously rounded corners (2.5rem). Diffused whisper shadow. Used only when elevation serves hierarchy. High-density: replace with border-top dividers.
* **Inputs:** Label above, error below. Focus ring in accent color. No floating labels.
* **Loaders:** Skeletal shimmer matching exact layout dimensions. No circular spinners.
Composed, illustrated compositions — not just "No data" text.
(Grid-first responsive architecture. Asymmetric splits for Hero sections.
Strict single-column collapse below 768px. Max-width containment.
No flexbox percentage math. Generous internal padding.)
(Spring physics for all interactive elements. Staggered cascade reveals.
Perpetual micro-loops on active dashboard components. Hardware-accelerated
transforms only. Isolated Client Components for CPU-heavy animations.)
(Explicit list of forbidden patterns: no emojis, no Inter, no pure black,
no neon glows, no 3-column equal grids, no AI copywriting clichés,
no generic placeholder names, no broken image links.)
最佳实践
- 要有描述性： 「Deep Charcoal Ink (#18181B)」——而非只是「深色文字」
- 要功能化： 说明每个元素用于什么
- 要一致： 全文用相同术语
- 要精确： 括号里含确切的十六进制码、rem 值、像素值
- 要有主见： 这不是中性模板——它强制执行一种特定的高端美学
成功要诀
- 从氛围开始——细化 token 前先理解氛围
- 寻找模式——识别一致的间距、尺寸与样式
- 语义化思考——按用途而非仅按外观命名颜色
- 考虑层级——记录视觉权重如何传达重要性
- 编码禁令——反模式与规则本身同样重要
需避免的常见坑
- 使用技术黑话而不翻译（用「rounded-xl」而非「宽大圆角」）
- 省略十六进制码或只用描述性名称
- 忘记设计元素的功能角色
- 氛围描述太含糊
- 忽略反模式清单——正是它们让产出显得高端
- 默认做通用「安全」设计，而非强制精心策划的美学
