Refero Styles 指南 2026：用 DESIGN.md 给 AI 智能体注入真实设计品味（支持 Cursor、Claude Code）

---

结论先行：Refero Styles 是一个免费的 DESIGN.md 库，专门解决 AI 设计品味缺失

你的 AI 生成的界面是不是总有一种「AI 味」？

2026 年，这是开发者的共识：Claude Code 和 Cursor 写代码完美，但设计总是很普通。原因很简单——AI 模型是用代码和文本训练的，几乎没有学过真实的产品设计。

Refero Styles（https://styles.refero.design/）一步解决这个问题：

• 收录 2,000+ 个真实产品（Linear、Notion、ElevenLabs、Apple、Dub 等）的设计系统
• 每个样式都被提取为DESIGN.md（AI 可读的设计规范）
• 完全免费、无需注册——复制颜色、字体、间距、组件、Do/Don't 规则
• 粘贴到Cursor、Claude Code、Codex、v0、Lovable即可获得生产级 UI

简单说：它是全球最大的免费「教 AI 设计品味」的库。

Refero Styles 是什么？基本信息

服务概览

为什么 2026 年备受关注

1. DESIGN.md 成为开放标准（Google 于 2025 年末开源）
   • 以前向 AI 智能体传达设计只能靠模糊的提示词
   • DESIGN.md 是「写给 AI 读的设计规范」这一新标准文件
2. AI 编程智能体全面普及
   • 人人都用 Cursor、Claude Code 生成 UI -「AI 生成感」成为第一大痛点
3. 真实产品设计一键可用
   • Linear 的暗色 UI、Notion 的纸张质感、ElevenLabs 的温暖编辑风格
   • 立刻应用到自己的项目

DESIGN.md 是什么？（Google 开源的设计规范）

DESIGN.md 是写给 AI 智能体阅读的 Markdown 格式设计规范。

与传统设计令牌（Design Tokens）或风格指南不同，它面向 AI 而非人类浏览。

典型 DESIGN.md 结构：

• 设计原则：产品设计哲学（如 Linear =「午夜精密仪器」）
• 调色板：Brand、Accent、Neutrals 的实际色值
• 字体排印：字体与字阶（如 Minor Third 1.2 from 16px base）
• 间距与形状：间距、圆角、阴影
• Do / Don't：该设计允许和禁止的事项

Refero Styles 的每个样式页都以 DESIGN.md 形式呈现——直接复制交给 AI 智能体即可。

Refero Styles 的使用方法（详细步骤）

第一步：查找样式

打开 styles.refero.design。

• 首页展示热门 / 流行 / 最新样式
• 按品牌名搜索（如「Linear」「Notion」）
• 按分类筛选（Minimal Design、Clean SaaS、Soft Gradients、High Contrast 等）

第二步：复制 DESIGN.md

打开样式后，你会看到：

• 设计概念（一句话描述）
• 调色板（Brand、Accent、Neutrals）
• 字体排印（字阶、字体）
• 间距与形状（间距、圆角、阴影）
• 指南（Do / Don't）

原样复制。也可以保存为项目根目录的 DESIGN.md——Cursor 和 Claude Code 会自动读取。

第三步：粘贴给 AI 智能体

方法 A：直接粘贴到提示词（快速）

请按照以下 DESIGN.md 创建一个 SaaS 仪表盘：

[在此粘贴 DESIGN.md 内容]

方法 B：保存为项目中的 DESIGN.md（推荐）

把 DESIGN.md 放到项目根目录
→ Claude Code / Cursor 自动读取
→ 多次任务也能保持设计一致

第四步：生成高质量 UI

然后下达具体任务：

参照 Linear 的 DESIGN.md，创建一个任务管理仪表盘：
- 暗色主题（#08090a 为基底）
- 仅使用 #e4f222 作为强调色
- 卡片 12px 圆角、按钮 6px 圆角
- 用 0.5px 发丝线分隔，禁止阴影

结果：没有「AI 生成感」的生产级 UI。

各 AI 智能体的用法示例

Cursor

Cursor 能读取代码库，因此指向现有组件并补充 DESIGN.md最有效：

1. 指定现有组件文件
2. 在提示词中粘贴 DESIGN.md
3. 「在遵守本地设计系统的同时参考此规范」
4. 实现后：「对照 DESIGN.md 规则检查一遍」

Claude Code

将 DESIGN.md 放在项目根目录，Claude Code 在跨文件修改时也能保持设计一致：

1. 将 DESIGN.md 放到项目根目录
2. 「按照 DESIGN.md 新建设置页面」
3. 验证：「对照 DESIGN.md 检查字体、间距、对比度、移动端布局」

