As of 13 August 2026, AI can turn your prototype into HTML and CSS.

What to actually do

1. Hand it to a person

   The route this page recommends

   A person who owns the outcome does this end to end, worth it when the failure is dear.

2. Do it yourself

   Second choice

   A chat interface, chat-fluent skill, and roughly 1 hour until you can act on the result.

   How to actually do it

   1. Open the prototype and export each relevant screen at the main desktop and mobile sizes, then gather the exact copy, images, icons, fonts and interaction states.
   2. Create a new project in an AI coding tool such as Bolt and attach the exported screens and assets, or paste a shareable prototype link if the tool can access it.
   3. Paste the supplied prompt and fill in the target page, screen sizes, interactions, brand rules and technical constraints from the prototype.
   4. Run the generated project locally or in the tool's preview and compare each page against the corresponding prototype screen at the supplied sizes.
   5. Test every listed interaction with a mouse and keyboard, including focus states, forms, menus, validation, loading, empty and error states, and record each mismatch.
   6. Paste the mismatch list back into the tool and ask it to change only the affected HTML, CSS or JavaScript without replacing the supplied content or assets.
   7. Open the final files in the intended hosting or build environment, check the browser console and test the page again on desktop and mobile before sending it to your developer or publishing it.

   Prompt

   Turn the prototype described below into a responsive, accessible web page using semantic HTML and separate CSS, with JavaScript only where it is needed for the stated interactions.
   
   Prototype source: [paste a public prototype link, or attach screenshots or exported frames]
   Target page or feature: [describe the page]
   Required interactions and states: [list clicks, menus, forms, validation, loading, empty and error states]
   Target screen sizes: [list desktop, tablet and mobile widths if known]
   Assets: [attach or list images, icons and fonts]
   Content: [paste the exact text to use]
   Brand rules: [colours, type scale, spacing, border and button rules]
   Technical constraints: [framework, browser support, file structure or hosting constraints]
   
   First, list any details that are missing or ambiguous and state sensible assumptions without inventing product requirements. Then produce the complete files in clearly labelled code blocks. Use reusable classes, CSS custom properties, keyboard-accessible controls, visible focus states, useful alt text and responsive layouts. Do not replace supplied copy with filler. Do not claim that the result matches the prototype until it has been checked. Finish with a short manual test list covering every interaction, mobile layout, keyboard navigation, focus visibility, overflow and obvious console errors.

   Open it prefilled in ChatGPT or Claude, or copy it into Gemini, which takes no prefill link.

3. Use a tool built for this

   The distant third