taste-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Stitch Design Taste — Semantic Design System Skill

Stitch设计风格 — 语义化设计系统Skill

Overview

概述

This skill generates

DESIGN.md

files optimized for Google Stitch screen generation. It translates the battle-tested anti-slop frontend engineering directives into Stitch's native semantic design language — descriptive, natural-language rules paired with precise values that Stitch's AI agent can interpret to produce premium, non-generic interfaces.

The generated

DESIGN.md

serves as the single source of truth for prompting Stitch to generate new screens that align with a curated, high-agency design language. Stitch interprets design through "Visual Descriptions" supported by specific color values, typography specs, and component behaviors.

本Skill可生成适配Google Stitch页面生成能力的

DESIGN.md

文件。它将经过实战验证的高品质前端工程规范转换为Stitch原生的语义化设计语言——由描述性的自然语言规则搭配精确数值构成，Stitch的AI Agent可以解析这些内容，生成高品质、非同质化的界面。

生成的

DESIGN.md

将作为唯一可信源，用于提示Stitch生成符合精心打磨的高辨识度设计语言的新页面。Stitch通过**「视觉描述」**解析设计规则，这些描述搭配有具体的色值、排版规范和组件行为定义。

Prerequisites

前置要求

Access to Google Stitch via labs.google.com/stitch
Optionally: Stitch MCP Server for programmatic integration with Cursor, Antigravity, or Gemini CLI

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

The Goal

目标

Generate a

DESIGN.md

file that encodes:

Visual atmosphere — the mood, density, and design philosophy
Color calibration — neutrals, accents, and banned patterns with hex codes
Typographic architecture — font stacks, scale hierarchy, and anti-patterns
Component behaviors — buttons, cards, inputs with interaction states
Layout principles — grid systems, spacing philosophy, responsive strategy
Motion philosophy — animation engine specs, spring physics, perpetual micro-interactions
Anti-patterns — explicit list of banned AI design clichés

生成的

DESIGN.md

文件需要包含以下规则定义：

视觉氛围 — 设计调性、信息密度和设计理念
配色校准 — 中性色、强调色、禁用规则及对应的十六进制色值
排版体系 — 字体栈、字号层级和反模式
组件行为 — 按钮、卡片、输入框的交互状态定义
布局原则 — 网格系统、间距规则和响应式策略
动效理念 — 动画引擎规格、弹簧物理参数、持续性微交互规则
反模式 — 明确列出禁止使用的AI设计陈规

Analysis & Synthesis Instructions

分析与合成说明

1. Define the Atmosphere

1. 定义视觉氛围

Evaluate the target project's intent. Use evocative adjectives from the taste spectrum:

Density: "Art Gallery Airy" (1–3) → "Daily App Balanced" (4–7) → "Cockpit Dense" (8–10)
Variance: "Predictable Symmetric" (1–3) → "Offset Asymmetric" (4–7) → "Artsy Chaotic" (8–10)
Motion: "Static Restrained" (1–3) → "Fluid CSS" (4–7) → "Cinematic Choreography" (8–10)

Default baseline: Creativity 9, Variance 8, Motion 6, Density 5. Adapt dynamically based on user's vibe description.

评估目标项目的定位，从风格维度选择贴切的形容词：

信息密度：「艺术画廊级宽松」(1–3) →「日常应用级均衡」(4–7) →「驾驶舱级紧凑」(8–10)
风格变化度：「可预测对称型」(1–3) →「错位非对称型」(4–7) →「艺术感跳脱型」(8–10)
动效丰富度：「静态克制型」(1–3) →「流畅CSS动效型」(4–7) →「电影级编排型」(8–10)

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

2. Map the Color Palette

2. 映射配色方案

For each color provide: Descriptive Name + Hex Code + Functional Role.

Mandatory constraints:

Maximum 1 accent color. Saturation below 80%
The "AI Purple/Blue Neon" aesthetic is strictly BANNED — no purple button glows, no neon gradients
Use absolute neutral bases (Zinc/Slate) with high-contrast singular accents
Stick to one palette for the entire output — no warm/cool gray fluctuation
Never use pure black (
```
#000000
```
) — use Off-Black, Zinc-950, or Charcoal

每个颜色需要提供：描述性名称 + 十六进制色值 + 功能角色。

强制约束：

最多使用1种强调色，饱和度低于80%
严格禁用「AI紫/蓝霓虹」风格——不允许紫色按钮发光效果、霓虹渐变
使用绝对中性色基底（Zinc/Slate）搭配高对比度单一强调色
整个输出全程使用同一套配色方案——不允许出现暖灰/冷灰波动
绝对不要使用纯黑色(
```
#000000
```
)——使用Off-Black、Zinc-950或者炭黑色

3. Establish Typography Rules

3. 制定排版规则

Display/Headlines: Track-tight, controlled scale. Not screaming. Hierarchy through weight and color, not just massive size
Body: Relaxed leading, max 65 characters per line
Font Selection:
```
Inter
```
is BANNED for premium/creative contexts. Force unique character:
```
Geist
```
,
```
Outfit
```
,
```
Cabinet Grotesk
```
, or
```
Satoshi
```
Serif Ban: Generic serif fonts (
```
Times New Roman
```
,
```
Georgia
```
,
```
Garamond
```
,
```
Palatino
```
) are BANNED. If serif is needed for editorial/creative contexts, use only distinctive modern serifs:
```
Fraunces
```
,
```
Gambarino
```
,
```
Editorial New
```
, or
```
Instrument Serif
```
. Serif is always BANNED in dashboards or software UIs
Dashboard Constraint: Use Sans-Serif pairings exclusively (
```
Geist
```
+
```
Geist Mono
```
or
```
Satoshi
```
+
```
JetBrains Mono
```
)
High-Density Override: When density exceeds 7, all numbers must use Monospace

展示/标题： 字距紧凑，字号缩放可控，避免过大字号，通过字重和颜色体现层级而非仅靠超大字号
正文： 行高宽松，每行最多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. Define the Hero Section

4. 定义首屏（Hero）区块

The Hero is the first impression and must be creative, striking, and never generic:

Inline Image Typography: Embed small, contextual photos or visuals directly between words or letters in the headline. Images sit inline at type-height, rounded, acting as visual punctuation. This is the signature creative technique
No Overlapping: Text must never overlap images or other text. Every element occupies its own clean spatial zone
No Filler Text: "Scroll to explore", "Swipe down", scroll arrow icons, bouncing chevrons are BANNED. The content should pull users in naturally
Asymmetric Structure: Centered Hero layouts BANNED when variance exceeds 4
CTA Restraint: Maximum one primary CTA. No secondary "Learn more" links

首屏是用户的第一印象，必须具备创意性、视觉冲击力，绝对不能同质化：

行内图片排版： 在标题的文字或字母之间直接嵌入小型 contextual 图片或视觉元素，图片高度与行高一致，带圆角，作为视觉标点使用，这是标志性的创意手法
无重叠： 文字绝对不能覆盖图片或其他文字，每个元素都有独立的清晰空间区域
无填充文本： 禁止使用「滚动探索」、「向下滑动」、滚动箭头图标、弹跳指引箭头这类内容，内容本身应该自然吸引用户深入浏览
非对称结构： 当变化度超过4时，禁止使用居中的首屏布局
CTA克制： 最多放1个主要CTA，不要放次级「了解更多」链接

5. Describe Component Stylings

5. 描述组件样式

For each component type, describe shape, color, shadow depth, and interaction behavior:

Buttons: Tactile push feedback on active state. No neon outer glows. No custom mouse cursors
Cards: Use ONLY when elevation communicates hierarchy. Tint shadows to background hue. For high-density layouts, replace cards with border-top dividers or negative space
Inputs/Forms: Label above input, helper text optional, error text below. Standard gap spacing
Loading States: Skeletal loaders matching layout dimensions — no generic circular spinners
Empty States: Composed compositions indicating how to populate data
Error States: Clear, inline error reporting

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

按钮： 激活状态下有按压反馈效果，禁止使用霓虹外发光，禁止使用自定义鼠标光标
卡片： 仅在需要通过层级区分展示内容时使用，阴影色调与背景色保持一致。高密度布局下用顶部边框分隔符或负空间替代卡片
输入框/表单： 标签位于输入框上方，辅助文字可选，错误提示位于输入框下方，使用标准间距
加载状态： 使用与布局尺寸匹配的骨架屏加载器——不要使用通用的圆形加载动画
空状态： 使用结构化的视觉设计提示用户如何填充数据
错误状态： 清晰的行内错误提示

6. Define Layout Principles

6. 定义布局原则

No overlapping elements — every element occupies its own clear spatial zone. No absolute-positioned content stacking
Centered Hero sections are BANNED when variance exceeds 4 — force Split Screen, Left-Aligned, or Asymmetric Whitespace
The generic "3 equal cards horizontally" feature row is BANNED — use 2-column Zig-Zag, asymmetric grid, or horizontal scroll
CSS Grid over Flexbox math — never use
```
calc()
```
percentage hacks
Contain layouts using max-width constraints (e.g., 1400px centered)
Full-height sections must use
```
min-h-[100dvh]
```
— never
```
h-screen
```
(iOS Safari catastrophic jump)

