explore-design

Produce ONE standalone .html file that lays out several visual directions side-by-side so the user can pick a direction. The output is for visual comparison — it is not production code.

Two phases:

1. Explore (this file) — generate the side-by-side comparison.
2. Implement — when the user picks a variant or asks to build a mock, read references/implement.md in this skill's directory and follow it.

When to use this skill

• "Explore directions" / "show me a few options" / "brainstorm designs" / "concept this" / "what could this look like"
• "Implement option C" / "build this exploration" / "make the implementation match the mock" (→ phase 2)
• "Init" / "rebrand the explorations" (→ re-run brand init)

When NOT to use this skill

• Production components wanted directly, with no exploration step and no mock to match → build in the codebase
• An approved direction from outside this skill, no mock to hold parity against → normal implementation
• A tiny styling tweak to shipped code → just edit it