From design direction to working page in one step

Most design processes have a frustrating middle step: you finalize a design, and then someone has to translate it into a real, working page. That translation is where things drift — spacing changes, fonts don't match, the thing that looked good in the mockup looks different in reality. Design HTML skips that middle step entirely. You give it a finalized design direction, and you get back a working page ready to use.

Every translation step is a place where things can go wrong. Skipping the mockup-to-page translation means what you designed is what you get. It also means you can go from 'I like this direction' to 'it's live on my site' in a single step instead of spending hours trying to recreate what you had in mind.

First, finalize your design direction — through a design session, a shotgun round, or just a clear description of what you want. Then run Design HTML with that direction. It produces a working page that matches your project's existing style, handles different screen sizes, and follows accessibility best practices. Always check the final result visually — sometimes what's built and what you see on screen can disagree slightly.

After a design direction is locked in. It's the last step in the design workflow — you explore with Shotgun, refine with Consultation, and ship with Design HTML. For this portfolio, every new section went through this exact flow.