How to Build an Original Website from a Design Reference
A step-by-step workflow for moving from a visual reference to an original, accessible website with an AI coding agent.
Build from a reference by extracting its design logic before writing code. Define your audience and conversion goal, document the reference’s hierarchy and interaction patterns, replace its content with your own truth, then ask the coding agent to implement and test one page at a time.
Start with the job, not the screenshot
Write one sentence describing what the visitor should understand and do. This prevents a visually impressive reference from turning into a page with no useful message or route through the product.
Collect the source material before prompting: product facts, customer language, images, logos, links, and any legal or accessibility constraints. The coding agent can arrange supplied truth; it should not invent proof for you.
Extract the reusable design system
Describe the reference in a vocabulary your agent can act on: type scale, contrast, grid, spacing, image treatment, motion, component order, and responsive behavior. Call out what is essential and what is decorative.
Use a small set of acceptance checks. The page should have one clear H1, a readable mobile layout, visible keyboard focus, useful alternative text, and a primary action that remains obvious when animation is removed.
- Message and content hierarchy
- Layout and responsive rules
- Typography, color, and contrast
- Motion triggers and reduced-motion behavior
- Performance and accessibility constraints
Iterate in narrow, reviewable slices
Ask for the shell and first section first, review it, and then add the next meaningful section. Smaller iterations expose incorrect assumptions earlier than a single prompt that asks for an entire site without checkpoints.
Keep the reference page and your implementation clearly separated. Link to the original when appropriate, credit the source, and use your own content and assets in the finished site.
Common questions
Should the reference be included in the prompt?
Yes, when you have permission and the tool supports it, but explain the decisions you want to learn from. Pair the reference with your own content, constraints, and acceptance criteria.
How do I avoid a generic AI-generated result?
Provide specific audience language, real proof, concrete layout rules, and a review loop. Reject invented claims and vague placeholder content before polishing the visuals.