禁止元素重叠——每个元素都有独立的清晰空间区域，禁止使用绝对定位堆叠内容
当变化度超过4时禁止使用居中的首屏区块——强制使用分屏、左对齐或者非对称留白布局
禁止使用通用的「3个等宽卡片横向排列」特性栏——使用双列锯齿布局、非对称网格或者横向滚动布局
优先使用CSS Grid而非Flexbox计算布局——绝对不要使用
```
calc()
```
百分比hack
使用max-width约束布局宽度（例如1400px居中）
全屏区块必须使用
```
min-h-[100dvh]
```
——绝对不要使用
```
h-screen
```
（会导致iOS Safari出现灾难性的页面跳动）

7. Define Responsive Rules

7. 定义响应式规则

Every design must work across all viewports:

Mobile-First Collapse (< 768px): All multi-column layouts collapse to single column. No exceptions
No Horizontal Scroll: Horizontal overflow on mobile is a critical failure
Typography Scaling: Headlines scale via
```
clamp()
```
. Body text minimum
```
1rem
```
/
```
14px
```
Touch Targets: All interactive elements minimum
```
44px
```
tap target
Image Behavior: Inline typography images (photos between words) stack below headline on mobile
Navigation: Desktop horizontal nav collapses to clean mobile menu
Spacing: Vertical section gaps reduce proportionally (
```
clamp(3rem, 8vw, 6rem)
```
)

所有设计必须适配所有视口尺寸：

移动端优先折叠（<768px）： 所有多列布局都折叠为单列，无例外
禁止横向滚动： 移动端出现横向溢出属于严重问题
排版缩放： 标题通过
```
clamp()
```
实现缩放，正文最小字号为
```
1rem
```
/
```
14px
```
触控目标： 所有可交互元素的点击区域最小为
```
44px
```
图片行为： 行内排版图片（文字之间的图片）在移动端会堆叠到标题下方
导航： 桌面端横向导航会折叠为简洁的移动端菜单
间距： 区块垂直间距按比例缩小（
```
clamp(3rem, 8vw, 6rem)
```
）

8. Encode Motion Philosophy

8. 制定动效理念

Spring Physics default:
```
stiffness: 100, damping: 20
```
— premium, weighty feel. No linear easing
Perpetual Micro-Interactions: Every active component should have an infinite loop state (Pulse, Typewriter, Float, Shimmer)
Staggered Orchestration: Never mount lists instantly — use cascade delays for waterfall reveals
Performance: Animate exclusively via
```
transform
```
and
```
opacity
```
. Never animate
```
top
```
,
```
left
```
,
```
width
```
,
```
height
```
. Grain/noise filters on fixed pseudo-elements only

默认弹簧物理参数：
```
stiffness: 100, damping: 20
```
——带来高品质、有重量感的动效体验，禁止使用线性缓动
持续性微交互： 所有激活状态的组件都应该有无限循环的动效（脉冲、打字机效果、浮动、微光）
错开编排： 列表不要一次性渲染，使用级联延迟实现瀑布流入场效果
性能： 仅通过
```
transform
```
和
```
opacity
```
实现动画，绝对不要对
```
top
```
、
```
left
```
、
```
width
```
、
```
height
```
属性做动画。颗粒/噪点滤镜仅可用于固定的伪元素

9. List Anti-Patterns (AI Tells)

9. 列出反模式（AI特征）

Encode these as explicit "NEVER DO" rules in the DESIGN.md:

No emojis anywhere
No
```
Inter
```
font
No generic serif fonts (
```
Times New Roman
```
,
```
Georgia
```
,
```
Garamond
```
) — distinctive modern serifs only if needed
No pure black (
```
#000000
```
)
No neon/outer glow shadows
No oversaturated accents
No excessive gradient text on large headers
No custom mouse cursors
No overlapping elements — clean spatial separation always
No 3-column equal card layouts
No generic names ("John Doe", "Acme", "Nexus")
No fake round numbers (
```
99.99%
```
,
```
50%
```
)
No fabricated data or statistics — never generate metrics, performance numbers, uptime percentages, response times, or any data that the user did not explicitly provide. "99.98% UPTIME SLA", "124ms AVG. RESPONSE", "18.5k DEPLOY CYCLES" are invented AI filler. If real data is not available, use clear placeholder labels like
```
[metric]
```
instead of making up numbers
No fake system/metric sections — "SYSTEM PERFORMANCE METRICS", "KEY STATISTICS", "BY THE NUMBERS" dashboard cards filled with invented data are BANNED
No
```
LABEL // YEAR
```
formatting — "SYSTEM // 2024", "METRICS // 2025" is a lazy AI convention, not real design typography
No AI copywriting clichés ("Elevate", "Seamless", "Unleash", "Next-Gen")
No filler UI text: "Scroll to explore", "Swipe down", scroll arrows, bouncing chevrons
No broken Unsplash links — use
```
picsum.photos
```
or SVG avatars
No centered Hero sections (for high-variance projects)

