HTML Prototype

The prototype is a faithful copy of a host page (the real product page as it ships today) with the change dropped in. Readers judge the change in context, so the host page has to be indistinguishable from production and the change has to be easy to find.

1. Settle the brief

Pin down:

• The host page: the route or screen. When it has variants (a header that changes by partner type, a logged-out view), pick the one most readers of this prototype will hit and say which you picked.
• The change's states: every distinct look it can take, typically empty or prompt, editing, error, and success. Each becomes a button on the prototype bar.

Done when you can name the host page variant and list every state.

2. Read the host page from code

Trace the route to the components it renders, then into the design tokens and the UI kit components the change will reuse (buttons, text fields, headings, dividers). Collect the logo, icons, and the current copy for every section.

Done when every color, font, radius, and spacing value you will write traces to a token or a kit component, and every string on the host page is today's copy. Where the code leaves a value open, match the nearest sibling element instead of inventing one.