一个 markdown 文件，让 AI 做的 UI 从「一眼 AI」变成「一眼大厂」
用 AI 写过前端的人，大概都经历过这种落差：第一次看到 AI 三秒钟吐出一个完整页面——“卧槽好强”。
用 AI 写过前端的人，大概都经历过这种落差：
第一次看到 AI 三秒钟吐出一个完整页面——“卧槽好强”。
第二次仔细看——“怎么跟上次长得一模一样？”
蓝色渐变背景，白色卡片，圆角按钮，左边标题右边插图。不管你做的是 SaaS 工具、电商后台还是个人博客，AI 给你的页面，永远是同一张脸。
Anthropic 自己也在解决这个问题。Claude 内置了一个 frontend design skill，专门提升 AI 生成 UI 的设计质量，用了之后确实比裸跑好不少。但说实话——如果你本身对前端设计没什么审美积累，光靠一个 skill 还是很难做出真正让人眼前一亮的东西。
因为问题的根源不在工具，而在于：大多数非设计师，根本描述不出自己想要的”好看”是什么。
你知道自己不想要 Bootstrap 默认蓝，但你也说不出你想要什么。你能感受到 Notion 和 Spotify 的页面”气质不一样”，但要你把这个差异写成 AI 能理解的指令？太难了。
最近发现一个开源项目，换了一种思路解决这件事——
你不用描述好看是什么，直接把大厂的”好看”打包成一个文件，丢给 AI 就行。
一个文件，把大厂的设计语言喂给 AI
项目叫 awesome-design-md，GitHub 上已经收录了几十家公司的设计系统。
做的事很直觉：把 Notion、Spotify、Vercel、Figma 这些公司官网的视觉语言——颜色、字体、间距、圆角、按钮样式、排版规则——全部提炼成一个 markdown 文件，叫 DESIGN.md。
你把这个文件和 prompt 一起丢给 AI（Claude、Cursor、ChatGPT 都行），它生成的页面就不再是千篇一律的 AI 默认风格，而是带着那家公司的设计基因。
效果到底差多大？我做了一个实验。
同一句 prompt，四种设计系统，四个平行世界
为了让对比公平，严格控制变量：
Prompt 完全固定——一个叫 MagicAI 的虚构产品官网首页，导航栏、Hero 区、三个特性卡片、社会证明、底部 CTA、Footer，文案一字不改。
唯一变量——替换不同品牌的 DESIGN.md。
生成工具——统一用 Claude Cowork 生成 HTML 页面。
选了四个风格反差足够大的品牌：Claude、Spotify、Vercel、Figma。
截图未做任何后期修改，直接看。
先别急着看标题——猜猜下面四张图，分别是哪家公司的设计风格？
想好了吗？
揭晓答案：
A = Claude，B = Spotify，C = Vercel，D = Figma。
你猜对了几个？如果全对，说明这些品牌的设计语言已经深入你的潜意识了。而 DESIGN.md 做的事，就是把这种”潜意识里的品牌感”变成了 AI 能读懂的规则文件。
顺便说一句，不用担心手机端。同一个 prompt 生成的页面，响应式是自动的，不需要再跑一遍：
文案没变一个字，页面结构没动一个像素，变的只是那个 DESIGN.md 文件。
这就是它的威力——不改变你的内容，但改变你的内容给人的感受。
打开看看：DESIGN.md 里面到底写了什么？
拿 Spotify 的 DESIGN.md 举例，核心就这五类信息：
颜色系统——主色 #1DB954（标志性的那个绿），背景 #121212（近纯黑），文字 #FFFFFF。主色、辅色、背景色、强调色，每一个都给了精确色值。
字体规范——用什么字体族、标题多大、正文多大、行高多少、字重怎么变化。
间距系统——元素之间留多少空间，用 4px / 8px 的倍数网格。
组件样式——按钮的圆角、卡片有没有阴影、描边粗细、hover 状态。
排版规则——内容区最大宽度、对齐方式、分区之间的视觉节奏。
这五样东西合在一起，就是一个品牌的「视觉 DNA」。AI 拿到这些规则，就像一个手速飞快的前端拿到了设计稿——不用猜，不用发挥，照着做就行。
三步上手
第一步：打开 GitHub 搜 awesome-design-md，找一个你喜欢的品牌风格，复制它的 DESIGN.md。
第二步：把”你想做什么页面”的描述 + DESIGN.md 内容，一起丢给 Claude 或 Cursor。prompt 里加一句”严格遵循 DESIGN.md 的设计规范”。
第三步：微调。AI 生成的结果通常能到 80 分，剩下的 20 分让 AI 继续迭代或者手动改 CSS。
仓库里没有你想要的品牌？可以在 GitHub 上提 issue 请求生成，也可以参考仓库的 CONTRIBUTING.md 自己提炼一份。
对比一下同类方案
Google Stitch 最近很火，截个图就能生成 UI，本质上也在解决同一个问题——让 AI 知道好看长什么样。
但两者的输入方式不同：Stitch 吃截图，awesome-design-md 吃文本。
文本的好处很明显：可编辑、可版本控制、可组合。
你甚至可以把 Figma 的颜色系统和 Vercel 的排版规则混搭在一起，创造一种从未存在过的设计风格。截图做不到这一点。
谁值得试？
独立开发者——不想花时间在 UI 上，但也不想页面一看就是 AI 默认模板。找个你喜欢的大厂 DESIGN.md，五分钟出一版像样的页面。
早期创业团队——还没请设计师，但需要一个看起来专业的官网。先借一套设计系统撑过 MVP 阶段，比自己从零调 CSS 靠谱一百倍。
设计师——把你自己的设计系统写成 DESIGN.md，以后和 AI 协作的效率直接翻倍。再也不用看着 AI 把你的设计稿还原成”差不多但哪里不对”的样子了。
项目地址：github.com/VoltAgent/awesome-design-md
我把本文用到的完整 prompt 整理好了，关注后，在公众号里回复「prompt」即可获取****，拿去直接复现，换成你自己的产品信息就能用。
💬 本文评论区已开启，但暂无读者留言。
本文转载自微信公众号，如有侵权请联系删除。
- 标题: 一个 markdown 文件，让 AI 做的 UI 从「一眼 AI」变成「一眼大厂」
- 作者: lxiol
- 创建于 : 2026-04-29 20:26:05
- 更新于 : 2026-05-12 16:07:04
- 链接: https://blog.lxiol.cn/2026/04/29/一个-markdown-文件让-AI-做的-UI-从一眼-AI变成一眼大厂/
- 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。