主流 Web 设计样式库

你在解决什么问题

做落地页、Dashboard 或营销页时，「像 Stripe / Linear / Vercel 那样」往往只有截图和零散文章，很难落到可改的 HTML/CSS。自己从零搭栅格、间距、按钮和暗色主题，既费时间又容易在细节上偏离原站气质。这个技能把 54 套来自真实产品的设计系统 整理成可直接参考的页面结构，而不是泛泛的 UI 组件清单。

技能如何工作

触发场景通常是：你要 build a page that looks like 某类产品、或明确说 stripe / linear / vercel style、landing page、dashboard design 等。技能会按目标风格选用对应设计系统的 HTML + CSS 片段与布局模式（排版层级、卡片、导航、表单、数据展示等），让你在现有项目里改类名和内容即可迭代，而不是先猜一套「看起来像」的样式。

资料侧注明设计系统条目来自 VoltAgent/awesome-design-md 一类 curated 集合；技能侧由 Hermes Agent 与 Teknium 封装为 Agent 可用的设计参考能力，标签覆盖 design-systems、templates、web-development。

适用边界

• 产出以 静态页面样式与结构 为主，不包含各产品背后的 React 组件库或设计 token 的完整 npm 包。
• 54 套是 样式参考集，不是逐像素复刻官方站点；接入自家框架时需自行处理响应式断点、可访问性与业务组件。
• 适合快速定调视觉方向；若需要长期维护的设计 token 与组件规范，仍应对照官方 Design System 文档做二次抽象。