When AI coding tools help you plan a project, they describe your options in text and ask you to pick. That works fine for technical choices but falls apart for anything visual. "A sticky navbar with a hamburger menu" vs "a sidebar with collapsible sections" is hard to evaluate without seeing them.

I built a Claude Code skill that generates a self-contained HTML page for each decision point and opens it in the browser. Each page has four options with visual previews (rendered CSS mockups for UI decisions, flow diagrams for interactions, architecture diagrams for technical choices), a comparison table, and a recommendation. You pick one, it records the choice, and moves on. At the end you get a standard implementation plan.

All states live in a .decisions/ folder as HTML files and a JSON manifest. There's a landing page that shows every decision and its status. You can change past decisions and it updates everything.

Tradeoffs worth knowing about: it's meaningfully slower than text-based planning. Each decision is a full HTML file generation. It uses more tokens. The visual previews are CSS approximations, not pixel-perfect mockups. For small projects or projects where you already know what you want, it's overkill.

The source is one file (SKILL.md) that acts as a prompt template. No dependencies, no build step, no runtime beyond the AI itself.

Anyway, give it a try. Hope you all like it.