UI Mockup Visualizer

Overview

Use this skill to turn UI/UX discussion into concrete HTML mockups quickly, so the user can verify whether the agent is visualizing the right thing before implementation starts.

Default to this skill whenever a user wants to see the layout the agent is describing, wants UI/UX ideas, wants visual comparison, or needs a fast wireframe for websites, mobile apps, or desktop apps. Skip it only when the user explicitly asks for text-only output.

Read these references as needed:

• references/mockup-design-system.md
• references/pattern-benchmarks.md

Strong trigger cues:

• the user wants to "see" what the agent means before implementation
• the user asks for several UI directions to compare
• the user asks for a mockup, wireframe, layout sketch, or HTML preview
• the user is discussing a specific surface such as sidebar, modal, dashboard block, form area, mobile screen, or desktop panel

Workflow