Refero Styles is a library that analyzes the design of well-known product sites and publishes it as “DESIGN.md,” a Markdown file that AI coding agents can read as is. Visual rules such as colors, typography, spacing and components are organized in a single file, so when you load one into Cursor, Claude Code, Codex and similar tools, they can build UI that looks close to the site you picked. It is spun off from “Refero,” a design reference service that has collected a large number of real product screens. As of September 2026 it is available as a beta and holds more than 2,000 design systems.
Key Features
- A gallery of DESIGN.md files: For each well-known product site, you can browse the rules for colors, typography, spacing and components in DESIGN.md format. The site says new styles are added every week
- A format that works with major AI coding tools: The official site says the files can be used in Cursor, Claude, Codex, v0, Lovable and more. Because it is plain Markdown, you can drop it into a project and have any tool refer to it without being locked into one
- Browse by trending, popular or newest: You can switch the sort order while looking for styles, and you can also search by mood, such as “Apple-like”
- Integration with Refero MCP: The remote MCP server provided by Refero (
https://api.refero.design/mcp) includes a Styles research layer, so AI agents can look up and pull in styles during a conversation. Using the MCP requires a paid Refero plan
Pricing
| Plan | Price | What you get |
|---|---|---|
| Browsing Refero Styles | Free (beta) | Browse and search the gallery |
| Refero Pro | About $10/month billed annually ($120/year) | Refero’s main features, including MCP. MCP is capped at 8,000 calls per month |
| Refero Team | About $12/seat/month billed annually ($140/seat/year) | Refero plan for multiple members |
| Refero Lifetime | Check the official site | One-time purchase Refero plan |
Pricing is as of September 2026. The Pro and Team amounts come from secondary sources (comparison sites) as of September 2026 and could not be confirmed on the official pricing page. The MCP usage cap (up to 8,000 calls per month on Pro, Team and Lifetime) is stated in the official documentation. Please check the official site for the latest pricing.
This research could not confirm whether downloading a DESIGN.md requires signing in to a Refero account.
Pros & Cons
✅ Pros
- Instead of deciding colors and fonts from scratch, you can start from the rules of a real site and get to work right away
- Rather than vaguely asking the AI to “make it look nice,” you can hand it concrete rules, so the look of the generated UI varies less from run to run
- You can compare the design systems of several sites, which helps when weighing options before settling on a direction
- Browsing the gallery costs nothing, so it is easy to try
⚠️ Cons
- Because it is a beta, the collection and the way it is delivered may change
- MCP integration, which lets agents search and fetch styles automatically, assumes a paid Refero plan; the free option is mainly manual browsing
- A DESIGN.md is an analysis of an existing site’s look, so using it unchanged gives your project an impression very similar to someone else’s site. You need to adjust it to make it your own
Comparison with Similar Services
| Service | How it differs from Refero Styles |
|---|---|
| designmd.app | Another library that collects DESIGN.md files, published as open source |
| getdesign.md | A similar DESIGN.md collection site. Refero Styles differs in being run by the same team as Refero, which holds a screen archive, and in sharing its MCP |
| awesome-design-md (GitHub) | A free collection published on GitHub. Suited to people who want to work with it as a repository |
| Mobbin | Focused on searching screenshots of real product UIs and does not distribute files in DESIGN.md format |
Who Is It For
- Developers who build UI with Cursor or Claude Code and struggle to convey a design direction to the AI
- People working on side projects or prototypes who want a decent level of visual quality without a designer
- Designers who want to compare color and typography options across several real examples and settle on a direction early
- People who already use Refero and want to give the AI design rules in addition to a collection of screen references
Summary
When you let AI build UI, the features may work while the look ends up generic. Refero Styles adds “design rules to follow” to that process, and an easy way to start is to find a DESIGN.md for a site you like in the free gallery and try placing it in your own project. If you also want agents to fetch styles automatically, weigh the fact that it requires a paid Refero plan and MCP setup.