用AI做网站太丑？一个设计参考神器帮你解决

用AI做网站，审美是最大的瓶颈

当我们用AI工具（如Cursor、Bolt等）来搭建或更新网站时，经常会遇到一个尴尬的问题：功能实现了，但界面就是不好看。 直接让AI agent帮你设计页面，出来的结果往往缺乏审美，配色混乱、排版粗糙，离专业水准差距明显。

这一现象背后有其技术根源。Cursor、Bolt等AI编程工具本质上是代码生成引擎，擅长逻辑推理和语法规则，但「审美」是一种高度主观且依赖大量视觉样本训练的能力。即便是GPT-4o或Claude这样的多模态模型，在生成UI代码时也倾向于输出「功能正确但视觉平庸」的结果——因为训练数据中「能跑通的代码」远多于「设计优秀的代码」。

问题的根源在于，AI并不天然具备设计品味。它需要一份明确的「设计规范」来指导输出——包括配色方案、字体选择、间距规则等。这种结构化约束将模糊的「好看」转化为AI可以精确执行的规则集，是解决审美问题的关键所在。而大多数人并不具备从零编写这份规范的能力。

那有没有一种方式，能让我们直接「借鉴」那些已经被市场验证过的优秀网站设计，并把它转化成AI能理解的格式？答案是有的。

宝藏工具：styles.referraldesign

在帮客户用AI更新品牌网站的过程中，我意外发现了一个叫 styles.referraldesign 的网站。它的核心价值非常简单——把市面上最受欢迎的网站设计规范，全部整理成了可下载的 Markdown 文件。

这个网站将大量热门产品的页面设计进行了拆解和归档，你可以通过 Popular（热门） 和 Trending（趋势） 两个标签页来浏览，快速找到适合自己行业的设计参考。无论你做的是SaaS产品、电商品牌，还是其他类型的网站，基本都能找到对标竞品的设计方案。

它到底提供了什么？

以 Cursor 的官网为例，点击进入详情页后，你会看到两个核心区域：

左侧：可视化设计规范

左侧完整展示了该网站的UI界面，并且将关键的设计要素清晰罗列出来：

• 配色方案：主色、辅色、背景色等完整色板
• 字体选择：使用了哪些字体家族
• 字号与行距：标题、正文、注释等不同层级的排版参数
• 间距规则：元素之间的留白逻辑

这个可视化界面不仅方便开发者理解，更重要的是可以直接展示给客户看，让客户对最终效果有直观的预期。

右侧：可下载的 design.markdown 文件

右侧则是这个工具的精华所在——一份结构化的 design.markdown 文件。这份文件包含了：

• 完整的设计指引（Design Guidelines）
• CSS Design Tokens（设计令牌）
• 针对AI agent的设计指令

这里有必要解释一下「CSS Design Tokens（设计令牌）」这个概念。Design Token 是将设计决策抽象为命名变量的方法，例如 --color-primary: #6366F1 或 --spacing-md: 16px。它最早由 Salesforce 的 Lightning Design System 推广，现已成为 Figma、Tailwind CSS 等主流工具的标准实践。对AI来说，Design Token 的价值在于它是「机器可读的设计语言」——AI不需要理解「这个蓝色看起来很专业」，只需要知道「主色调是 #6366F1，在按钮和链接上使用」，从而大幅提升生成界面的一致性。

你可能会好奇，为什么设计规范要用Markdown格式而不是PDF或图片？这背后有深刻的工程逻辑。Markdown是纯文本格式，可以直接作为Token输入到大语言模型的上下文窗口（Context Window）中，不需要额外的解析步骤。相比之下，PDF需要OCR转换，图片需要视觉模型处理，都会引入信息损耗。更重要的是，Markdown的层级结构天然契合LLM的理解方式——模型可以清晰识别「这是颜色规范」「这是字体规范」，从而在生成代码时精准调用对应规则。

你只需要把这份Markdown文件下载下来，直接喂给你的AI编程工具，它就能按照这套成熟的设计规范来生成页面。

对比之前的方案：awesome design.markdown

之前社区里流传过一个叫 awesome design.markdown 的项目，它收集了五十多种 design.markdown 文件，也是用来指导AI进行界面设计的。

但它有一个明显的短板：只有纯文本的Markdown文件，没有可视化的UI预览。 你无法直观地看到这份设计规范对应的实际界面效果，选择起来完全靠猜。

而 styles.referraldesign 的优势在于，它把「看得见的UI效果」和「机器可读的设计规范」完美结合在了一起，大幅降低了选择和使用的门槛。

实际工作流：5步搞定AI建站设计

整个使用流程非常简洁：

1. 浏览筛选：在 styles.referraldesign 上通过 Popular/Trending 标签，找到与你行业匹配的网站设计
2. 预览确认：通过左侧的可视化界面，确认设计方向是否符合预期
3. 下载规范：将右侧的 design.markdown 文件下载到本地
4. 喂给AI：把这份Markdown文件作为上下文提供给你的AI agent（Cursor、Claude等）
5. 生成页面：AI会严格按照设计规范来输出界面代码

这套流程的核心逻辑是：用人类已经验证过的优秀设计，来约束AI的输出质量。 你不需要自己懂设计，只需要会选参考、会下载文件，就能让AI产出专业级别的界面。

值得一提的是，使用他人网站的设计规范作为参考时，边界是清晰的：设计风格本身（如配色倾向、间距比例）通常不受版权保护，styles.referraldesign 提供的是对公开网站设计语言的「解构与归纳」，类似于设计师手动分析竞品的过程。建议将其作为「设计语言的起点」，再结合自身品牌特色进行调整，既能借鉴成熟设计的经验，又能保持品牌的独特性。

写在最后

在AI辅助开发越来越普及的今天，「设计规范」正在成为一种新的生产力资源。谁能更高效地获取和使用这些规范，谁就能在AI建站的质量上拉开差距。

styles.referraldesign 这类工具的出现，本质上是在解决一个核心问题：让不懂设计的人，也能用AI做出好看的网站。 如果你正在用AI做网站开发，强烈建议收藏这个工具，它会为你省下大量在设计上反复调整的时间。

核心要点

• styles.referraldesign 网站将热门网站的设计规范整理成可下载的 Markdown 文件，可直接喂给AI agent使用
• 每个网站的设计拆解包含配色、字体、行距、间距等完整规范，并提供可视化UI预览
• CSS Design Token（设计令牌）是将设计决策转化为机器可读变量的关键机制，是AI精准执行设计规范的基础
• Markdown格式相比PDF/图片，可直接输入LLM上下文窗口，无需额外解析，信息损耗最小
• 相比之前的 awesome design.markdown 项目，该工具增加了可视化界面预览，方便筛选和向客户展示
• 适用于SaaS、电商等各类网站开发场景，通过借鉴成熟设计规范来约束AI输出质量
• 核心工作流：浏览筛选 → 预览确认 → 下载Markdown → 喂给AI → 生成专业级界面