Refero Styles

The most common giveaway in AI-built web pages is the generic look: fonts, spacing, corner radii and colors get guessed again on every run. Refero Styles is a design system library from refero.design, currently labeled Beta, with more than 2,000 design systems drawn from real product websites. Each one is distilled into a DESIGN.md that spells out colors, typography, spacing, radii, components and page density, so an AI tool can read it and follow it.

Core Purpose

A common first attempt is to tell an AI to “make it more premium,” and the result still looks like a template. Refero Styles takes a different route. It does not ask the model to invent taste from nothing. It starts from a real website, extracts its design language into a usable specification, and hands that specification to the agent. According to the site, the systems are broken down from product websites, and new ones are added every week.

A screenshot can inspire a designer, but a screenshot is hard for an agent to obey line by line. A DESIGN.md is structured text, so the agent can check its output against specific rules. The file governs style, not page content or components. You still decide what the page says and how it behaves.

Key Scenarios

1. Solo developers building a landing page: Browse the library for a system close to the target mood, drop its DESIGN.md into the project, and ask Claude Code or Codex to build the page. You spend less time correcting colors and spacing after each generation.
2. Aligning designers and frontend engineers: A designer picks a reference system, the frontend team turns it into a DESIGN.md, and both sides discuss one written spec instead of comparing guesses against screenshots.
3. Keeping one style across tools: The site lists Cursor, Claude Code, Codex, v0 and Lovable as compatible tools. Pages generated across those tools for one project can share the same visual language.

If you want the agent itself to carry frontend design judgment, read the frontend-design skill first. It supplies the method, while Refero Styles supplies concrete reference samples, and the two work together.

Trying it and its limits

Open styles.refero.design to browse the systems. Each one includes notes on colors, typography and components. The site also links an MCP connection for searching the library from inside an AI assistant.

Three limits matter. The product is in Beta, so coverage and stability will keep changing. Every system is extracted from a public website, so check copyright and brand boundaries before copying a brand’s distinctive elements into your own product. The official site does not state pricing or a free allowance, so this entry gives no price. Confirm current terms on the site before you rely on it.