让 AI 写代码也能有”品牌感”：这个 Skill 把 Stripe、Linear、Vercel 的设计系统全部打包好了
做设计的时候，你是不是经常遇到这种情况——甲方说”给我做一个像 Stripe 那种感觉的页面”，然后你对着屏幕发呆 20 分钟？
或者你想让 AI 帮你写代码，但 AI 出来的样式永远是一种”AI味儿”——没有灵魂，缺乏细节，颜色不对，间距混乱。
popular-web-designs 这个 Skill 就是来解决这个问题的。它把 54 个真实、知名产品的设计系统全部打包好了——包括颜色、字体、间距、阴影、组件样式——直接可以往你的代码里粘贴。
这 54 个设计系统都包括谁？
随便说几个你感受一下分量：
- Stripe — 标志性的紫色渐变，300 字重的优雅感
- Linear — 暗黑模式 UI 的天花板，精确到每一个像素
- Vercel — 极简黑白，Geist 字体家族
- Notion — 暖调极简，衬线标题
- Spotify — 绿色 + 暗黑，专辑封面驱动
- Airbnb — 珊瑚色，圆润摄影驱动
- Figma — 多彩活力，设计感十足
- Apple — 奢侈白色空间，SF Pro 字体
每一个模板都是完整的视觉语言规范，不只是调个颜色就完事了。
怎么用？
流程特别简单：
- 从目录里选一个设计系统（比如你想做开发者工具类网站，就选 Linear 或 Vercel）
- 加载对应模板，里面有完整的 CSS 变量、字体栈、颜色值
- 直接在你的 HTML 里应用这些 token
每个模板还贴心地附带了 Google Fonts 替代方案——因为原始网站用的字体很多是专有的（比如 Stripe 的 sohne-var），模板里直接告诉你用 Source Sans 3 替代最接近。
为什么这对设计师和 AI 工程师都很重要？
我之前用纯 AI 生成代码，最大的痛苦就是：AI 不懂”品牌一致性”是什么意思。它会生成一个看起来还行的页面，但跟你的品牌完全没关系。
这个 Skill 相当于给 AI 喂了一个完整的视觉词典。你告诉它”我要做一个小红书风格的设计”，它就能给你拿出精确的颜色值、字体大小、行高、间距——而不是笼统地说”简约风格”。
对于设计师来说，这也是一个很好的参考库——研究 Linear 的暗色界面是怎么处理层次关系的，Stripe 的结账流程用了哪些微妙的视觉暗示。
安装
直接克隆 GitHub 仓库就好：
git clone https://github.com/moltis-org/moltis ~/.claude/skills/popular-web-designs
或者通过 Claude Code 的 skill 命令安装。
说实话，这是我最近看到的对 AI 编程最实用的设计类 Skill 之一——它不教你设计理论，直接给你可以用的视觉系统。
评论区
登录后可评论。