Method · Design Extrapolation
One homepage design in, a full CMS-driven site out, in about 25 engineering hours
Design Extrapolation: building the pages a designer never drew, inside the designer’s own system, directly in code. Shown on the relaunch of a boutique consultancy’s website.
~25 h
Logged engineering hours from one approved homepage to a full CMS-driven site
1 → 5
One designed page extrapolated into five page templates, with no second mockup
~20
AI-generated images that read as a single art direction. No stock photography
15
Issues found and ranked in the SEO audit before a single article moved
01
The problem
A consultancy that sells sophistication to enterprise buyers was stuck on a template website that undercut it. The founders could barely edit it, its articles carried years of inherited SEO debt, and they did not want to call a developer every time a sentence changed.
A conventional rebuild designs every page before development starts, and every change goes back through mockups. The firm needed the polish of a custom site and full ownership of its content after launch, without paying for a cross-functional team.
02
Why it was hard
- Only one page was designed. About, Contact, the article archive with filters and pagination, the article template, the success states and all the scroll choreography had to be invented in code and still look like the designer drew them.
- The headline animates word by word with a highlighted accent word. Making it editable by non-developers without breaking the animation needed a content model, not just a text field.
- Generic CMS forms confuse non-technical owners, and nothing stops them from publishing metadata that search engines will cut off.
- No stock photography and no budget for a shoot, yet every hero, card and sharing image had to feel like one coherent art direction.
- After the first review, a whole page was cut and another was redesigned around booking calls.
03
What we built
A designer created one master homepage that defines the visual system: color, type, spacing, components and motion. From there, an engineer working with an AI coding agent built every other page and component straight into production code, alongside the CMS, the image pipeline and the SEO migration.
04
Where the innovation is
01
Extrapolate the design, don’t replicate it
The master page is the single source of truth. Instead of mocking up every page, the AI coding agent works inside its tokens and patterns and infers components that never existed in the design, like article cards, filter pills, pagination and the contact form, so they feel native to the system. The engineer makes the architecture, UX and taste calls; AI closes the gap between decision and code.
02
A brand system as a structured prompt
The image generator never takes a free-text prompt. Every request is wrapped in a brand specification: identity, mood, palette with usage notes, technique and an explicit list of things to avoid, plus a preset for each slot, from hero to social sharing image. Every output is labeled as AI-generated for provenance.
03
A CMS shaped like the page
Each page in the CMS is organized into the same blocks the visitor sees, named after them, so the founders navigate the CMS the way they navigate the site. Custom fields show live character counters and refuse to save SEO titles and descriptions that search engines would cut off, and a media field lets them browse, search and upload images without leaving the page.
04
Editable copy that keeps its animation
The animated headline is a single field with an inline marker for the accent word. The component reads the marker and builds the word-by-word animation from it, so the founders can rewrite the headline and the choreography follows.
05
A migration treated as an SEO audit
The old content was extracted and audited before anything moved: issues ranked from critical to low, titles rewritten to fit, keyword-stuffed descriptions replaced. Metadata now comes from the CMS on every page, and the site ships with a sitemap built from its content and an llms.txt for AI assistants.
05
Art direction and SEO, as code
Two parts of the project that usually depend on someone remembering the rules were turned into systems that enforce them: the brand look of every generated image, and the limits of every page’s search metadata.
Every image request, wrapped in the brand
The structure of the specification every generated image goes through. Values are generalized.
Image request
Brand specification + slot preset
- Identity
- Voice and mood
- Palette
- Fixed, with usage notes
- Technique
- One illustration style
- Format
- Preset per slot
Always excluded
- Text inside images
- Stock-photo clichés
- Photorealistic faces
Search metadata, before and after the migration
Length in characters. Search engines cut titles around 60 and descriptions around 160; the CMS now refuses to save anything longer.
06
Results
- A full custom site built in about 25 logged engineering hours, from one approved homepage design.
- Five page templates, two dozen UI components and the scroll choreography, none of them mocked up first.
- A CMS the founders navigate the way they navigate the site, with fields that refuse search metadata over the limit.
- About twenty brand-consistent AI images, sharing images included, and no stock photography.
- Every article migrated with its SEO cleaned up, plus a sitemap built from the content and an llms.txt for AI assistants.
- A page cut and another redesigned after the first review, absorbed in a single working session, because nothing lived in mockups.
- Thirteen editor and architecture guides handed over with the site.
07
What we learned along the way
The master design is what makes it work
AI extrapolation is only as good as the system it extrapolates from. With a strong master page, the agent produces components that feel designed. Without one, it produces generic output fast.
Knowing when to drop an AI output
Generated background videos were made, judged against the design and removed. A map embed was replaced with a generated illustration that fits the system. Speed is worthless if the result does not belong.
Hours are not the whole timeline
Engineering took about 25 hours, but the calendar ran for weeks, including a long pause waiting for content. Once production gets this fast, the bottleneck moves to content and decisions, so that is where planning has to go.
Stack
- Next.js
- React
- TypeScript
- Tailwind CSS
- GSAP
- Git-based headless CMS
- Custom CMS fields
- Gemini image models
- Resend
- Vercel
- llms.txt
- AI coding agent
Need a site your team can actually run?
We turn one strong design into a complete site and a CMS your team can own, without months of mockups in between.
Book a discovery sessionClient identity, brand, copy and visuals are withheld under confidentiality agreements. Hours come from the engineering log and do not include design time.