stitch-design-taste

name	stitch-design-taste
description	为 Google Stitch 打造的语义化设计系统技能。生成对代理友好的 DESIGN.md 文件，强制执行高端、反通用的 UI 标准——严格字体、精校配色、非对称布局、永续微动效与硬件加速性能。

Stitch Design Taste —— 语义化设计系统技能

概览

本技能生成为 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. 定义氛围

评估目标项目的意图。用品味谱系上有画面感的形容词：

• 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 值、像素值
• 要有主见： 这不是中性模板——它强制执行一种特定的高端美学

成功要诀

1. 从氛围开始——细化 token 前先理解氛围
2. 寻找模式——识别一致的间距、尺寸与样式
3. 语义化思考——按用途而非仅按外观命名颜色
4. 考虑层级——记录视觉权重如何传达重要性
5. 编码禁令——反模式与规则本身同样重要

需避免的常见坑

• 使用技术黑话而不翻译（用「rounded-xl」而非「宽大圆角」）
• 省略十六进制码或只用描述性名称
• 忘记设计元素的功能角色
• 氛围描述太含糊
• 忽略反模式清单——正是它们让产出显得高端
• 默认做通用「安全」设计，而非强制精心策划的美学