Jonathon's AI Wiki

Refero Styles — Design Systems for AI Agents

9 min read

Source: Refero Styles homepage, Refero Styles — Linear sample, Refero parent product, Refero on Product Hunt

Refero Styles is the AI-agent-facing arm of Refero — an established design-research library — that extracts the visual DNA of real shipped products into structured, copy-paste-able design tokens plus a DESIGN.md payload an AI coding agent can consume directly. Where Refero’s parent surface is a curated library of 60–112k product screenshots and user flows for human designers, Refero Styles narrows in on the style layer itself: open any brand and you get its color palette, type system, spacing, border-radius/shadow scale, component recipes, do/don’t rules, and ready-to-paste CSS Custom Properties + Tailwind v4 @theme blocks. Pairs with Refero MCP (launched Product Hunt 2026-03-10), which connects this library to Cursor, Claude, and Windsurf so a coding agent can search-and-study before it builds.

Key Takeaways

  • It’s “design taste, extracted.” Each style page reverse-engineers a real product (Linear, Stripe, Anthropic, OpenAI, Cursor, Mercury, Raycast, Airbnb, ElevenLabs, Superhuman, n8n, Bun, JetBrains, Midjourney, etc.) into a structured token system plus an “Agent Prompt Guide.”
  • The DESIGN.md payload is the deliverable. Each style page ships colors with semantic tokens (--color-pitch-black: #08090a, --color-neon-lime: #e4f222), full type stack with substitutes (Inter Variable / Berkeley Mono → IBM Plex Mono fallback), spacing scale on a 4px base unit, border radius per element, shadow tokens, surfaces (4-level elevation), component recipes, do/don’t rules, and a Quick Start CSS + Tailwind v4 dump.
  • An “Agent Prompt Guide” section is purpose-built for coding agents. Every style page includes a quick color reference (text/background/border/accent/primary action) plus 3–5 example component prompts written in agent-ready spec-prompt form (“Create a CTA button: Neon Lime background (#e4f222), Pitch Black text (#08090a), Inter Variable weight 590 at 15px, 6px border-radius, 12v/24h padding”).
  • Refero MCP is the agent integration. Marketed as “Give your AI agent design taste + prevent generic AI design.” Connects Cursor, Claude, Windsurf and other AI coding tools to the curated Refero library so the agent can pull multiple references and synthesize a direction before generating code.
  • Status: Beta. Refero Styles itself is labeled Beta on the homepage as of 2026-05-01. The parent Refero product has been shipping since March 2023; this is the fifth named launch of the product family.
  • Library scale (parent product). Self-reported numbers diverge across sources: “112,000 web pages and iOS screens” per UI UX Showcase listing, “12,000+ pages and 60,000 screens” per gooddesign.tools, “66,000 proven web & iOS designs” per Refero 3.0 launch (June 2024), “6k user flows” added in Refero 4.0 (May 2025). The current homepage emphasizes “fresh updates weekly” rather than a hard count^[ambiguous].
  • Sort and filter is taste-first. The Styles homepage offers Trending / Popular / Newest plus aesthetic-family tags: Minimal Design, Clean SaaS, Editorial Type, Soft Gradients, Monochrome UI, Playful Design, High Contrast, Premium Design — analogous to the awesome-claude-design aesthetic-family prompt system.
  • Each style includes a “Similar Brands” cluster so an agent (or human) can branch out to related visual languages — e.g., Linear → Vercel / GitHub / Notion-dark / Raycast.
  • Reviewer signal is strong but cautious. 4.9★ / 16 reviews on Product Hunt; reviewers praise the grounding in real shipped patterns (vs Dribbble-style shots) and the time saved on design research. The two recurring asks are tighter screen grouping into complete flows and more frequent library updates.

How It Fits the AI Web Design Stack

Refero Styles slots in alongside three patterns already documented in the wiki:

PatternLives atRefero overlap
Hero / page prompt librariesMotionSites (paid), Claude Design prompt examples (free)MotionSites sells full-page spec-prompts; Refero ships brand-DNA spec-prompts. Complementary, not overlapping.
DESIGN.md format for AI agentsawesome-design-md (VoltAgent) + Google StitchRefero generates DESIGN.md output per brand at scale (one DESIGN.md per shipped product); awesome-design-md curates them by hand. Refero is the “industrial pipeline” version.
MCP for design contextFigma MCP, essential MCP serversFigma MCP exposes your own design system; Refero MCP exposes a curated catalog of others’. Both feed the same coding agent.

The defensible value: the agent that gets a Refero-style brand DNA before generating UI no longer produces generic AI slop — it inherits the constraint set of a real product.

Sample Style Page — What You Get (Linear)

Source: full Linear style export

  • Theme description: “Midnight Command Center: A dark, layered interface lit by precise accents, like a high-tech control panel.”
  • 19 named colors with semantic tokens — Pitch Black, Graphite, Deep Slate, Charcoal Grey, Muted Ash, Gunmetal, Porcelain, Light Steel, Storm Cloud, Fog Grey, Alabaster, Neon Lime (the single CTA accent), Aether Blue, Forest Green, Cyan Spark, Emerald, Warning Red, Deep Violet, Amethyst.
  • Two font families with substitutes — Inter Variable (weights 300/400/510/590 with -0.22 → -0.1 letter spacing) + Berkeley Mono (fallback IBM Plex Mono).
  • Type scale on Minor Third (1.2) from 16px base — caption 10px, body 14px, heading 24px, heading-lg 48px, display 72px (each with token name, line-height, letter-spacing).
  • Spacing scale — 4px base, compact density, 16 named values from 4 to 128.
  • Border radius per element — pill 9999, tags 2, cards 6, badges 4, inputs 6, buttons 6, default 6.
  • 6 shadow tokens including --shadow-sm (rgba(0,0,0,0.4) 0px 2px 4px 0px) and a 4-line stacked subtle shadow.
  • 10 component recipes with full CSS spec — Primary Action Button, Ghost Navigation Button, Subtle Link Button, Navigation Item Button, Default Card, Elevated Card, Nested Card, Input Field, Subtle Input Field, Badge.
  • 4-level surface hierarchy — Pitch Black Canvas (base) → Graphite Card → Deep Slate Elevated Card → Charcoal Grey Overlay.
  • Imagery and Layout descriptions — narrative-form rules (“UI elements and product screenshots dominate; abstract graphics minimal; icons filled, minimalist, mono-color”).
  • Agent Prompt Guide — 3–5 ready-to-paste component prompts.
  • Similar Brands — Vercel, GitHub, Notion (dark mode), Raycast.
  • Quick Start — full :root { --color-... } CSS Custom Properties block AND a Tailwind v4 @theme { ... } block, both populated.

Implementation

Tool/Service: Refero Styles + Refero MCP

Pricing: Refero offers a 7-day free trial with full access. Pricing page lives at refero.design/pricing (not extracted in this pass — flagged in _research-agenda). Refero MCP availability/cost relative to standard Refero subscription is not surfaced on the homepage.

Setup (Refero Styles, browser):

  1. Visit https://styles.refero.design/.
  2. Sign up via Google or Email (the parent refero.design account works).
  3. Browse by aesthetic tag, brand search, or “Similar to URL.”
  4. Open a style → scroll to Quick Start → copy the CSS Custom Properties block or the Tailwind v4 @theme block.
  5. Paste into your codebase. Drop the Agent Prompt Guide into your agent’s instructions (or a DESIGN.md in the repo) so it generates components consistent with the chosen style.

Setup (Refero MCP): Get the MCP at https://refero.design/mcp; integrates with Cursor, Claude (Code/Desktop), Windsurf. Specific install commands and tool surface not extracted in this pass — flagged.

Integration notes:

  • The Tailwind v4 @theme block is drop-in for projects already on v4. For Tailwind v3, use the :root CSS custom properties version and reference them in tailwind.config.js.
  • Treat the “Substitute” line on each font family as the production fallback when the original isn’t licensed (e.g., Berkeley Mono → IBM Plex Mono on Linear’s spec).
  • Component recipes are descriptive, not code — the agent generates the JSX/HTML; Refero supplies the spec.

Try It

  1. Pick a style your project should look like. Open styles.refero.design, search the brand or filter by aesthetic. For a serious dark-mode tool, start at Linear; for warm editorial, look at Anthropic; for clean SaaS, start at Stripe.
  2. Drop the Quick Start block into your repo. Copy the Tailwind v4 @theme block (or CSS Custom Properties) into app/globals.css or equivalent.
  3. Save the Agent Prompt Guide as DESIGN.md in the repo root. Include the quick color reference and the 3–5 component prompts. Now any Claude / Cursor / Windsurf agent has the design constraint baked into context — see the DESIGN.md format pattern for full conventions.
  4. For repeat use, install Refero MCP so the agent can pull a fresh style mid-session without leaving the IDE — useful when iterating on a redesign or comparing two visual directions.
  5. Cross-reference with awesome-claude-design for aesthetic-family prompt patterns when you want to mix Refero’s brand DNA with a different overall mood (e.g., apply Linear’s color discipline but in a softer, “editorial type” tone).

Open Questions

  • Refero MCP install + tool surface. What does the MCP expose — search by brand? search by tag? fetch_style returning full DESIGN.md? Not extracted in this pass.
  • Pricing tiers. What does Refero cost beyond the 7-day trial? Is Refero MCP included in the standard plan or priced separately?
  • Coverage breadth. How many brands have a complete Refero Styles entry vs being only on the parent screenshot library? Featured grid shows ~30; total catalog count not stated.
  • Update cadence. Reviewer feedback flags update frequency as the main concern. How often does a brand’s style entry refresh when the source product redesigns?
  • License of generated DESIGN.md output. Is the extracted token system + agent prompt guide free to use commercially in client work, or tied to subscription state?
  • Comparison to Mobbin’s emerging AI-tooling. Mobbin has Figma integration and a much larger flow library; whether they’re shipping a comparable agent integration is worth tracking.

Graph View

Backlinks