# Generate Variations

> 为页面、组件或流程生成多个可以直接比较的设计方向，并让变化发生在布局、信息层级、交互、排版、密度或文案策略等实质维度。用户提出“给几个方案”“不同方向”“多做几版”“show me a few”或希望混合多个方案时使用；不要只换颜色伪造变化。

- Skill: `onevium/generate-variations` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add onevium/generate-variations`
- Raw SKILL.md: https://api.skillmd.com/api/skills/onevium/generate-variations/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT. See LICENSE.txt for full terms.
- Author: Onevium (https://skillmd.com/u/onevium)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/onevium/generate-variations

---


# 生成设计变体

用少量、差异清晰的方案帮助用户比较取舍。默认生成 3 个方向；用户指定数量时尊重其要求，通常单轮不超过 5–6 个。

## 1. 建立基线

确认变化对象、既有品牌或设计系统、方案数量，以及主要探索视觉、布局、交互、信息层级或文案。除非用户明确要求突破，所有变体都应扎根于同一产品约束。

## 2. 选择变化轴

挑选 2–4 个真正影响体验的维度：版式骨架、首要信息、密度、字体层级、色调、组件风格、流程步骤、模态与行内交互、文案语气等。制作前先写明每个方案主要改变什么。

## 3. 从稳妥到大胆

默认顺序：

1. **稳妥版**：遵循既有模式和行业惯例。
2. **强化版**：保持核心结构，主动强化一两个维度。
3. **探索版**：改变布局或交互模型，提出真正不同的假设。

如果所有方案都很安全，用户得不到新信息；如果全部激进，则忽略了简报。

## 4. 保证实质差异

变体应在布局、层级、交互、排版、密度或内容策略上可用一句话区分。只改按钮颜色、阴影透明度或小范围圆角不算独立方向。两个方案过于接近时，删除其中一个并重做。

## 5. 同一载体展示

静态页面在一个可横向或纵向对比的文件中展示；流程用同一文件中的小型 storyboard；共享结构且仅少数轴不同的方案可以使用可调参数。不要散落 `v1.html`、`v2.html`、`v3.html`。

## 6. 标注并推荐

每个方案用一两句话说明变化轴和代价。最后明确推荐一个方向及理由，并给出继续细化、再探索另一轴、制作原型或进入最终检查的下一步。

## 示例

**输入：**“给定价页做三个完全不同的方向。”

**输出：**在一个 HTML 画布中展示标准三栏卡片、强调推荐层级的强化版，以及通过用量滑块推荐套餐的探索版；逐一标注差异，并推荐最符合当前业务目标的方向。

## 来源与许可

本 Skill 基于 Trystan Sarrade 的 [claude-design-system-prompt](https://github.com/Trystan-SA/claude-design-system-prompt) 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 [LICENSE.txt](./LICENSE.txt)。