设计灵感枯竭？让 AI 把全球最顶尖的设计系统「喂」给你

做设计最怕什么？

不是甲方改稿，是对着空白画布发呆，脑子里一片空白。

popular-web-designs 这个 Skill 太狠了——它把 Stripe、Linear、Vercel、Radix、Prisma 这些你平时天天刷的设计系统，全部打包成了 HTML/CSS 代码，直接塞进 Claude 的上下文里。

54 个真实生产级设计系统，每一个都是全球顶级公司的设计语言。

这东西能干啥？

抄作业，而且抄的是学霸的作业。

比如你想做一套深色主题的 B 端产品 UI，不知道怎么搭配颜色——直接问 Claude：「给我参考 Stripe 的深色模式配色」。

它会从真实代码里提取出精确的色值、间距、圆角、阴影规则，比你在 Figma 里一个个吸色快 100 倍。

想做卡片组件？Linear 的卡片系统直接参考着来。

想了解 Vercel 的字体层级？55 个模板里随便挑。

谁用谁知道

我试了一下，用它来写一篇科技感十足的 landing page，光参考 Vercel 和 Linear 的设计规范，30 分钟就搭出了一个让我自己都惊艳的页面。

这不是套模板——是真正理解顶级设计系统的底层逻辑，然后复刻、再创造。

而且这些代码都是生产级别的，用到真实项目里完全没问题，不用担心样式对不上。

怎么装怎么用

在 Claude Code 或 Claude.ai 里安装这个 Skill：

从 SkillsMP 安装或访问 GitHub：
https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/popular-web-designs

安装后直接说：「参考 Linear 的设计系统，帮我写一个导航栏组件」，Claude 就会调用对应的设计规范来生成代码。

适合谁

• UI/UX 设计师：快速获取顶级产品的设计参考
• 前端开发：不再纠结配色和间距，直接抄作业
• 产品经理：想快速做个高保真原型，直接参考成熟设计系统
• AI 工具爱好者：体验 AI + 设计系统结合的丝滑感

说真的，这个 Skill 让我意识到一个事情：设计最大的门槛不是审美，是参考。有了 54 个顶级设计系统在手，你的设计眼界直接提升一个量级。

GitHub：https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/popular-web-designs

GitHub: https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/popular-web-designs