将这些规则作为明确的「禁止操作」条款写入DESIGN.md：

任何位置都不要使用emoji
不要使用
```
Inter
```
字体
不要使用通用衬线字体（
```
Times New Roman
```
、
```
Georgia
```
、
```
Garamond
```
）——仅在必要时使用有辨识度的现代衬线字体
不要使用纯黑色(
```
#000000
```
)
不要使用霓虹/外发光阴影
不要使用饱和度超标的强调色
不要在大标题上使用过多渐变文字
不要使用自定义鼠标光标
不要出现元素重叠——始终保持清晰的空间分隔
不要使用3列等宽卡片布局
不要使用通用占位名称（「John Doe」、「Acme」、「Nexus」）
不要使用虚假的整数（
```
99.99%
```
、
```
50%
```
）
不要使用虚构的数据或统计值——绝对不要生成用户没有明确提供的指标、性能数值、正常运行时间百分比、响应时间或者任何数据。「99.98% 正常运行时间SLA」、「平均响应124ms」、「18.5k次部署周期」都属于AI生成的虚假填充内容。如果没有真实数据，使用
```
[metric]
```
这类清晰的占位标签代替编造的数字
不要使用虚假的系统/指标模块——填充了虚构数据的「系统性能指标」、「核心统计数据」、「数据亮点」仪表板卡片是被禁止的
不要使用「标签 // 年份」的格式——「系统 // 2024」、「指标 // 2025」是偷懒的AI惯例，不是真实的设计排版
不要使用AI文案陈词滥调（「提升」、「无缝」、「释放」、「下一代」）
不要使用填充类UI文本：「滚动探索」、「向下滑动」、滚动箭头、弹跳指引箭头
不要使用失效的Unsplash链接——使用
```
picsum.photos
```
或者SVG头像
（高变化度项目）不要使用居中的首屏区块

Output Format (DESIGN.md Structure)

输出格式（DESIGN.md结构）

markdown

undefined

markdown

undefined

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.)

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.

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.

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.)

undefined

(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.)

undefined

Best Practices

最佳实践

Be Descriptive: "Deep Charcoal Ink (#18181B)" — not just "dark text"
Be Functional: Explain what each element is used for
Be Consistent: Same terminology throughout the document
Be Precise: Include exact hex codes, rem values, pixel values in parentheses
Be Opinionated: This is not a neutral template — it enforces a specific, premium aesthetic

描述清晰： 使用「深炭黑色(#18181B)」而非仅「深色文字」
功能明确： 说明每个元素的用途
表述一致： 整个文档使用统一的术语
数值精确： 括号内附上精确的十六进制色值、rem数值、像素数值
风格明确： 这不是中立的模板——它需要落地一套明确的高品质审美标准

Tips for Success

成功技巧

Start with the atmosphere — understand the vibe before detailing tokens
Look for patterns — identify consistent spacing, sizing, and styling
Think semantically — name colors by purpose, not just appearance
Consider hierarchy — document how visual weight communicates importance
Encode the bans — anti-patterns are as important as the rules themselves

从视觉氛围入手——在细化设计令牌之前先明确整体风格
寻找规律——确定统一的间距、尺寸和样式规则
语义化思考——按用途命名颜色而非仅按外观
考虑层级——记录视觉权重如何传达信息优先级
明确禁用规则——反模式和规则本身同等重要

Common Pitfalls to Avoid

需要避免的常见陷阱

Using technical jargon without translation ("rounded-xl" instead of "generously rounded corners")
Omitting hex codes or using only descriptive names
Forgetting functional roles of design elements
Being too vague in atmosphere descriptions
Ignoring the anti-pattern list — these are what make the output premium
Defaulting to generic "safe" designs instead of enforcing the curated aesthetic

使用未解释的技术术语（用「大圆角」代替「rounded-xl」）
遗漏十六进制色值或者仅使用描述性名称
忘记说明设计元素的功能角色
视觉氛围描述过于模糊
忽略反模式列表——这是保证输出高品质的关键
默认使用通用的「安全」设计而非落地精心打磨的审美风格