Turns evidence from competitors and best-in-class references into many hero-section explorations, mood boards, an HTML proof, and a documented site system that stays human-reviewed through publishing.
Website work can drift when research, imagery, layout references, and implementation live in separate conversations. This workflow uses real competitor and category evidence to shape an inspectable HTML proof, then makes the approved design rules executable before the site expands.
Each stage leaves an inspectable artifact, so the system can scale without quietly losing the approved direction.
Collect existing business information, competitor patterns, and best-in-class website examples while keeping facts separate from inspiration.
Create many hero-section explorations and mood boards spanning typography, colour, imagery, composition, and material treatment.
Compare, annotate, and select the strongest direction against the audience, offer, brand assets, references, and page requirements.
Convert the selected direction into a working, selectable, responsive HTML page so layout and hierarchy can be judged in a browser.
Once the proof is approved, create a DESIGN.md and an HTML style guide covering typography, color, spacing, imagery, components, motion, and accessibility.
Build the remaining routes and reusable components, then check them against DESIGN.md for drift in tokens, responsive behavior, content rules, and source truth.
Capture real breakpoints, review the rendered site, resolve mismatches, and publish only after a person accepts the final surface.
The implementation stack follows the real project. Source truth, executable design rules, and human review are the stable parts.
Output
Hero explorations, mood boards, the selected visual direction, an HTML proof, DESIGN.md, an HTML style guide, responsive pages, lint evidence, and the reviewed production site.
Review
Source approval, direction selection, design taste, narrative hierarchy, claim safety, brand fit, accessibility judgment, design acceptance, and the final decision to publish.
Public examples use approved assets and accessible routes; private client material, credentials, and unreleased work stay out. Generated imagery is identified in source notes, exact references are not silently substituted, and a visually plausible mockup is never treated as implementation proof until the real browser surface is captured and tested.