变体设计

解决空白画布难题。输入提示 → 生成3个完整且各不相同的视觉设计方案 → 进行多样化调整 → 导出。

简介

灵感源自 [Variant](https://variant.com) 设计社区——一个设计师们对同一设计任务提出不同诠释的空间。本技能将这一实践引入 Claude Code：每个提示都将生成三个风格迥异的设计方案，仿佛来自不同设计工作室，随后可通过单字指令进行迭代优化。

基于 无瑕设计系统 构建——一套涵盖排版、色彩理论、空间设计、动效、交互模式、响应式设计及用户体验写作的完整设计参考体系。每一个设计决策均建立在这些原则之上。

支持功能： HTML（默认）· React · 7个领域参考库 · 27种配色方案 · 设计系统参考 · 多样化操作指令

项目上下文初始化

首次在项目中使用时，需收集设计上下文以确保后续生成的一致性。向用户提问：

1. 目标用户与用途 —— 谁是使用者？解决了什么问题？核心任务是什么？
2. 品牌与个性 —— 是否已有品牌配色？语气风格（活泼 / 严肃 / 技术感 / 温暖）？是否有欣赏的网站？
3. 审美偏好 —— 偏好浅色或深色主题？极简还是信息密集？是否对美学方向表中的某个方向有倾向？
4. 约束条件 —— 框架要求？超出基础标准的无障碍规范？目标设备类型？

若用户无法回答，可从代码库中推断：扫描现有颜色变量、字体导入、组件模式以及 README/品牌文档。在推进前确认推断结果。

将上下文持久化为生成文件顶部的注释块或对话记录中，并在每次生成时引用，确保各变体间风格一致。

场景识别 → 加载参考

根据用户提问内容，识别场景并加载对应参考文件：

始终同时加载相关设计系统参考文件，根据设计重点从 references/design-system/ 中选取：

初始生成阶段至少加载：排版、色彩与对比、空间设计。后续根据设计需求逐步加载其他参考。

核心工作流

1. 解析 → 识别 → 加载

识别当前场景，加载对应的领域参考文件 + 相关设计系统参考，选取3个起始提示词和配色方案。研究真实社区案例中的构图逻辑与设计亮点——提取其底层原则，而非表面风格。

2. 生成3个独立变体

每个变体 = 不同设计工作室的诠释。严禁两个变体风格趋同。

通用美学方向：

每个变体在编码前需明确：

• 起始提示词（来自参考或自定义）
• 配色方案（来自参考或 palettes.md）——尽可能使用 OKLCH 色彩空间以实现感知均匀性
• 排版：标题字体 + 正文字体（参见下方禁用字体列表）
• 布局模式（来自参考）——参考 spatial-design.md 获取网格与层次原则
• 动效策略——参考 motion-design.md 确定时间与缓动曲线
• 一个让该变体令人难忘的标志性细节

3. 实现

输出真实可用的代码——默认为 HTML，也可选 React。包含真实内容，不使用 Lorem Ipsum。视觉上应完整呈现。

标注格式：变体 A — [名称] / B — [名称] / C — [名称]

4. AI 模糊测试（质量检查）

在展示前，对每个变体执行以下检查：

如果你向某人展示这个界面并说“这是AI做的”，他们是否会立刻相信？如果答案是“是”，则需要重新设计。

一个出色的界面应让人产生“这怎么做到的？”的疑问，而不是“哪个AI生成的？”。请审查下方的反模式表格——它们是 AI 生成内容的典型痕迹。

5. 提供变化选项

呈现后，始终提供以下选择：

哪个方向更契合？可选操作：

• 强化风格 — 将美学推向极致
• 微调优化 — 保持方向一致，提升细节品质
• 精简提炼 — 剔除所有非必要元素，回归本质
• 更换风格 — 保留布局，替换视觉语言
• 重配色彩 — 使用 OKLCH 色彩空间生成 3 种替代配色方案
• 调整布局 — 内容与风格不变，重新组织版式结构
• 精细打磨 — 优化间距、排版及微观细节
• 设计评审 — 依据设计系统原则进行审计
• 提取设计令牌 — 导出设计令牌为 CSS/JSON/Tailwind 配置格式
• 查看其他视图 — 移动端 / 暗色模式 / 空状态 / 引导流程 / 悬停状态

变化操作定义

强化风格

将当前设计方向推向极致。增强对比度、加大字体强度、使用更鲜明的色彩、营造更具冲击力的版式。参考 references/design-system/typography.md 获取比例规范，参考 references/design-system/color-and-contrast.md 构建高对比度配色方案。

*前后对比示例：*

• 正文 16px，标题 32px → 正文 15px，标题 72px（比例由 1.25 提升至 1.5+）
• 强调色仅用于按钮 → 强调色主导主视觉区域，并延伸至导航栏
• 微弱 200ms 渐入动画 → 大胆 600ms 分步出现，配合缩放变换

微调优化

收紧间距，优化层级关系，适当柔化处理。方向不变，但提升制作精度。聚焦垂直节奏、视觉对齐以及微观交互，参考 references/design-system/spatial-design.md 和 references/design-system/motion-design.md。

*前后对比示例：*

• 不一致的内边距（16/20/24px）→ 统一锁定于 4pt 网格（16/24/32px）
• 普通悬停效果（透明度变化）→ 上下文相关悬停（卡片上抬 2px，按钮加深强调色）
• 缺失 OpenType 特性 → 数据使用 tabular-nums，标题启用 font-kerning: normal

精简提炼

将设计还原至其最核心的本质。灵感源自 Impeccable 的“精简”理念——通过无情的简化，揭示真正重要的部分。

执行流程：

1. 明确界面的单一核心目标
2. 对每个元素提问：“若移除该元素，是否破坏核心目标？”若否，则删除
3. 在各维度上进行简化：

- 信息层面：减少可见选项，采用渐进式披露（<details>、悬停展开）

- 视觉层面：控制颜色数量（建议 2–3 种），减少字号层级，移除装饰性元素

- 布局层面：合并区块，整合相关内容，消除冗余容器

- 交互层面：减少完成主要任务的点击次数，移除可撤销操作中不必要的确认步骤

- 内容层面：缩短标题，压缩文案，删除重复说明的引言段落

1. 验证：新用户能否更快完成核心任务？若不能，说明删错了内容。

*前后对比示例：*

• 5 段落的落地页 → 2 段：主视觉 + 核心价值主张 + 单一行动按钮
• 包含 12 个指标卡片的仪表盘 → 3 个关键指标放大显示 + “查看更多”可展开
• 含 8 个菜单项的导航 → 4 个主要项 + 溢出菜单

更换风格

提取结构与布局的核心特征，用另一套视觉语言替换整体外观，参考上方表格中的不同方向。

重配色彩

保留所有形状、文字和布局结构。基于 OKLCH 色彩空间生成 3 种配色方案（参考 references/design-system/color-and-contrast.md）：

1. 邻近色系 — 色相 ±30° 调整，适度调节饱和度
2. 互补对比 — 对应色相，重新平衡明度
3. 意外/非常规 — 完全不同的情绪基调

始终将中性色向品牌主色调偏移。禁止使用纯灰、纯黑（#000）、纯白（#fff）。

*前后对比示例（第 3 种，非常规）：*

• 深靛蓝科技仪表盘 → 温暖奶油色编辑类配色，搭配锈红色强调色
• 所有中性色从冷蓝灰 → 温暖石质色调

调整布局

内容与风格不变，重新组织版式结构：尝试全幅出血 → 非对称网格 → 编辑型列布局 → 卡片拼贴式排列。参考 references/design-system/spatial-design.md 中的网格系统与视觉层次原则。

*前后对比示例：*

• 居中主视觉 + 三列网格 → 全幅左对齐主视觉 + 非对称两列，其中特色模块放大

精细打磨

系统性应用 Impeccable 设计系统中的精细化标准：

• 排版（参考 references/design-system/typography.md）：垂直节奏、模块化比例、OpenType 特性（数据使用 tabular-nums，标题启用 font-kerning: normal）、font-display: swap、尺寸调整的回退机制
• 空间（参考 references/design-system/spatial-design.md）：眯眼测试、多维度层级表达、光学对齐（文本负外边距 -0.05em，图标中心偏移）
• 交互（参考 references/design-system/interaction-design.md）：覆盖全部 8 种交互状态（默认/悬停/焦点/激活/禁用/加载/错误/成功）、focus-visible 轮廓、表单设计规范（可见标签、模糊验证、aria-describedby 错误提示）
• 动效（参考 references/design-system/motion-design.md）：100/300/500 原则，进入使用 ease-out-expo，退出时持续时间为进入时间的 75%，分步动画使用 CSS 自定义属性
• 用户体验文案（参考 references/design-system/ux-writing.md）：按钮标签具体明确（动词+对象），错误提示遵循“问题 → 原因 → 解决方案”结构，空状态具备教学功能，链接文本具备独立语义
• 文案清晰化：扫描所有可见文字 —— 替换模糊标签为具体描述，删除冗余前言，确保每个字都有意义。“提交” → “创建账户”。 “错误” → “邮箱需符合 name@example.com 格式。”

设计评审

依据设计系统原则进行系统性审计。对每个维度评分并提出具体修改建议。

可变设计规范

1. 排版：层级是否清晰？比例尺是否一致？字体是否具有辨识度？垂直节奏是否固定？
2. 色彩：符合 WCAG 对比度标准？中性色是否带有色调？60-30-10 色彩平衡是否成立？是否避免使用纯黑或纯白？
3. 布局：通过“眯眼测试”吗？间距变化是否形成节奏感？卡片是否对齐？是否存在嵌套卡片？
4. 动效：持续时间是否合理（100/300/500ms）？进入动画是否使用 ease-out？是否尊重减少动效设置？仅允许 transform + opacity 动画？
5. 交互：8 种状态是否均已设计？焦点环是否可见？触摸目标尺寸 ≥44px？骨架屏 > 加载旋转图标？
6. 响应式：是否采用移动优先策略？断点是否由内容驱动？是否检测输入方式（pointer / hover）？是否考虑安全区域？
7. 文案：按钮标签是否具体？错误提示是否清晰（说明问题、原因和解决方法）？空状态是否具备教学意义？是否存在冗余文字？
8. 容错性：文本截断是否处理妥当？长内容是否优雅呈现？加载与错误状态是否完整？是否支持国际化间距？

提取设计令牌

以指定格式导出设计系统的令牌体系：

CSS 自定义属性（默认）：

:root {
  /* 原语 */
  --blue-500: oklch(55% 0.2 260);
  --stone-100: oklch(95% 0.01 60);
  /* 语义 */
  --color-primary: var(--blue-500);
  --color-surface: var(--stone-100);
  /* 排版 */
  --font-display: 'Fraunces', serif;
  --font-body: 'Instrument Sans', sans-serif;
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.75rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.0625rem);
  --text-xl: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  /* 间距 */
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 48px; --space-2xl: 96px;
  /* 动效 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 350ms;
}

JSON（用于设计工具 / Figma）：结构与扁平键值对 JSON 一致。

Tailwind 配置：在 theme 中扩展 colors、fontFamily、spacing、transitionTimingFunction。

查看其他视图

以完整设计系统合规的方式渲染附加视图：

• 空状态 — 不只是“无项目”。将其设计为引导契机：

1. 简要确认当前状态（“暂无项目”）

2. 说明填充的价值（“创建第一个项目，开始追踪进度”）

3. 提供明确的主操作按钮（突出显示的 CTA）

4. 添加视觉趣味（插图、图标或细微图案 — 永远不要使用悲伤表情）

5. 如适用，展示填充后的预览效果

• 数据填充状态 — 使用真实体量的数据：

- 列表包含 3–7 项

- 图表覆盖 6–12 个月数据

- 包含边界情况（如极长名称、空可选字段）

• 移动端视口 — 不是桌面端缩小版。依据 references/design-system/responsive-design.md：

- 重新思考拇指操作区（右手用户将主要操作置于右下角）

- 触摸目标 ≥44px 并带内边距

- 导航折叠为汉堡菜单 + 抽屉或底部标签栏

- 表格转换为带 data-label 属性的卡片

- 使用 @media (pointer: coarse) 设置更大的点击区域

• 深色 ↔ 浅色切换 — 依据 references/design-system/color-and-contrast.md：

- 深色模式使用较浅的表面以营造层次感（不使用阴影）

- 在深色背景上轻微降低强调色饱和度

- 减少字体粗细（深色背景上的浅色文字显得更重）

- 永远不要使用纯黑背景（#000）——改用 oklch(12-18%) 的带色调版本

• 引导流程 — 依据 Impeccable *onboard* 原则：

- “展示而非讲述”：内联演示 > 文字说明

- “可选而非强制”：始终提供跳过按钮，不强制进行引导

- “快速价值交付”：在 ≤3 步内达到“顿悟时刻”

- “情境优于仪式”：在用户需要时即时教学，而非提前灌输

- “尊重用户智能”：避免居高临下的语言，允许高级用户快捷操作

• 悬停 / 激活 / 焦点状态 — 所有交互元素均需有可见的状态变化

变化循环

每次执行变化操作后，必须：

1. 展示更新后的设计（标注操作动作，例如“变体 A — 精简”）
2. 再次提供完整操作菜单 — 循环持续，直到用户主动转移
3. 若用户在同一方向已迭代 3 次以上，主动建议：“是否要分支？我可以将此应用到其他变体之一。”

设计原则

基于 Impeccable 设计系统。深入实现请参考各独立文档。

内容与意图

• 真实内容胜过虚构：使用合理的标题、真实的数据值、实际的文案。让设计更具生命力。
• 彻底投入：半途而废的设计比简单设计更显糟糕。大胆的极简主义与精致的繁复主义皆可，关键在于有意识的选择，而非强度本身。
• 永不趋同：若 A 为深色，B 不能也为深色。每种变体应像来自不同工作室的作品。
• 类型匹配领域：不要默认使用通用应用界面 — 应加载正确的参考方案。

排版 *(→ references/design-system/typography.md)*

• 独特的展示字体 + 可靠的正文字体：使用 Google Fonts @import，始终指定字重。
• 禁用的展示字体：Inter、Roboto、Arial、Open Sans、Lato、Montserrat、system-ui、系统默认字体。
• 推荐替代字体：Instrument Sans、Plus Jakarta Sans、Outfit、Onest、Figtree、Urbanist、Fraunces、Newsreader、Lora。
• 模块化尺度：使用更少字号但更强对比（5 尺度系统：xs/sm/base/lg/xl+）。常用比例：1.25、1.333、1.5。
• 流体字体：使用 clamp(min, preferred, max) 实现响应式缩放。不用于按钮/标签。
• 垂直节奏：行高作为所有垂直间距的基础单位。
• OpenType 特性：数据表格使用 tabular-nums，食谱使用 diagonal-fractions，缩写使用 all-small-caps。
• 同一设计中最多使用两种字体。一个精心挑选的字体家族搭配多种字重通常已足够。

颜色 *(→ references/design-system/color-and-contrast.md)*

• 使用 OKLCH 创建感知均匀的配色方案。接近白色或黑色时降低饱和度。
• 将中性色向品牌色调和 — 即使饱和度仅为 0.01，也能建立潜意识中的统一感。
• 60-30-10 法则：60% 中性色，30% 次要色，10% 强调色。强调色之所以有效，是因为它们稀少。
• 避免纯黑/纯白。始终使用带色调的版本。自然界中不存在纯黑或纯白。
• 避免在彩色背景上使用灰色文字。灰字在彩色背景上会显得发灰——应使用背景色的更深版本。
• 双层令牌设计：基础令牌（--blue-500） + 语义令牌（--color-primary: var(--blue-500)）。深色模式仅重新定义语义令牌。

布局与间距 *(→ references/design-system/spatial-design.md)*

• 以 4px 为基准网格（非 8px — 后者过于粗糙）。缩放比例：4、8、12、16、24、32、48、64、96px。
• **使用 gap** 而非外边距来处理同级元素间距。
• 眯眼测试：闭眼或模糊视线——能否快速识别出最重要的元素、次重要的元素以及清晰的分组？
• 通过多维度构建层级关系：结合大小、粗细、颜色、位置和间距（同时使用 2–3 个维度）。
• 卡片并非必需。间距和对齐自然形成分组。切勿嵌套卡片。
• 使用容器查询 实现组件级别的响应式设计。

动效 *(→ references/design-system/motion-design.md)*

• 100/300/500 规则：100–150ms 快速反馈，200–300ms 状态变化，300–500ms 布局变化，500–800ms 入场动画。
• 进入动效使用 ease-out-expo（cubic-bezier(0.16, 1, 0.3, 1)），退出时间为进入时间的 75%。
• **仅动画 transform 和 opacity**。若需改变高度，请使用 grid-template-rows: 0fr → 1fr。
• 使用 CSS 自定义属性实现错落动画：animation-delay: calc(var(--i) * 50ms)。限制总错落时间。
• 减少动效不是可选项。必须包含 @media (prefers-reduced-motion: reduce)。
• 禁止使用弹跳或弹性缓动。真实物体减速是平滑的。

交互设计 *(→ references/design-system/interaction-design.md)*

• 设计全部 8 种状态：默认、悬停、聚焦、激活、禁用、加载中、错误、成功。
• 焦点环：禁止使用 outline: none 而无替代方案。应使用 :focus-visible。
• 表单设计：标签可见（不可仅用占位符），在失焦时验证，错误信息显示在字段下方，并通过 aria-describedby 关联。
• 骨架屏 > 加载动画。对低风险操作采用乐观 UI。
• 提供撤销功能 > 确认对话框。用户常会无意识点击确认。
• 模态框仅作为最后手段。如需使用，优先考虑原生 <dialog>。非模态覆盖建议使用 Popover API。

体验文案 *(→ references/design-system/ux-writing.md)*

• 按钮标签具体明确：使用“保存更改”而非“确定”，“创建账户”而非“提交”。
• 错误提示公式：发生了什么 → 原因 → 如何解决。绝不责怪用户。
• 空状态是机会：表达理解，说明价值，提供清晰的操作指引。
• 链接文本必须独立可懂：“查看定价计划”而非“点击这里”。

代码导出

• HTML：单文件，内联 CSS，可选原生 JS。默认格式。
• React：函数式组件，使用 Tailwind 或 CSS Modules —— 提前声明状态假设。

HTML 输出规范

• 所有颜色使用 CSS 自定义属性 —— 在支持时使用 OKLCH，否则回退为十六进制：--accent: oklch(65% 0.2 250); /* fallback: #6366F1 */
• 语义令牌层：--color-primary、--color-surface、--color-text 映射到基础令牌
• 使用 @import 引入 Google Fonts —— 始终指定所用字体权重，并包含 font-display: swap
• 响应式设计：移动端优先，断点设为 640px 和 1024px。使用 clamp() 实现流体尺寸
• 默认不包含框架 —— 仅使用原生 CSS + HTML。用户要求时才使用 CDN 版 Tailwind
• 所有可交互元素包含悬停状态和 focus-visible 焦点环
• 所有动画包含 @media (prefers-reduced-motion: reduce) 块
• 最低视觉完整性要求：填充真实数据、真实文案、正常导航状态

React 输出规范

• 仅支持函数式组件 —— 不支持类组件
• 颜色令牌声明为 const theme = { ... }，包含 OKLCH 值及十六进制回退
• Google Fonts：在返回的 JSX 中添加 <link>，或指导用户手动添加至 index.html
• 一次性样式优先使用内联样式；重复模式提取至 styles 对象
• 在注释块中提前声明状态假设：哪些组件是状态驱动的，需要传递哪些 props
• 若使用 Tailwind：重复模式使用 @apply；若使用 CSS Modules：每个组件对应一个 .module.css 文件
• 不使用 useEffect 处理布局 —— 优先使用 CSS-only 动画与过渡
• 属性默认值必须为真实内容（不得为 undefined，不得使用 “Lorem ipsum”）

多屏幕 / 流程支持

当用户请求流程（如引导页、结账流程、向导、多步骤表单）：

1. 将所有屏幕横向并列显示，每屏置于 390px 宽的容器中，并在上方标注名称
2. 使用共享的 currentStep 状态变量控制屏幕的显示/隐藏（如需交互）
3. 标注过渡方式：“→ 向左滑动前进” 或 “→ 按 Tab 键跳转至第 2 步”
4. 每屏必须视觉完整 —— 切勿留空作为占位符
5. 应用引导原则：展示而非说明，让跳过选项可见，确保在 ≤3 步内达到“顿悟时刻”

性能基线

所有输出必须满足以下最低标准：

• 图片： 对视口下方的图片使用 loading="lazy"，设置 width/height 属性以防止 CLS（布局偏移），使用 srcset 实现响应式图片，优先采用 WebP 或 AVIF 格式
• 字体： 使用 font-display: swap，尽可能对字体进行字符范围子集化，预连接 Google Fonts 域名：<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
• CSS： 避免在 CSS 文件中使用 @import（会阻塞渲染）——仅在 <style> 中用于 Google Fonts。对屏幕外区域使用 content-visibility: auto
• 动画： 仅使用 transform 和 opacity（GPU 合成）。除非动画即将发生，否则不使用 will-change。滚动触发的动画使用 Intersection Observer，绝不使用滚动事件监听器
• 布局： 避免布局抖动（读取后写入，绝不交错操作）。避免强制同步重排

生产环境加固检查清单

在设计将用于实际产品时应用以下标准：

文本容错性：

• 所有文本容器需处理溢出：单行使用 overflow: hidden; text-overflow: ellipsis，多行使用 -webkit-line-clamp
• 用两倍预期内容长度测试 —— 布局是否仍能正常工作？
• 用空内容测试 —— 空状态是否有意义？
• 标题：使用 overflow-wrap: break-word 防止移动端出现水平滚动

国际化就绪性：

• 文本容器不应使用固定宽度 —— 允许德语/法语等语言扩展最多 30%
• 使用逻辑属性：如 margin-inline-start 而非 margin-left（支持从右到左布局）
• 数字：使用 Intl.NumberFormat 实现本地化格式化
• 日期：使用 Intl.DateTimeFormat —— 永远不要硬编码日期格式

错误与边缘状态：

• 网络失败：显示最后已知数据，并添加“无法更新”提示，而非空白屏
• 网速慢：若数据未就绪，在 200ms 内显示骨架屏
• 数据无效：优雅降级（缺失数值显示为 "--"，而非 NaN/undefined）

输入健壮性：

• 搜索/筛选输入需防抖（300ms）
• 表单防止重复提交（首次点击后禁用按钮，错误时重新启用）
• 粘贴处理：在纯文本输入框中粘贴时自动清除格式

反模式（AI 生成痕迹）

避免在所有输出中出现这些特征 —— 它们是 AI 生成设计的典型标志：

可访问性基线

每项输出必须满足以下要求 —— 不可妥协：

• 文本对比度最低标准：正文 4.5:1，大文本（≥24px 加粗或 ≥18.5px 正常）3:1
• 所有交互元素：最小触控/点击区域 44×44px（若视觉尺寸较小，使用伪元素实现）
• 焦点环：禁止使用 outline: none 而无自定义可见的 :focus-visible 替代
• 不要仅靠颜色传达含义 —— 必须搭配图标、标签或图案
• 长篇文本避免纯白对纯黑 —— 使用略带灰度的白/黑（如 #F0EDE8 on #111）以减少眼疲劳
• @media (prefers-reduced-motion: reduce) —— 保留功能性动画（进度条、加载状态），移除空间移动效果
• 字号使用 rem/em，禁止正文使用 px —— 尊重浏览器设置
• 所有视口下最小字号为 16px
• 键盘导航：逻辑顺序的 tab 顺序，导航密集页面使用跳转链接，组件组使用 roving tabindex
• ARIA：使用地标标签（main、nav、aside），动态内容使用 live regions，表单错误使用 aria-describedby