用途：在生成 HTML/CSS 时套用真实网站的设计语言。每个模板记录该站点的完整视觉体系，包括配色、字体层级、组件样式、间距系统、阴影、响应式行为，并附带有精确 CSS 值的提示。
主要能力：提供 54 个模板，覆盖 AI 与机器学习、开发者工具、基础设施与云、设计与生产力、金融科技、企业与消费等类别，例如 claude、linear.app、vercel、stripe、notion、apple、spotify 等。每个模板顶部含 Hermes Implementation Notes，给出 CDN 字体替代与 Google Fonts link 标签、主字体与等宽字体栈，以及使用 write_file 创建 HTML、用 browser_vision 验证的提醒。
使用方式：从目录中选定设计，用 skill_view(name="popular-web-designs", file_path="templates/<site>.md") 加载，再按模板中的设计令牌与组件规格生成 HTML；可配合 generative-widgets 技能通过 cloudflared 隧道提供结果，并用 browser_vision 校验视觉准确性。
字体替代：多数站点使用专有字体，模板映射到 Google Fonts 替代字体，如 Geist、Source Sans 3、JetBrains Mono、DM Sans、Inter、Space Grotesk、IBM Plex、Rubik 等；当替代字体与原字体不同时，应严格遵循模板的字重、字号与字距值。
适用场景：开发者工具与仪表盘、文档与内容站、营销落地页、深色模式界面、浅色简洁界面、活泼友好风格、高端质感、数据密集仪表盘、等宽终端风格等。
限制：资料未提供收费、价格、平台支持范围与效果保证等信息；模板为设计参考，实际呈现需自行验证。