Design Variant Picker

When you ask for a landing page, VibeOS can show three visual directions first — light HTML previews + design tokens — then lock your choice before building a real Next app.

Skill path: skills/creative/design-variant-picker
Bundled skill docs: Design Variant Picker

Flow

1. Loud brief — industry, tone, must-have blocks, forbids (“no dark”, “no purple”).
2. Agent writes a run under .vibeos/design-variants/run-…/ with A/B/C previews.
3. Desktop Design tab (or chat Open variants) shows the gallery.
4. Select → design/tokens.css + DESIGN.md in the project.
5. /design apply → merge tokens into app CSS (or prompt for internet-starter).
6. /design scaffold → first app/page.tsx from the locked direction.
7. Optional polish with cinematic-web + /preview.

Desktop slash

/design open | load <path> | select A|B|C | apply | scaffold | mix A C | more | reject | clear

Aliases: /design-variants, /design page (= scaffold).

Offline verify

scripts/run_tests.sh tests/skills/test_design_variant_picker.py -q

Operator checklists: docs/ops/design-variant-picker-day15-checklist.md,
docs/ops/design-variant-picker-demo-5min.md.

Non-goals

• Three full Next apps before you pick
• Auto-picking a “best” variant without you
• Vendor SEO SaaS in core