build-ui-prototypelisted

# Build UI Prototype ## Trigger Use when the user asks for a prototype, mock, demo, clickable flow, app shell, a component built from a screenshot, or a redesign of existing UI. ## When To Use - Product value or a user journey needs to be seen before it is built. - Requirements, UX flows or a screen inventory exist and need a visual check. - An existing component needs redesigning. ## When Not To Use - Production implementation. Use `implement-feature-safely`. - Defining reusable standards. Use `create-design-system`. - Backend or data work. ## Step 0: State The Design Read Before any code, say in one line what you are building and for whom: > *Reading this as: `<page kind>` for `<audience>`, in a `<style>` language, using > `<design system or preset>`.* If the design read genuinely diverges, ask **one** question. If it can be inferred, do not ask. ## Step 1: Resolve The Mode | Flag | Behaviour | | --- | --- | | `--image-to-component` | Rebuild an attached image as a component. Describe the structure you see (layout, grid, type scale, spacing rhythm, states) before writing any markup, and name what you cannot determine from the image rather than inventing it. | | `--component-redesign` | Audit first: read the existing component, list what it does, what it gets right, and what is actually wrong. Preserve behaviour, props and accessibility. Change appearance only. | | `--web-page-design` | A full page composition: hero, sections, footer, real copy. | | `--clickable-