HTML Prototype

Build a credible model of a product decision. Match the artifact to the user's context instead of applying a recurring house style. The goal is not to make every possible screen. The goal is to make the important visual or behavioral question testable.

Choose the fidelity mode

Use one of two modes:

• Mockup: Create a polished, responsive, mostly static artifact when the open question is visual hierarchy, layout, typography, color, or product fit.
• Prototype: Create a working flow when the open question is navigation, input, state change, feedback, recovery, or transition.

Do not create a separate html-mockup skill. Do not add behavior merely to make a mockup seem more complete. If a user asks for both modes, preserve the same content and structure so changes in fidelity remain easy to compare.

Derive the direction from context

Inspect the conversation, supplied references, and project before designing. Look for design-system documentation, tokens, existing components, product screenshots, and nearby artifacts.

Authority runs in this order: