54个顶级设计系统一键调用！这个开源Agent让AI生成网页不再「一眼AI」
做设计的同学，有没有遇到过这种情况——看上一个网站的配色和排版，想在自己的项目里复刻，结果对着 F12 调半天，颜色还是差一点意思？
最近在 GitHub 上发现了一个超实用的 Skill，专门解决这个痛点。
这个 Skill 叫 popular-web-designs，收录了 54 个真实在用的顶级设计系统，包括 Stripe、Linear、Vercel、Coinbase、Spotify 这些大家熟悉的产品。每个设计系统都附带了完整的视觉语言：色板、字体层级、组件样式、间距系统、阴影规则、响应式行为，甚至还有针对 AI 生成场景的精确 CSS 参数。
相当于有人帮你把几十个头部产品的设计系统做完逆向工程，直接喂给你用。
怎么用？
流程非常直接：
- 从目录里挑一个你喜欢的设计模板
- 用 skill_view 加载对应模板文件
- 按照模板里的 token 规范生成 HTML/CSS
- 用 browser_vision 做视觉验证
模板里还贴心地标注了字体替代方案——比如某产品用的是专有字体，模板会给你匹配一个 Google Fonts 替代款，并附上精确的字重、字号和字间距参数，最大程度保留原始设计的质感。
为什么这个 Skill 值得关注？
现在 AI 生成网页的工具很多，但输出普遍有个问题：配色保守、字体组合平庸、间距全靠直觉，一眼就能看出是 AI 做的。
这个 Skill 的核心思路是——让 AI 直接调用经过验证的设计语言，而不是让 AI 自己「发明」配色方案。你把 Linear 的色板和字重参数喂给 AI，生成的结果天然就带 Linear 的设计质感。
适合几个具体场景：
- 做 landing page 参考时，直接套 Vercel / Linear 的设计语言
- 给客户提案时，快速生成多个风格版本做对比
- 自己开发产品时，不用从零设计，直接站在成熟设计系统肩上
关于这个项目
popular-web-designs 是 NousResearch/Hermes Agent 开源项目里的一个 Skill，Hermes Agent 在 GitHub 上有 52k+ Stars，一直在持续更新。这个 Skill 也在不断扩充新的设计模板。
完全开源，Apache-2.0 协议，可以免费商用。
评论区
0 条评论
登录后可评论。