stitch-design-taste

建立在 [[design-foundation]] 之上 — hallmark 的 6 项准则 + slop-test 是共同的底线（不可妥协）；此技能只是在底线之上增添 风格，不会取代底线。

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

概述

此技能会生成针对 Google Stitch 屏幕生成进行优化的 DESIGN.md 文件。它将经过实战验证的反 slop 前端工程指令转化为 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）

默认基准：变化度 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”）
• 漏掉十六进制代码，或只提供描述性名称
• 忘记说明设计元素的功能
• 对氛围描述过于含糊
• 忽略反模式列表——这些规则能让产出显得高端
• 默认采用通用的“安全”设计，而不是贯彻精心策划的美学

---

输出报告

完成所有主要技能任务后，将提案草稿写入 wiki。

步骤

1. 构建文件名：

• 格式：DDMMYY-<ten>.md
• DDMMYY = 今天的日期（例如，2026 年 6 月 2 日对应 020626）
• <ten> = 用 2–4 个 kebab-case 单词概括完成的工作（例如，landing-page-coteccons、brand-kit-fintech、ingest-auth-spec）

2. 写入 llmwiki/wiki/draft/uiux/DDMMYY-<ten>.md：

# DDMMYY-<ten>
**Type:** draft
**Status:** proposed
**Tags:** <skill-name>, output-report
**Proposed:** YYYY-MM-DD

## What
<One sentence — what this skill invocation produced or decided>

## Output
<Key artefacts, files created/modified, or decisions made>

## Files
| File | Action |
|------|--------|
| `path/to/file` | created / modified |

## Notes
- Invoked via: `/<skill-name>` skill

## Origin
- **Draft:** `wiki/draft/uiux/DDMMYY-<ten>.md`
- **Commit:** _(filled by verify-before-commit)_
- **Date promoted:** _(filled by verify-before-commit)_

3. 更新 wiki 索引和日志：

• llmwiki/wiki/index.md — 追加一行：| [DDMMYY-<ten>](draft/uiux/DDMMYY-<ten>.md) | draft | YYYY-MM-DD |
• llmwiki/wiki/log.md — 追加：## YYYY-MM-DD — <skill-name> — <ten>

仅当该技能没有产出任何工件，也没有形成任何决策时才跳过（例如，纯展示模式 /caveman-stats）。