Refero Styles

让 AI 写网页时，最常见的问题是界面一眼看出「AI 味」：字体、间距、圆角和配色每次都要重新猜。Refero Styles 是 refero.design 推出的设计系统库，目前标注为 Beta，收录 2,000 多个真实产品网站的设计语言。每一套都整理成一份 DESIGN.md，写清楚颜色、字体、间距、圆角、组件和页面密度，AI 工具可以直接读取后照着做。

核心定位与用途

很多人做前端时会先给 AI 一句「做得高级一点」，结果仍然是通用模板。Refero Styles 的思路不同：它不让模型凭空想象审美，而是先找到一个真实网站，把它的设计语言提炼成可执行的规范，再交给智能体。官网说明，这些设计系统按产品网站拆解，每周都有新增。

和直接截图参考相比，DESIGN.md 是结构化的文字规范，智能体能逐条遵守。它的侧重点是「风格约束」，而不是页面组件代码：拿到规范后，仍需要你自己决定页面内容与交互。

适用场景

1. 独立开发者做落地页：先在库里找一套接近目标气质的设计，把对应的 DESIGN.md 放进项目，再让 Claude Code 或 Codex 生成页面，减少反复修改配色和间距的时间。
2. 设计师与前端的对齐：设计师挑选一套设计系统作为参考，前端把它转成 DESIGN.md，双方围绕同一份规范讨论，而不是对着截图猜。
3. 在 Cursor 或 Lovable 里统一风格：官网列出的兼容工具包括 Cursor、Claude Code、Codex、v0 和 Lovable，同一个项目里多次生成的页面可以保持一致的视觉语言。

如果你想让智能体本身就带一套前端设计的判断，可以先看 frontend-design 这个 Skill。它负责的是设计的方法和判断，Refero Styles 提供的是具体的参考样本，两者可以叠加使用。

上手与局限

打开 styles.refero.design 即可浏览设计系统，每套设计都有颜色、字体和组件的说明。官网还提供 MCP 接入入口，方便在 AI 助手里直接检索。

局限有三点。第一，产品处于 Beta 阶段，收录范围和稳定性会继续变化。官网说明每周都有新增，但具体数量与更新节奏以站内为准。第二，设计系统都从公开网站提炼，参考时要留意版权与品牌边界，不要把别人的品牌元素直接搬进自己的产品。第三，官网没有标明价格或免费额度，本条目因此不写定价。