My Recipe for Building Designer Websites with AI

Here's the exact process I use, from Pinterest board to live, locally-owned website.

1. Gather Inspiration from Pinterest

Start a board and pin anything with the right feeling, even from unrelated industries — a perfume brand's typography, an architecture site's whitespace, a SaaS page's scroll animation. Save full-page screenshots (not just crops) so hierarchy and spacing come through, plus a few close-ups of buttons and hover states.

2. Feed the Inspiration to Any LLM

This is the most important step.

Upload the Pinterest images to any LLM (preferably Claude or Z.AI) with a refined prompt that asks it to analyze the attached images and understand the design system behind them - layout grid, type scale, spacing rhythm, motion language, color logic, and overall mood - rather than jumping straight to building anything.

This turns a vague "I like this" into an explicit, written design language, structured as a build brief the next tool can act on directly.

For example, here's what my prompt does:

Input — take the brief and reference images as raw material
Concept — force a single-sentence idea before any visuals happen
Analyze — dissect the references (color, type, composition, motion) piece by piece
Abstract — pull out the rules behind those pieces, not the pieces themselves ("Design DNA")
Translate — convert each rule into something new, not a copy
Systemize — lock the rules into reusable tokens (color, type, spacing, radius, shadow)
Compose — apply those tokens to actual layout and focal points
Rhythm — vary density/scale/tone across sections so nothing feels repetitive
Narrate — treat scroll as a story arc (arrival → conversion → exit)
Storyboard — sketch the major "scenes" before writing animation code
Animate — apply the derived Motion DNA using classical animation principles
Prioritize — decide what's allowed to move and what stays still
Interact — define clear cause-and-effect for every user action
Signature — build one memorable, concept-native interaction
Continuity — make elements visually evolve across sections/routes instead of resetting
Choose — pick the leanest tech (CSS → GSAP → Three.js) for each effect
Optimize — protect performance (60fps, transform/opacity only, lazy-load)
Adapt — recompose (not just shrink) for each breakpoint, motion included
Access — enforce contrast, keyboard nav, reduced-motion support
Write — draft real-feeling placeholder copy that respects hierarchy
Componentize — build reusable pieces without over-abstracting
Unify — force every new element to inherit the design system or get rejected
Restrain — refuse trendy effects unless the concept actually earns them
Originate — guarantee the output doesn't reproduce the reference's actual assets
Sequence — follow the fixed build order (concept → structure → design → motion → build → polish)
Specify — write a section-by-section spec before touching code
Review — run the design/motion/UX/responsive/technical QA checklist
Critique — adversarially attack your own output (strongest/weakest/cut list)
Judge — hold the result against the final bar: concept over decoration, hierarchy over effects

3. Build with Lovable / z.ai

Bring three things into agent mode: the structured design analysis from step 2, the original Pinterest images (attached directly, not just described), and the agent itself. The images act as a visual check against the written analysis - two channels of signal instead of one.

Logical Next Steps...

1. Extract a Reusable Design System

Once the site feels right, ask the builder to pull out a standalone design system - palette, type scale, spacing, components, animation curves. This turns one-off good decisions into a reusable asset for your next project.

2. Move to a Local Environment

Clone the repo, install dependencies, and run it locally.

Use tools like Opencode.ai

This hands you real Git history, full control over the stack, and independence from any hosted builder's uptime or pricing.

Hook your website to a database, create a CMS if you will, create new sections in the website etc.

My Recipe for building designer landing pages