当你用 AI（Cursor / Claude Code / 各类 Agent）做网站时，最尴尬的不是“写不出代码”，而是——页面一眼就像 AI 生成的：布局松散、层级不清、组件风格不统一、细节缺少“设计感”。

要解决这个问题，关键不是让 AI “更会画图”，而是给它两样东西：明确的设计规范（design.md） + 真实世界的设计参考（Refero）。

1) design.md：把你的“审美与规范”写给 AI

你可以把 design.md 理解为：一个用 Markdown 写的轻量设计系统 / 视觉规范说明书。它的价值在于——让 AI 在生成页面之前，先“读懂你要的风格”，而不是凭默认审美乱发挥。

在 design.md 里，你通常会定义：

• 品牌与气质：关键词、语气、目标用户
• 色彩体系：主色/辅助色/状态色、对比度原则
• 排版：字体、字号阶梯、行高、标题与正文规范
• 布局与栅格：最大宽度、间距体系（8pt/4pt）、留白策略
• 组件规则：按钮、输入框、卡片、导航、表单、弹窗等的样式与交互
• 可访问性与响应式：断点、触控区域、可读性底线

把这些写清楚，AI 生成页面时就不再是“随机拼 UI”，而是在同一套规则下出图、出代码——这就是“去 AI 味”的第一步。

2) Refero：给 AI 补上“真实产品世界”的设计品味

但仅有规范还不够。

很多时候，AI 的问题是缺少“见过世面”：它不知道真实产品在相同场景下怎么做信息结构、怎么做流程、怎么摆组件，于是看起来就会“像模板”。

这正是 Refero 的定位：一个面向人类和 AI 的设计研究库，提供大量真实产品的屏幕、流程和模式，帮助你（和 AI）做出更好的设计决策。

Refero 还有一个很关键的能力：Refero MCP（Model Context Protocol）。

它能把 AI 代理接入一个“精选的真实产品界面库”，并让 AI 先研究再构建。Refero 的主张非常直接：

It studies before it builds — and the output looks designed, not generated.

也就是：在动手生成页面前，先看大量真实案例——输出自然更像“设计出来的”，而不是“生成出来的”。

（官方还强调一个痛点：AI 生成的页面常常都长得一样，一眼能看出来。）

3) 组合拳：design.md 定规则，Refero 定“品味与证据”

把它们结合起来，你就得到一个很实用的 AI 设计网站工作流：

1. 用 design.md 固定你的设计系统（风格、组件、排版、间距）
2. 用 Refero 做设计研究（找到真实产品中类似页面/流程的成熟解法）
3. 让 AI 在“规则 + 证据”下生成页面与代码

结果往往是：

• 层级更清晰、版式更稳
• 组件更统一、细节更像“做过设计系统”的团队
• 少走反复迭代的弯路（因为决策更有依据）

4) 一个可直接落地的小建议

如果你想立刻见效，可以从这两件事开始：

• 在项目根目录新增 design.md，先把颜色、字体、间距、按钮/表单四块写清楚
• 用 Refero 找 3–5 个你认可的真实产品页面，提炼共同点，并把这些“共同点”补进 design.md

当 design.md 逐渐积累成你的设计资产，AI 生成的页面就会越来越像“你们团队的作品”，而不是“某个模型的默认风格”。

https://refero.design

© 2026 EVAN.XIN · Attribution Required