Your AI builder has produced a working website. But visually, it feels like the same website everyone else is generating.
You ask for something more distinctive. The gradient changes, the cards get larger, and the overall style stays familiar.
If you use Lovable, Claude, Codex, Replit, or Cursor, you may have run into this problem: you know which websites you like, but translating that preference into implementation instructions takes work.
This article walks through a practical workflow with Preveo:
- Extract design guidance from a reference website.
- Put that guidance in a
DESIGN.mdyour AI builder can use. - Apply it to your own project.
- Evaluate the implementation and correct the differences.
Why another “make it modern” prompt may not help
“Modern” can mean a spacious editorial layout, a compact dashboard, or a bright product landing page. It does not specify the decisions your builder needs to make.
A useful design brief explains the relationships between elements: how headings compare with body text, how colors communicate hierarchy, how spacing groups information, and how repeated components stay consistent.
| Design area | What the guidance should clarify |
|---|---|
| Typography | Heading hierarchy, body text, and label treatment |
| Colors | Roles for backgrounds, text, accents, and borders |
| Spacing | Padding, gaps, and distance between sections |
| Layout | Content widths, alignment, and arrangement |
| Components | Shared styling for buttons, cards, and navigation |
Without this context, a builder has to fill in the gaps. Those guesses can take you back toward the same familiar visual patterns.
What is DESIGN.md?
A DESIGN.md is a Markdown file containing your project’s design guidance. It gives you a readable reference you can keep with the code, edit as decisions change, and share with teammates or AI agents.
It does not have a universal schema, and creating the file does not guarantee that every tool will discover it automatically. Explicitly tell your builder to read and apply it.
The useful part is the content: concrete rules that reduce ambiguity during implementation and review.
1. Extract a reference website’s design rules
Preveo’s extraction workflow is designed to turn a reference website into design instructions in under 30 seconds. Timing can vary by page and run.
To use it:
- Open the Preveo design-system macro.
- Click Use this Macro.
- Visit the website whose visual style you want to use as a reference.
- Open the Preveo extension and hit Run.
- Review the extracted typography, colors, spacing, layout rules, and component styles.
Choose a reference that fits the kind of product you are building. A marketing page can provide useful inspiration for your landing page, but it may offer little guidance for a complex settings screen.
2. Review the output before adding it to your project
The extraction gives you a starting point. Check that it captures the characteristics you actually want to carry into your project.
Ask yourself:
- Does the guidance explain the visual hierarchy?
- Are the color roles clear enough to apply consistently?
- Does the spacing guidance preserve the reference’s density or openness?
- Which components need additional rules for my product?
A visible page cannot establish every rule in a website’s internal design system. You may need to add guidance for forms, validation, loading states, or other interactions that the reference does not show.
Save the reviewed instructions as DESIGN.md in your project, or pass the content directly to your builder if that better suits your workflow.
3. Give the builder a scoped implementation task
Attach or reference the document and explain where it should apply. Here is an example prompt:
Read DESIGN.md and use it as the design reference for this project.
Start by applying it to the homepage:
- Follow its typography hierarchy and color roles.
- Use its spacing and layout principles.
- Apply consistent styles to repeated components.
- Adapt the reference to our content and responsive layouts.
- Preserve existing functionality.
After implementation, summarize any places where you had to
interpret or extend the design guidance.
Starting with one representative page gives you an opportunity to review the interpretation before extending it across the project.
Use your own branding, content, and assets. The reference should help you articulate a visual direction that fits your product.
Other Articles
Built With AI? Give Visitors a Reason to Trust Your Website.
Show the care behind your website with Preveo's Human Made Design Score badge. Evaluate your design, improve generic details, and share the results with visitors.
preveo.io
Top comments (0)