sketch

Generate 2-3 standalone HTML variants that each take a different design stance, such as compact versus airy density or content-first versus action-first emphasis. Review them side-by-side in a comparison table covering trade-offs, then pick a winner or combine two into a hybrid.

Write a single self-contained HTML file with inline styles, system fonts or one Google Font, and optionally Tailwind via CDN. Include realistic fake content and at least one interactive state transition like a toggle, filter, or modal.

Use sketches when the design direction is undecided and you need to explore options cheaply. Once a direction is locked, build the real component properly instead of polishing a disposable mockup.

Yes, open each variant in a browser and use a vision tool to inspect the rendered page for overlapping text, unstyled elements, or failed font imports. Source inspection alone misses rendering issues, so fix and re-check until each variant looks right.

Sketches are not shippable code and should not be curated as long-term assets. They use minimal theming, limited interactivity, and no state management, so anything worth keeping should be promoted into real project code.