sketch

Describe the screen and the feel you want, and the skill builds 2-3 standalone HTML variants with different design stances. Each variant is a self-contained file with inline CSS, realistic content, and at least one interactive state transition you can open in a browser.

Good variants differ along one clear axis such as density, emphasis, layout, or aesthetic — not just accent colors. Each variant should commit to a distinct stance like compact versus airy or content-first versus action-first so the trade-offs are visible.

Yes, variants support Tailwind via CDN script tag and one Google Font via link tag, alongside system font stacks. All styling stays inline in a single self-contained HTML file with no build step or external CSS required.

Skip sketching when you need a production-ready component, a polished one-off artifact like a landing page, or a diagram. If the design direction is already locked, build the real thing directly instead of generating disposable variants.

Each variant is loaded in a browser via file URL and inspected with vision-based tools that describe what actually renders on the page. This catches issues source inspection misses, such as silently failed font imports or collapsed flex containers, before variants are shown.