54套顶级网站设计系统直接复用，官网审美终于在线了

你有没有过这种感觉：看到 Stripe、Linear、Vercel 的官网，那种高级感扑面而来，结果自己动手搭页面时，要么配色翻车，要么排版像十年前的老网站。

差别不是技术，是设计系统的审美。但谁有空把每个品牌的风格手册都啃一遍？

一个 Skill，54 套现成设计系统

今天要搬的货是 popular-web-designs——来自 NousResearch 的开源 Skill，直接把 54 个顶级网站的设计语言打包成了可复用的 HTML/CSS 模板。

不只是截图参考，而是可直接落地的代码级复刻：

• Stripe：标志性的紫色渐变、轻盈的字重、精致的卡片阴影
• Linear：极简暗黑模式、精准的间距、紫色点缀
• Vercel：黑白极简、Geist 字体系统、高对比度排版
• Mintlify：文档友好型阅读体验、绿色强调色
• Supabase：暗黑翡翠主题、代码优先的开发者工具风
• Notion、Figma、Raycast、Resend…… 共 54 套，覆盖 AI、开发者工具、云服务、设计工具等主流品类

为什么设计师和前端该关注这个？

过去想复刻一个知名网站的视觉风格，得靠肉眼猜色值、手动调间距，效率极低。这个 Skill 的模板每一套都提取了完整的视觉语言：

• 色彩系统：背景、文字、强调色的精确色值
• 字体层级：标题、正文、代码的字号和字重映射
• 组件样式：按钮、卡片、输入框的圆角、阴影、hover 状态
• 响应式断点：移动端到桌面端的布局规则
• Google Fonts 替代方案：专有字体无法直接引用？Skill 提供了 CDN 可用的替代字体

实际用法

Claude Code / Codex 里安装后，告诉 AI “build a page like Stripe” 或 “make it look like Linear”，它会自动调用对应模板的 token 和组件规范，生成符合目标品牌审美的 HTML/CSS。

适合场景：

• 给 Side Project 做 Landing Page，不想从零设计
• 给 AI 产品做官网原型，快速对齐竞品视觉
• 学习顶级产品的设计决策，逆向拆解他们的风格系统

写在最后

设计感的本质是对细节的掌控力。这个 Skill 不是让你”抄”，而是把顶级产品的设计语言翻译成可执行的代码规范，让你站在巨人的审美肩膀上快速产出。

如果你也在做面向开发者的产品，或者需要一个不输 SaaS 大厂的官网原型，强烈推荐试试。

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