Design · Web app
Refero Styles
AI-readable DESIGN.md style references extracted from popular websites.
Refero Styles is a browsable directory of over 2,000 design systems extracted from top product websites into machine-readable formats. Each style profile breaks down color tokens, typography scales, spacing, shadows, and component rules so AI coding assistants can generate consistent, polished UIs.
What it's for
- Provide design context to AI coding tools like Cursor, Claude Code, and v0
- Export site color palettes and typography rules as Tailwind v4 or CSS variables
- Explore UI patterns, aesthetics, and design direction for new web projects
Features
- Over 2,000 indexed website design systems and style profiles
- Exports in DESIGN.md, Design JSON, Tailwind v4, CSS Variables, and Design Tokens
- Detailed breakdown of color tokens, typography specs, spacing, and radius rules
- DO and DON'T style guidelines for consistent AI generation
- Integration support for AI workflows via Model Context Protocol (MCP)
Pricing
Free to browse and export during beta.
Details
- Type
- Web app
- Category
- Design
- Topic
- Design Systems
- Open source
- No
- Platforms
- Web
- For
- Developers and designers using AI tools to build web interfaces.
- Alternative to
- Open Design, designmd.me
- Tags
- design md, design systems, ui inspiration, tailwind, ai coding, design tokens
Why it was saved
- @bbssppllvv: Solves 'agents make ugly UIs because they've never seen good design': paste a URL or search a style (Minimal Design, Clean SaaS, Monochrome UI, High Contrast, etc.) and get an extended style reference — color tokens with hex values, typography specs, spacing/radius/shadow tables, DO/DON'T guidelines — exportable as DESIGN.md, Design JSON, Tailwind v4, CSS Variables or Design Tokens, with copy/download buttons.
- @askwhykartik: DESIGN.md generation is a trending workflow for design-consistent AI coding; keeps all generator options in one place.
Related
Curated collection of plain-text design systems extracted from popular tech websites.
Quick typography, color palette, and iconography reference for clean product interfaces.
Open-source, token-driven design system and Figma UI kit by GR8 Tech.
Architectural framework categorizing LLM workflows and autonomous agent patterns
Curated UI and UX checklists for websites, apps, and user flows
A concise spec sheet of typography, colors, and radii for minimal UI
Updated