8 个神级 GitHub 开源项目

打开 SKILL.md 第一段就是——先选定一个大胆的审美方向再写代码，逼着 Claude 打造独一无二的视觉风格。

字体直接点名别用 Inter、Roboto、Arial 这类常见的字体；配色严禁紫色渐变这种已被用烂的搭配；布局鼓励不对称、错位、对角流动。

它甚至会让 Claude 每次生成之间换字体、换主题、换审美，同一个 prompt 跑两次出来的东西长得不一样。

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

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

44 条硬规则专门给 AI 挑毛病——颜色对比度、字号层级、动效 easing 这些。在 Claude Code 和 Codex 里，每次改 UI 文件，这套规则会自动跑一遍，发现问题直接拦。

核心是 9 个独立的 Agent Skill。默认的 taste-skill 会根据你的设计场景和需求自动决定用什么设计语言，然后调三个数值——布局、动效强度、信息密度。

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

收集了 9 大类 73 个网站的设计风格。每个风格都有对应的 DESIGN.md 文件写清楚这个网站的视觉风格是什么样的。

跟截图相比，DESIGN.md 最大的优势是 AI 能直接读懂。你不需要让模型先视觉识别再推测，直接把喜欢风格网站的 DESIGN.md 喂给 AI，让它照着写就行。

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

不装任何 skill 的 AI 做个 hover 效果没问题，一旦涉及 ScrollTrigger、Timeline 编排、React useGSAP 这些进阶玩法就开始瞎编 API。

GreenSock 官方推出了 gsap-skills，把 GSAP 的核心用法拆成 8 个独立的 skill，每个 skill 都是该领域的最佳实践。

支持 Cursor、Claude Code、Codex、Windsurf、Copilot 等所有主流 AI Coding 工具。

丢一个网址进去，或者粘一段 HTML 代码，它直接给你转成完全可编辑的 Figma 图层。

输出的是真的能改文字、能调颜色、能拖位置、能调整间距的 Figma 原生组件。

配合 ai-website-cloner-template 形成完美工作流：用 Web to Figma 把设计语言提取到 Figma 里研究透，再让 Codex/Claude Code 按你的需求重写一份。

思路简单粗暴：丢一个网址给 Claude Code，跑一句 /clone-website，几分钟后你就拿到了一份完整的 Next.js 代码——组件、样式、图片、字体全部还原好。

先派 Agent 用 Chrome MCP 把目标网站里里外外扒一遭——截图、提取设计 token、记录交互状态。然后把每个组件写成一份详细 spec，丢给并行的 builder agent 一次搞定。

最后还会跟原站做视觉对比。13 种主流 AI Coding 工具都能用（Claude Code、Cursor、Codex、Windsurf、Copilot），官方推荐配 Opus 4.7。

这个公众号历史发布过很多有趣的开源项目。如果你懒得翻文章一个个找，直接关注微信公众号「逛逛GitHub」，后台对话聊天就行。