taste-design

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

概述

此技能可生成针对 Google Stitch 屏幕生成优化的 DESIGN.md 文件。它将久经考验的反套路前端工程指令转化为 Stitch 原生的语义设计语言——以描述性自然语言规则搭配精确数值，让 Stitch 的 AI Agent 能够理解并生成优质、不落俗套的界面。

生成的 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）

默认基准值：创意度 9、变化度 8、动效 6、密度 5。根据用户对风格的描述动态调整。

2. 映射调色板

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

强制约束：

• 最多使用 1 种强调色。饱和度低于 80%
• 严禁采用“AI 紫/蓝霓虹”风格——禁止紫色按钮光晕和霓虹渐变
• 使用绝对中性色作为基底（Zinc/Slate），并搭配高对比度的单一强调色
• 整份输出坚持使用同一套调色板——灰色不得在暖色调和冷色调之间摇摆
• 禁止使用纯黑色（#000000）——请使用近黑色、Zinc-950 或炭黑色

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%）
• 不要编造数据或统计信息——绝不要生成用户未明确提供的指标、性能数据、运行时间百分比、响应时间或任何数据。“99.98% UPTIME SLA”、“124ms AVG. RESPONSE”、“18.5k DEPLOY CYCLES” 都是 AI 凑出来的内容。如果没有真实数据，请使用 [metric] 这样的清晰占位标签，而不是编造数字
• 不要创建虚假的系统／指标版块——填入编造数据的“SYSTEM PERFORMANCE METRICS”、“KEY STATISTICS”、“BY THE NUMBERS”仪表板卡片一律禁止
• 不要使用 LABEL // YEAR 格式——“SYSTEM // 2024”、“METRICS // 2025”是懒惰的 AI 惯用格式，不是真正的设计排版
• 不要使用 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”）
• 遗漏十六进制代码，或只使用描述性名称
• 忘记说明设计元素的功能性作用
• 氛围描述过于含糊
• 忽略反模式列表——这些禁用项正是让输出显得高端的关键
• 默认采用通用的“安全”设计，而不是贯彻精心策划的美学