stitch-design-taste

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 通过 “Visual Descriptions” 理解设计，并结合具体的颜色值、字体排印规范和组件行为进行呈现。

Prerequisites

前置条件

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

通过 labs.google/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: Variance 8, Motion 6, Density 4. 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）

默认基线：变化度 8、动效 6、密度 4。根据用户对风格氛围的描述进行动态调整。

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 或 Charcoal

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

Display/标题： 字距收紧、尺度受控。不要喧宾夺主。层级应主要通过字重和颜色来体现，而不只是依赖超大字号
正文： 行距宽松，每行最多 65 个字符
字体选择： 在高端或创意场景中禁用
```
Inter
```
。必须塑造独特个性：
```
Geist
```
、
```
Outfit
```
、
```
Cabinet Grotesk
```
或
```
Satoshi
```
衬线体禁用： 通用衬线字体（
```
Times New Roman
```
、
```
Georgia
```
、
```
Garamond
```
、
```
Palatino
```
）一律禁用。如果编辑或创意场景需要衬线体，仅使用 distinctive modern serifs：
```
Fraunces
```
、
```
Gambarino
```
、
```
Editorial New
```
或
```
Instrument Serif
```
。Dashboard 和软件 UI 中始终禁用衬线体
Dashboard 约束： 只能使用 Sans-Serif 字体组合（
```
Geist
```
+
```
Geist Mono
```
或
```
Satoshi
```
+
```
JetBrains Mono
```
）
高密度覆盖规则： 当密度超过 7 时，所有数字都必须使用 Monospace

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

Hero 是第一印象，必须富有创意、醒目且绝不流于通用：

内嵌图片排版： 在标题的词语或字母之间直接嵌入小型、与语境相关的照片或视觉元素。图片与文字等高并采用圆角，充当视觉标点。这是该设计风格的标志性创意手法
禁止重叠： 文本绝不得与图片或其他文本重叠。每个元素都应占据独立、整洁的空间区域
禁止填充文案：“向下滚动探索”“向下滑动”、滚动箭头图标、弹跳式人字形图标均被禁用。内容应自然地吸引用户
非对称结构： 当变化度超过 4 时，禁止使用居中的 Hero 布局
CTA 克制： 最多设置一个主要 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 时，禁止使用居中的 Hero 区域——应强制采用分屏、左对齐或非对称留白
禁止通用的“横向排列 3 张等宽卡片”功能行——应改用双栏 Zig-Zag、非对称网格或横向滚动
优先使用 CSS Grid，避免 Flexbox 数学计算——绝不使用
```
calc()
```
百分比技巧
使用最大宽度约束来收拢布局（例如居中的 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
```
——营造高端且沉稳的质感。不得使用线性缓动
持续微交互： 每个活跃组件都应具有无限循环状态（Pulse、Typewriter、Float、Shimmer）
错落编排： 列表绝不能瞬间挂载——使用级联延迟实现瀑布式显现
性能： 仅通过
```
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 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

中明确的“NEVER DO”规则：

任何位置都不得使用 emoji
不得使用
```
Inter
```
字体
不得使用通用衬线字体（
```
Times New Roman
```
、
```
Georgia
```
、
```
Garamond
```
）——如有需要，仅使用 distinctive modern serifs
不得使用纯黑色（
```
#000000
```
）
不得使用霓虹或外发光阴影
不得使用过度饱和的强调色
不得在大标题上过度使用渐变文字
不得使用自定义鼠标光标
禁止元素重叠——始终保持清晰的空间分隔
禁止使用 3 列等宽卡片布局
不得使用通用名称（“John Doe”“Acme”“Nexus”）
不得使用虚假的整数百分比（
```
99.99%
```
、
```
50%
```
）
不得使用 AI 文案陈词滥调（“Elevate”“Seamless”“Unleash”“Next-Gen”）
不得使用填充性 UI 文案：“向下滚动探索”“向下滑动”、滚动箭头或弹跳式人字形图标
不得使用失效的 Unsplash 链接——应使用
```
picsum.photos
```
或 SVG 头像
高变化度项目不得使用居中的 Hero 区域

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

从氛围入手——先理解风格感受，再细化设计 token
寻找规律——识别一致的间距、尺寸和样式
进行语义化思考——按用途命名颜色，而非只按外观命名
考虑层级——说明视觉权重如何传达重要性
编码禁用项——反模式与规则本身同等重要

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
```
，而不是“宽松圆角”）
省略十六进制代码，或只使用描述性名称
忘记设计元素的功能角色
对氛围的描述过于笼统
忽略反模式列表——这些规则正是让输出达到高端质感的关键
套用通用的“安全”设计，而不是贯彻精心策划的美学