Rapid Prototype Sketch

The problem

Stalling a project because you are not sure which UI direction to take. Manually building multiple high-fidelity mockups just to "see how it feels" wastes hours of development time.

What it does

• Generates 2 to 3 distinct UI variants as self-contained HTML files with inline CSS.
• Includes interactive behaviors using vanilla JavaScript to test basic user flows.
• Captures screenshots of each variant using headless Chromium to verify layout integrity.
• Produces a head-to-head comparison table scoring variants on density, scan speed, and aesthetics.
• Recommends a specific design direction based on your core project goals.

Frameworks & tools

HTML5, CSS3, Vanilla JavaScript, Chromium, and system fonts.

Why this beats prompting it yourself

Standard prompts often return a single generic design or broken code. This skill enforces a "divergent thinking" workflow, forcing the AI to produce contrasting axes (like compact vs. airy) and verifying the output with actual rendering tests before you see it.

Use cases

• Resolving stakeholder disagreements by providing concrete layout options to react to.
• Rapidly testing different information densities for data-heavy dashboards.
• Exploring aesthetic directions (editorial vs. technical) before starting a CSS framework setup.
• Validating mobile vs. desktop layout logic before committing to a component library.

Known limitations

Designed for throwaway prototypes only. Not suitable for production-grade components, complex asset pipelines, or offline use if external CDNs are requested.