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通过**「视觉描述」**解读设计，辅以特定的色彩值、排版规范和组件行为。

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服务器，用于与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
```
）——使用近黑、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. 定义首屏区域

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

首屏是第一印象，必须富有创意、引人注目且绝不通用：

内联图像排版： 在标题的文字或字母之间直接嵌入小型上下文图片或视觉元素。图像与文字高度对齐，圆角处理，作为视觉标点。这是标志性的创意技巧
无重叠： 文本绝不能与图像或其他文本重叠。每个元素都占据独立的清晰空间区域
无填充文本： 禁用「向下滚动探索」、「向下滑动」、滚动箭头图标、弹跳 Chevron 等填充文本。内容应自然吸引用户
不对称结构： 当变化度超过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

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

按钮： 激活状态下有触觉按压反馈。无霓虹外发光。无自定义鼠标光标
卡片： 仅当层级需要通过 elevation 体现时使用。阴影色调与背景色相匹配。在高密度布局中，用顶部边框分隔线替代卡片
输入框/表单： 标签位于输入框上方，辅助文本可选，错误文本位于下方。标准间距
加载状态： 与布局尺寸匹配的骨架加载器——无通用圆形加载动画
空状态： 组合式构图，提示用户如何填充数据
错误状态： 清晰的内联错误提示

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时，禁用居中首屏布局——强制使用分屏、左对齐或不对称留白
禁用通用的「三等分水平卡片」布局——使用2列交错、不对称网格或横向滚动
优先使用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
```
——高品质、有分量的质感。无线性缓动
持续微交互： 每个激活状态的组件应具有无限循环状态（脉冲、打字机效果、浮动、微光）
交错编排： 绝不瞬间渲染列表——使用级联延迟实现瀑布流展示
性能： 仅通过
```
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中明确编码这些「绝不能做」的规则：

任何位置均不得使用表情符号
不得使用
```
Inter
```
字体
不得使用通用衬线字体（
```
Times New Roman
```
、
```
Georgia
```
、
```
Garamond
```
）——仅在必要时使用独特的现代衬线字体
不得使用纯黑色（
```
#000000
```
）
不得使用霓虹/外发光阴影
不得使用高饱和度强调色
不得在大标题上使用过度的渐变文字
不得使用自定义鼠标光标
不得出现元素重叠——始终保持清晰的空间分隔
不得使用三等分卡片布局
不得使用通用名称（「John Doe」、「Acme」、「Nexus」）
不得使用虚假的整数（
```
99.99%
```
、
```
50%
```
）
不得使用AI文案陈词滥调（「提升」、「无缝」、「释放」、「下一代」）
不得使用填充UI文本：「向下滚动探索」、「向下滑动」、滚动箭头、弹跳Chevron
不得使用失效的Unsplash链接——使用
```
picsum.photos
```
或SVG头像
不得使用居中首屏布局（针对高变化度项目）

Output Format (DESIGN.md Structure)

输出格式（DESIGN.md结构）

markdown

undefined

markdown

undefined

Design System: [Project Title]

设计系统：[项目标题]

1. Visual Theme & Atmosphere

1. 视觉主题与氛围

(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

2. 色彩调色板与角色

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

画布白 (#F9FAFB) —— 主要背景色
纯净表层 (#FFFFFF) —— 卡片和容器填充色
炭墨黑 (#18181B) —— 主要文本，Zinc-950深度
哑光钢灰 (#71717A) —— 次要文本、描述、元数据
细语边框 (rgba(226,232,240,0.5)) —— 卡片边框、1px结构线
[强调色名称] (#XXXXXX) —— 单一强调色，用于CTA、激活状态、焦点环（最多1种强调色，饱和度<80%。无紫色/霓虹色。）

3. Typography Rules

3. 排版规则

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.

标题： [字体名称] —— 字距紧凑，比例可控，基于字重构建层级
正文： [字体名称] —— 行高宽松，最大宽度65ch，中性次要颜色
等宽： [字体名称] —— 用于代码、元数据、时间戳、高密度场景下的数字
禁用： 在高品质场景中禁用Inter和通用系统字体。仪表盘场景中禁用衬线字体。

4. Component Stylings

4. 组件样式

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.

按钮： 扁平化，无外发光。激活状态下向下偏移1px。主按钮使用强调色填充，次要按钮使用幽灵/轮廓样式。
卡片： 大圆角（2.5rem）。柔和的细语阴影。仅当elevation有助于体现层级时使用。高密度场景：替换为顶部边框分隔线。
输入框： 标签位于上方，错误提示位于下方。焦点环使用强调色。无浮动标签。
加载器： 与布局尺寸完全匹配的骨架微光加载器。无圆形加载动画。
空状态： 组合式、带插图的构图——而非仅显示「无数据」文本。

5. Layout Principles

5. 布局原则

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

（优先使用网格的响应式架构。首屏使用不对称分割。 768px以下强制单列折叠。最大宽度约束。绝不使用Flexbox百分比计算。充足的内边距。）

6. Motion & Interaction

6. 动效与交互

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

（所有交互元素使用弹簧物理效果。列表使用级联延迟瀑布流展示。仪表盘激活组件使用持续微循环。仅使用硬件加速的transform。CPU密集型动画使用独立客户端组件。）

7. Anti-Patterns (Banned)

7. 反模式（禁用项）

(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

（明确列出禁止的模式：无表情符号，无Inter字体，无纯黑色，无霓虹发光，无三等分网格，无AI文案陈词滥调，无通用占位名称，无失效图片链接。）

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」）
省略十六进制代码或仅使用描述性名称
忘记设计元素的功能角色
氛围描述过于模糊
忽略反模式列表——这些是输出高品质内容的关键
默认使用通用的「安全」设计，而非强制执行精心打造的美学标准