夜雨聆风大家好，我是米汤！
今天聊一个目前获取49K Star爆款项目的开源，以及我自己开源的一个skill。两个配合用，AI 写出来的前端才算真的能看。
— ◆ —
01
AI 写前端，为什么一直像 AI 写的
用 AI 写过网页的朋友应该都知道，让它帮你写一个炫酷的页面，出来的东西颜色是蓝紫色渐变、毛玻璃特效...让AI再写一次，还是这套。
AI味前端设计截图
因为你没给 AI 参照物。
AI 只能靠训练数据里的「平均审美」自由发挥，结果就是每次都像从同一个模板里出来的。社区里有个词专门形容这种东西，叫「AI slop」。
这个问题，最近有个 GitHub 开源项目给出了一个很直接的解法。
awesome-design-md GitHub 仓库首页截图
— ◆ —
02
这个项目做了什么
awesome-design-md 的思路很简单，把 Stripe、Vercel、Apple、Notion、Linear 这些大厂的设计系统，逆向提取出来，整理成一个纯文本文件，叫 DESIGN.md。
颜色的具体色值、字体层级、按钮的全状态、间距规则、Do's and Don'ts，全都写进去。
然后把这个文件丢进你的项目根目录，告诉 AI「按照 DESIGN.md 来写」，它就有了一个真实的品牌参照物，不再靠猜了。
getdesign网站截图
目前仓库已经收录了 66 个品牌，Stripe 的标志性紫色渐变、Vercel 的黑白极简、Apple 的奢华留白、Spotify 的暗黑活力……
每个文件里都有完整的颜色规范、字体规范、组件状态，
还有一份预览页面，可以直接在浏览器里看这套设计系统长什么样。
项目上线几天，GitHub Star 超过 49K，X 上的分享帖子动辄几百上千赞，社区称它为「AI 代理的 Figma」，
也有人说它是「UI slop 的终结者」。
用法极简，一条命令把某个品牌的 DESIGN.md 拉下来：
npx getdesign@latest add stripe然后在 Claude Code 里说一句「Build a landing page. Follow the DESIGN.md in the project root exactly.」
AI 就会对着 Stripe 的设计规范来写颜色、字体、按钮样式。
但看起来区别不大啊...
before/after UI 对比截图
— ◆ —
03
社区反馈的问题
有用户用了一段时间之后，说了一句话：
design system is perfectly respected,but the layout is still pretty generic
— 用户原话
翻译过来就是，设计系统完美遵循了，但页面布局还是很通用、很泛化。
DESIGN.md 擅长的是「样式快照」，颜色对了，字体对了，按钮对了，但页面的骨架是什么样的，区块之间的节奏怎么排，电脑端的容器宽度是多少，手机端怎么折叠，这些它没有明确告诉 AI。
它看起来只是一份「视觉清单」，
告诉了AI界面应该长什么样，但没有告诉它页面应该怎么组织。
所以 AI 在样式上学到了，
但在结构上还是靠自己发挥，
结果就是电脑端拥挤、手机端堆叠失衡，行动按钮放哪里、导航怎么收、内容区宽度多少，全靠 AI 猜。
页面看起来颜色对了，但整体还是歪的。
「布局混乱」页面截图
— ◆ —
04
我开源了一个前端蒸馏skill
我用 Codex 设计了一个叫 frontend-distill 的开源skill，中文名叫「前端蒸馏.skill」，目前可以解决这个问题。
它的思路是把一个网站的前端信息分五层来蒸馏，
不只提取样式，也提取布局结构和响应式行为。
最终输出七个文件，DESIGN.md 和 LAYOUT.md 给人和 AI 读，另外五个 JSON 格式的文件给 AI 工具直接调用，消耗的 token 更低。
核心逻辑是，如果只给 AI 前两层，它只是「做得像」，把后三层也明确下来，它才更可能「做得对」。
— ◆ —
05
实操演示
先安装技能，下面两种方式都行。
自己在设备上装：
npm install -g frontend-distill或者直接把这条命令复制给 Claude Code或者Codex、OpenClaw小龙虾、Hermes Agent等工具，告诉它「帮我安装 frontend-distill skill」，让它替你装，装完自动配置好。
小技巧，直接让AI帮你安装会更简单、丝滑。
安装完之后，告诉 Claude Code：
蒸馏（这里放网站网址），输出到 ./output/项目名它会自动打开页面、滚动触发懒加载、注入提取脚本，然后把四个文件写到 output 目录里。
Claude Code 执行蒸馏命令的终端截图
output目录结构截图
蒸馏完之后，打开 LAYOUT.md 看一眼，里面会有这样的内容👇
容器最大宽度是多少、区块之间的间距节奏、导航的结构、行动按钮的位置规律、响应式断点，全都是从真实页面里提取出来的，不是 AI 猜的。
然后告诉 Claude Code：
读取 output 里的 DESIGN.md 和 LAYOUT.md，帮我写一个同风格与布局的博客，主题叫AI知识库这次AI页面的骨架、区块节奏、响应式结构，也都有了依据。
蒸馏了某个国内知名的资源站点
两个项目地址放在这里，awesome-design-md 解决 AI 前端设计样式问题，frontend-distill 既能蒸馏样式，也能蒸馏布局，按需使用即可。
如果你不懂技术，可以把本文全文复制给你的ai agent工具，让它帮你安装和使用。
想一起探索 AI Agent 玩法的朋友，可以在公众号后台私发：「Agent」，我会拉你进群交流。
— ◆ —
信息来源
https://github.com/VoltAgent/awesome-design-md
awesome-design-md 项目主仓库
https://github.com/mitang-ai/frontend-distill
frontend-distill 开源仓库
