Design Variations

Generate a gallery of meaningfully different design variations for a UI component, rendered in a single comparison page.

References

This skill includes twelve reference documents. Read all of them before generating variations:

• references/design-principles.md — Intent framework, profiles, tokens, baselines, mandate tests, axes, recipes (T1–T10, P1–P10, L1–L8). Steps 1–3.
• references/structural-bad-good-gallery.md — WRONG vs RIGHT structural diversity examples. Step 3.
• references/profile-fidelity.md — Per-profile execution cards (tokens, font imports, forbidden drifts). Movement profiles + 50+ brand-inspired profiles from MIT-licensed VoltAgent/awesome-design-md. Step 4b.
• references/component-recipes-extended.md — Recipes for nav (N1–N8), hero (H1–H8), modal (M1–M6), table (TB1–TB6), card (D1–D6), sidebar (SB1–SB6), form (F1–F6), footer (FT1–FT4). Step 3 for non-toast/pricing/login components.
• references/agent-prompt-cheatsheet.md — Per-profile example prompts. Optional, step 2.
• references/font-substitutes.md — Licensed font → free web-font mapping. Step 4b.
• references/polish-checklist.md — Rendering/accessibility gates: focus rings, touch targets, easing, animation, contrast, i18n, reduced motion. Step 6b.
• references/design-system-compliance.md — Compliance checklist + Same-HTML / Swap / Squint / Signature / Token / Evidence / Upstream tests. Steps 4a, 6.
• references/state-matrix.md — State coverage + sub-cell pattern + @container responsive strip. Steps 3, 5.
• references/ingestion-cascade.md — URL/repo/prose cascade producing the brief object; sanitization, WebFetch hardening, error fallback. Step 2a.
• references/control-surface.md — <details>/<summary> disclosure, 8 prompt templates, trailing chat echo. Step 8.