吐血整理 8 个神级 GitHub 开源项目，让 AI 生成网页好看到飞起。

ivye
免费干货
10小时前
20热度
0评论

最近整理了一下 GitHub 上关于生成网页没有 AI 味儿的项目，发现设计这一块已经卷成了一片红海。
感觉每个细分场景都有人做出了开源 Skill。挑几个我个人觉得最值得装的，分享给你。
喜欢的可以点个赞、收藏一下。

01 Anthropic 官方设计 Skill

frontend-design 是 Claude Code 官方插件仓库里的第一个 skill，它能让 Claude 别再生成千篇一律的 AI 风 UI。
属于去除 AI 味儿的老牌 SKill。
打造独一无二的视觉风格。

它 Skill 里面约束了具体规则。
比如字体直接点名别用 Inter、Roboto、Arial 这类常见的字体，配色严禁紫色渐变这种已经被用烂的搭配，布局鼓励不对称、错位、对角流动。
它甚至会主动让 Claude 在每次生成之间换字体、换主题、换审美，避免趋同。同一个 prompt 跑两次，出来的东西应该长得不一样。
frontend-design 生成一个网站。

开源地址：https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-design/SKILL.md

02 设计指导 skill

impeccable 是 Google Chrome 团队出身的老哥做的一套给 AI Coding 工具用的设计指导 skill。
他也发现了所有模型都是在同一批 SaaS 模板上训练的，所以写出来的前端很容易撞脸，

于是它在 Anthropic 官方 frontend-design 的基础上做了扩展。

Impeccable 的核心由四部分组成：1 个统一 skill、23 条设计命令、44 条确定性检测规则、加上浏览器实时迭代能力。

装上之后跑 /impeccable init，它会先问你做的是品牌官网还是产品后台，把答案记下来，后面所有命令都会按这个方向走。

而且这个 SKill 有 44 条硬规则来给 AI 挑毛病，比如颜色对比度、字号层级、动效 easing 这些。

在 Claude Code 和 Codex 里，AI 每次改 UI 文件，这套规则会自动跑一遍，把问题反馈回去或者直接拦住。

开源地址：https://github.com/pbakaus/impeccable

03 给 AI Coding 装上审美

taste-skill 开源半年不到拿下 5.6 万 Star。
应该是目前反 AI 味儿这个赛道里最热的开源项目。

开源地址：https://github.com/leonxlnx/taste-skill

它的核心是 9 个独立的 Agent Skill，默认的 taste-skill 会根据你的设计场景和需求，自动来决策用啥样的设计语言。
然后会调三个数值：布局、动效强度、信息密度。
AI 会根据你这个网站的场景和定位，来设计布局是不是不对称偏现代、动效拉满、信息密度要不要高一些。
比如输入提示词：基于 design-taste-frontend 生成一个网站。

除了默认，还有一些预置好的视觉风格，比如极简编辑风的 minimalist-ui、粗暴工业风的 industrial-brutalist-ui、克制高级感的 high-end-visual-design。
每种审美都能找到对应的 skill。

04 让 AI 直接抄顶级产品的设计系统

taste-skill 解决的是 AI 该有什么审美，但有时候你其实想要的更具体：我就想做成 Claude 那种感觉、Apple 官网那种感觉。
这时候可以看看 Awesome Design.md 这个开源项目，它收集了 9 大类 73 个网站的设计风格。

这个开源项目 9 万多 Star 了，全球热度排名前 150。

开源地址：https://github.com/VoltAgent/awesome-design-md

每一个风格都有对应的 DESIGN.md 来写清楚，这个网站的视觉风格是啥样的。
比如你想复刻 Claude 网站的风格，不需要丢截图给 AI 了。
跟截图相比，DESIGN.md 最大的优势是 AI 能直接读懂。你不需要让模型先视觉识别再推测，直接把你喜欢风格网站的 DESIGN.md 喂给 AI，让它照着写就行。

除了这个 awesome-design-md 其实还有一个叫 styles.refero.design 的网站。
它把 2000 多个顶级产品网站的设计系统提取成了结构化的 DESIGN.md 文件，颜色、字体、间距、组件规则全部可读。

也都能拿来即用。

你只需要把 DESIGN.md 中的描述丢给你的 AI，并且说：帮我生成一个介绍逛逛 GitHub 公众号的网站，参考 md 的视觉风格，炫酷的视觉效果不要丢掉。

05 带动画的网页

如果想做带动画的网页，可以试试这个 Skill。
不装任何 skill 的 AI 做个 hover 效果没问题，一旦涉及到 ScrollTrigger、Timeline 编排、React useGSAP 这些进阶玩法，就开始瞎编 API。
GreenSock 官方出了 gsap-skills，把 GSAP 的核心用法拆成 8 个独立的 skill，每个 skill 都是该领域的最佳实践。

比如我用这个 skill ，把上面刚刚 Claude 风格的网站融入动画。

开源地址：https://github.com/greensock/gsap-skills

06 任何网站一秒钟变 Figma 可编辑设计稿

最后这个是 Figma 插件，跟前面几个工具配合起来极其顺手。
Web to Figma 可以丢一个网址进去，或者粘一段 HTML 代码，它直接给你转成完全可编辑的 Figma 图层。
输出的是真的能改文字、能调颜色、能拖位置的 Figma 组件。

配合后面的 ai-website-cloner-template 形成完整闭环。
先用 Web to Figma 把设计语言提取到 Figma 里研究透，再让 Claude Code 按你的需求重写一份。

下载地址：https://www.figma.com/community/plugin/1297530151115228662/web-to-figma-convert-any-website-or-html-code-to-design

07 丢个网址进去，复刻样式

最近 GitHub Trending 上杀出一个项目，叫 ai-website-cloner-template，Star 数几天之内从几千冲到了 2.5 万。

思路简单粗暴：丢一个网址给 Claude Code，跑一句/clone-website，几分钟后你就拿到了一份完整的 Next.js 代码，组件、样式、图片、字体全部还原好。
它先派 Agent 用 Chrome MCP 把目标网站里里外外扒一遍，截图、提取设计 token、记录交互状态。
然后把每个组件写成一份详细 spec，丢给并行的 builder agent 一次性重建。
最后还会跟原站做视觉对比。比如下面这个是输入了一个提示词完成的：
/clone-website https://www.notion.com