Give AI builders a design system with Refero Styles
Use a real site’s DESIGN.md as a starting brief for consistent typography, color, spacing, and components.
“Make it feel premium” leaves a coding agent to guess what that means. Refero Styles offers browsable design references from real websites, each with a DESIGN.md that describes visual choices such as color, typography, spacing, and component patterns. You can copy a relevant reference into an AI builder before asking it to create a screen.
The useful move is to turn a reference into a project-specific design brief. A DESIGN.md can guide several pages with the same type scale, color roles, layout rhythm, and interaction rules. Refero itself recommends using these files as references rather than templates to reproduce another website exactly.
Pick a reference that fits the job
Browse by product type or visual direction. A dense dashboard and a sparse editorial landing page need different systems, even when both look polished. Choose a reference whose content density and audience resemble your project, then inspect its DESIGN.md and the actual page.
Adapt the design rules
Copy the reference DESIGN.md into the agent’s context and state which parts to keep: type hierarchy, palette roles, spacing rhythm, borders, shadows, and component states. Replace brand-specific names, assets, and content with your own. Add requirements for mobile layout, keyboard focus, and reduced motion where relevant. Put the adapted rules in a project-level DESIGN.md if they should guide future screens.
Check more than the first screen
Ask the agent to apply the same rules to the hero, navigation, cards, forms, and responsive states. Review the rendered pages side by side. A written guide is useful only if the implementation follows it; revise any rule that produces an awkward result in the real product.
Copy a project brief
Use this original prompt with a chosen Refero Styles reference. Paste the reference DESIGN.md or provide its direct link and make sure the agent can read it.
Use this Refero Styles DESIGN.md as a visual reference for [project]: [paste DESIGN.md or link]. First inspect the current site and its existing design tokens. Create a short project-specific DESIGN.md covering typography, color roles, spacing, radii, borders, shadows, component states, motion, and responsive behavior. Adapt the reference to our audience, content, and brand; do not copy the source website or its assets. Implement [specific screen or component] using these rules, then compare desktop and mobile renders against the brief. Report any rules you changed and why.