How to compare three design directions in an existing project
Install Variant Design in Claude Code or Codex, then give your agent the brief. It inspects your page structure and design system first, then builds three complete versions, A/B/C, in your project with a comparison page. All three keep the same core task, data and necessary functions; they differ in their design tradeoffs.
Published 2026-11-021. Install the complete directory
You need Git and Node.js 22 or later. Copying SKILL.md alone is not enough. Claude Code uses a different path; see the install guide.
git clone https://github.com/YuqingNicole/variant-design-skill.git ~/.codex/skills/variant-design2. Give the brief inside your project
Open your code project in your agent and paste this prompt. Start with one page or hero. Your agent provides the model.
Use the complete Variant Design skill. Inspect my project's structure and design system, then generate three directions A/B/C preserving core tasks. Preserve existing brand fonts and tokens; explore distinct styles if there is no brand constraint. Open previews, explain benefits, tradeoffs and fit, and give a reasoned recommendation without selecting a winner.3. Compare and try edits
Trying an edit on a version does not select it. Send these shorthands to your agent, or say the same thing in plain language.
- compare: Reopen the side-by-side comparison.
- B vary subtle — hero: Refine only B’s hero. Snapshots first, keeps other regions and brand tokens, and does not select B.
- Mix A + B: Merge two versions and explain tradeoffs where they conflict.
- undo B: Restore B’s previous files and tokens. A/C and the final selection stay unchanged.
4. Pick and integrate
A final choice is recorded only when you say so. Integration backs up the target files first, so you can roll it back.
- pick B: Record B as the final choice, then derive a complete design system from it: palette, type scale, spacing, radius, elevation, motion, and every component B uses in all its states, with usage rules in DESIGN.md. After ds confirm, later pages build on it, and it is exported as a DTCG tokens file that Figma variables can import. Edits and selection are tracked separately.
Integrate B into the project. Prepare source and target baselines before staging, back up before overwriting, run the existing typecheck and build, return a working preview URL, and list changed files and how to roll back.Recorded runs
On 2026-10-27 we ran the first generation with Claude Code and Codex on 3 sample projects, 6 runs in total, and every automated check passed. Claude Code took 589–1026 seconds and $1.82–2.46 per run; Codex took 309–513 seconds. We wrote those projects ourselves, and the numbers come from that version, so they do not predict your project.