Generate Variations

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

Onevium 78dcbb1 2 files · 3.8 KB Updated

File contents

生成设计变体

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

1. 建立基线

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

2. 选择变化轴

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

3. 从稳妥到大胆

默认顺序:

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

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

4. 保证实质差异

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

5. 同一载体展示

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

6. 标注并推荐

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

示例

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

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

来源与许可

本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布,详见 LICENSE.txt

Onevium/skills/tree/main/skills/design/generate-variations commit 78dcbb1bfd

Frequently asked questions

npx skillmds@latest add onevium/generate-variations