UI Mockup in HTML

Overview

Build self-contained HTML mockup files to explore design directions without touching the real codebase. Faster than Figma, more tangible than describing designs in words, and trivially disposable.

When to Use

• Exploring a new visual direction (palette, typography, layout)
• Comparing design alternatives side-by-side
• Prototyping a redesign before committing to CSS changes
• User shares design inspiration and wants to see it applied
• Design tool (Figma, etc.) is unavailable or too limited

When NOT to use: If the change is small (just swap a color), edit the real CSS directly.

Core Pattern

Structure