v0 / Lovable

这些是提示词驱动的工具，把 DESIGN.md 直接写进提示词即可：

[创建仪表盘]
按照 Linear 的设计系统：
- 暗色基底 #08090a
- 标题最大字重 590、Inter Variable
- 卡片 12px 圆角、按钮 6px 圆角
- 只用发丝线（禁止阴影）

实际体验评测（诚实版）

优点

• 「AI 生成感」真的消失了。用 Linear 的 DESIGN.md 生成的 UI，暗色层次、发丝线、强调色纪律明显不同。
• 2,000+ 样式免费。一定能找到你想模仿的品牌——Linear、Notion、ElevenLabs、Apple…
• 分类搜索好用。按意图浏览：Clean SaaS、Minimal Design 等。
• DESIGN.md 质量高。不只是色值，还包含 Do/Don't 规则，智能体不会乱猜。

不足

• 搜索以品牌为主。按颜色或氛围筛选只限于分类，更细的筛选（色相、字体）会更方便。
• 仅英文界面。非英语使用者一开始可能不习惯。
• DESIGN.md 内容为英文。非英语设计规范可能需要自行翻译。

注意事项

• 许可证意识：把真实产品设计系统作为参考没问题，但在商业产品中原样复制某品牌设计可能涉及商标/版权问题。参考和改编是安全路径。
• DESIGN.md 是方向性参考：无视本地设计系统、盲目遵循 DESIGN.md 可能造成不一致。保留现有系统，把 DESIGN.md 作为方向。

Refero 生态（不止 Styles）

Refero MCP

Refero MCP 是一个让 AI 智能体搜索并学习真实产品设计的 MCP 服务器：

Claude Code 安装：
claude mcp add --transport http refero https://api.refero.design/mcp --header "Authorization: Bearer <token>"

• 访问 142,000+ 屏幕和 12,000+ 用户流程
• 搜索引导页、付费墙、空状态、错误页等真实模式
• 需要付费的 Pro 计划

Refero Skill

通过 npx skills add https://github.com/referodesign/refero_skill 安装。一种设计方法论：让智能体先研究参考，再按字体、颜色、间距、动效的工艺规则进行设计。

读者想了解的内容

Q1. Refero Styles 免费吗？

是的，完全免费。无需注册，打开浏览器就能用。

Q2. DESIGN.md 应该放在哪里？

放在项目根目录的 DESIGN.md。Cursor 和 Claude Code 会自动读取。临时使用可直接粘贴到提示词。

Q3. 支持非英语设计吗？

Refero Styles 界面只有英文，但可以翻译 DESIGN.md 内容。也可以浏览寻找接近你目标美学的样式。

Q4. 可以商用吗？

参考和改编没问题。在商业产品中原样模仿特定品牌设计需要警惕商标/版权问题。

Q5. 除 Cursor 和 Claude Code 外还能用吗？

可以——Codex、v0、Lovable、Antigravity、Manus以及任何能读取 DESIGN.md 的智能体都支持。

Q6. 与 Refero MCP 的区别？

Refero Styles = 人类浏览并复制 DESIGN.md。Refero MCP = AI 智能体直接通过 API 研究设计（付费 Pro）。

Q7. 消除 AI 生成感的技巧？

1. 粘贴 DESIGN.md（哪怕只有颜色和字体）
2. 强制执行 Do/Don't 规则（如「禁止阴影」「禁止粗体」）
3. 一次只做一个屏幕（一次性生成整个应用容易崩）
4. 实现后对照验证（与 DESIGN.md 比较检查）

总结：用 Refero Styles 告别「AI 生成感」

Refero Styles 是 2026 年提升 AI 设计品味最快、最免费的方法。

• 免费获取 2,000+ 真实产品设计系统，以 DESIGN.md 形式
• 粘贴到 Cursor、Claude Code、Codex、v0、Lovable即可获得高质量 UI
• DESIGN.md 是 Google 开源的标准格式，未来会更普及

在 AI 编程成为常态的今天，「会写代码」和「会做设计」的差距，取决于你是否使用 DESIGN.md。

打开 Linear 的样式，把 DESIGN.md 放进项目根目录，5 分钟内「生成感」就会消失。

相关文章

• 2026 年获取 DESIGN.md 的 10 个最佳网站：AI 智能体设计规范文件
• 【2026】用 component.gallery 让 AI 的 UI 生成指示大幅提升！组件术语图鉴的活用方法
• 【2026】pxpipe 完全指南！把 Claude Code 的 API 费用削减 59〜70% 的省钱工具