UI Prototype Preview

Turn a saved brain-storm/ idea into a self-contained HTML prototype. Run after brain-storm when a UI-focused idea needs a stronger visual artifact before specification or implementation. The result must look deliberately designed — never a generic AI dashboard.

Hard Rules

• Save previews to brain-storm/previews/{idea-name}.html; variants to brain-storm/previews/{idea-name}-{variant-slug}.html. Save design briefs to brain-storm/design/{idea-name}-design.md unless the user gives another path. Lowercase-with-hyphens; create directories as needed.
• The HTML is standalone — embedded <style>, no build step, semantic structure, accessible text labels.
• Desktop-first responsive layout unless the idea clearly targets mobile. Locally safe font stacks; import web fonts only when the environment clearly supports them.
• One standout idea. Every preview has a single memorable visual or interaction moment.
• Concept first, code second. Commit to a named aesthetic direction before writing any HTML.
• Report traceability: source brainstorm file, chosen direction, design brief used, output path.

Phase 0 — Resolve the design brief

Use a DESIGN.md-style brief whenever the request includes any of: 2+ variants, exact brand colors or theme tokens, font/typography preferences, a design system or UI kit influence, explicit forbidden aesthetics, device/layout preferences (mobile-first, landing-page-first, dashboard-first), or reference links/screenshots/brand keywords. Simple requests may skip the brief — but constraint-heavy requests get a brief, not an overloaded prompt.