stitch-design-taste

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

概述

此技能可生成针对 Google Stitch 屏幕生成进行优化的 DESIGN.md 文件。它将经过实战验证的反平庸前端工程指导原则，转化为 Stitch 原生的语义化设计语言——以描述性自然语言规则搭配精确数值，让 Stitch 的 AI Agent 能够理解并生成优质、独具特色的界面。

生成的 DESIGN.md 是提示 Stitch 生成符合精心筛选的高主导性设计语言的新屏幕的唯一事实来源。Stitch 通过**“视觉描述”**来理解设计，并结合具体的颜色值、字体规格和组件行为进行呈现。

前提条件

• 通过 labs.google/stitch 访问 Google Stitch
• 可选：使用 Stitch MCP Server，通过 Cursor、Antigravity 或 Gemini CLI 进行程序化集成

目标

生成一个 DESIGN.md 文件，其中定义：

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

分析与综合说明

1. 定义氛围

评估目标项目的意图。使用品味谱系中的 evocative 形容词：

• 密度：“美术馆般通透”（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. 定义 Hero 区域

Hero 是给人的第一印象，必须富有创意、引人注目，绝不能流于俗套：

• 行内图片排版： 在标题的单词或字母之间直接嵌入小型、贴合语境的照片或视觉元素。图片与文字行内排列，高度与字体相当，采用圆角处理，起到视觉标点的作用。这是标志性的创意手法
• 禁止重叠： 文字绝不能与图片或其他文字重叠。每个元素都必须占据独立、整洁的空间区域
• 禁止填充性文本： “滚动以探索”、“向下滑动”、滚动箭头图标、弹跳式 V 形箭头均为禁止项。内容应自然地吸引用户
• 非对称结构： 当 variance 大于 4 时，禁止使用居中 Hero 布局
• 克制使用 CTA： 最多一个主要 CTA。不要添加次要的“了解更多”链接

5. 描述组件样式

针对每种组件类型，描述其形状、颜色、阴影深度和交互行为：

• 按钮： 激活状态下提供有触感的按压反馈。不要使用霓虹外发光。不要使用自定义鼠标光标
• 卡片： 仅在提升效果能体现层级关系时使用。阴影色调应与背景色相协调。对于高密度布局，使用顶部边框分隔线或留白代替卡片
• 输入框/表单： 标签置于输入框上方，可选添加辅助文本，错误文本置于下方。采用标准间距
• 加载状态： 骨架加载器应与布局尺寸相匹配——不要使用通用圆形加载动画
• 空状态： 通过精心编排的布局指示如何填充数据
• 错误状态： 清晰地内联显示错误信息

6. 定义布局原则

• 不要让元素重叠——每个元素都必须占据清晰、独立的空间区域。不要使用绝对定位来堆叠内容
• 当 variance 大于 4 时，禁止使用居中 Hero 区域——必须采用分屏、左对齐或非对称留白
• 禁止使用通用的“三张等宽卡片横向排列”功能展示行——改用双列之字形布局、非对称网格或横向滚动
• 优先使用 CSS Grid，而不是 Flexbox 数学计算——绝不要使用 calc() 百分比技巧
• 使用最大宽度限制布局范围（例如，居中显示的 1400px）
• 全屏高度区域必须使用 min-h-[100dvh]——绝不要使用 h-screen（会导致 iOS Safari 出现灾难性的跳动）

7. 定义响应式规则

每种设计都必须适配所有视口：

• 移动优先折叠（< 768px）： 所有多列布局都折叠为单列。没有例外
• 禁止水平滚动： 移动设备上出现水平溢出属于严重问题
• 字体缩放： 标题通过 clamp() 缩放。正文文本最小为 1rem/14px
• 触控目标： 所有交互元素的点击目标至少为 44px
• 图片行为： 行内排版图片（单词之间的照片）在移动设备上应移至标题下方
• 导航： 桌面端水平导航应折叠为简洁的移动端菜单
• 间距： 按比例缩小垂直区块间距（clamp(3rem, 8vw, 6rem)）

8. 设定动效理念

• 默认使用弹簧物理效果： stiffness: 100, damping: 20——营造高级、厚重的质感。不要使用线性缓动
• 持续的微交互： 每个活跃组件都应具有无限循环状态（脉冲、打字机、浮动、闪烁）
• 错开编排： 列表绝不能瞬间挂载——使用级联延迟实现瀑布式呈现
• 性能： 仅通过 transform 和 opacity 制作动画。绝不要为 top、left、width、height 添加动画。颗粒/噪点滤镜仅用于固定的伪元素

9. 列出反模式（AI 痕迹）

将以下内容明确写入 DESIGN.md，作为「绝对禁止」规则：

• 任何地方都不要使用表情符号
• 不要使用 Inter 字体
• 不要使用通用衬线字体（Times New Roman、Georgia、Garamond）——仅在需要时使用有鲜明特色的现代衬线字体
• 不要使用纯黑色（#000000）
• 不要使用霓虹色／外发光阴影
• 不要使用过度饱和的强调色
• 不要在大型标题中大量使用渐变文字
• 不要使用自定义鼠标光标
• 不要让元素相互重叠——始终保持清晰的空间间隔
• 不要采用三列等宽卡片布局
• 不要使用通用名称（「John Doe」、「Acme」、「Nexus」）
• 不要使用虚假的整齐数字（99.99%、50%）
• 不要使用 AI 文案陈词滥调（「Elevate」、「Seamless」、「Unleash」、「Next-Gen」）
• 不要使用填充式 UI 文案：「Scroll to explore」、「Swipe down」、滚动箭头、弹跳的 V 形箭头
• 不要使用失效的 Unsplash 链接——请使用 picsum.photos 或 SVG 头像
• 不要使用居中式 Hero 区块（适用于差异较大的项目）

输出格式（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.
* **Empty States:** Composed, illustrated compositions — not just "No data" text.

## 5. Layout Principles
(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.)

## 6. Motion & Interaction
(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.)

## 7. Anti-Patterns (Banned)
(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.)

最佳实践

• 描述具体：「深炭墨色（#18181B）」，而不只是「深色文字」
• **注重功能：**说明每个元素的用途
• **保持一致：**在整份文档中使用相同术语
• **务必精确：**注明确切的十六进制代码、rem 值、像素值，并将其放在括号中
• **明确立场：**这不是中立模板，而是用来贯彻特定高端美学的规范

成功技巧

1. 先确定氛围——了解整体感觉，再详细说明设计令牌
2. 寻找规律——识别一致的间距、尺寸和样式
3. 考虑语义——按用途而非外观命名颜色
4. 考虑层级——说明视觉权重如何传达重要性
5. 明确列出禁用项——反模式与规则本身同样重要

常见误区

• 使用未经解释的技术术语（例如用「圆角宽大」代替「rounded-xl」）
• 遗漏十六进制代码，或只使用描述性名称
• 忘记说明设计元素的功能用途
• 对氛围的描述过于含糊
• 忽视反模式列表——这些正是让输出显得高端的关键
• 默认采用通用的「稳妥」设计，而不是贯彻精心策划的美学