热门网页设计
54 套真实设计系统（Stripe、Linear、Vercel）作为参考模板。
每个模板捕获网站的完整视觉语言：调色板、排版层次、组件样式、间距系统、阴影、响应式行为和带精确 CSS 值的实用 agent prompt。
使用方法
- 从下方目录选择设计
- 加载它：
skill_view(name="popular-web-designs", file_path="templates/.md") - 生成 HTML 时使用设计 token 和组件规格
HTML 生成模式
Page Title
字体替代参考
| 专有字体 | CDN 替代 | 特征 |
|---|---|---|
| Geist / Geist Sans | Geist (on Google Fonts) | 几何、压缩 tracking |
| sohne-var (Stripe) | Source Sans 3 | 轻字重优雅 |
| Berkeley Mono | JetBrains Mono | 技术等宽 |
| Circular (Spotify) | DM Sans | 几何、温暖 |
| figmaSans | Inter | 干净人文 |
设计目录
AI & 机器学习
| 模板 | 网站 | 风格 |
|---|---|---|
claude.md | Anthropic Claude | 温暖赤陶强调、干净编辑布局 |
elevenlabs.md | ElevenLabs | 深色电影 UI、音频波形美学 |
mistral.ai.md | Mistral AI | 法式工程极简、紫色调 |
ollama.md | Ollama | 终端优先、单色简约 |
replicate.md | Replicate | 干净白色画布、代码优先 |
开发者工具 & 平台
| 模板 | 网站 | 风格 |
|---|---|---|
cursor.md | Cursor | 时尚深色界面、渐变强调 |
linear.app.md | Linear | 超极简深色模式、精确、紫色强调 |
vercel.md | Vercel | 黑白精确、Geist 字体系统 |
supabase.md | Supabase | 深色翠绿主题、代码优先开发者工具 |
sentry.md | Sentry | 深色仪表板、数据密集、粉紫强调 |
基础设施 & 云
| 模板 | 网站 | 风格 |
|---|---|---|
stripe.md | Stripe | 标志性紫色渐变、300 字重优雅 |
mongodb.md | MongoDB | 绿叶品牌、开发者文档焦点 |
hashicorp.md | HashiCorp | 企业干净、黑白 |
设计 & 生产力
| 模板 | 网站 | 风格 |
|---|---|---|
figma.md | Figma | 活力多色、俏皮而专业 |
notion.md | Notion | 温暖极简、衬线标题、柔和表面 |
framer.md | Framer | 大胆黑蓝、运动优先、设计前卫 |
企业 & 消费者
| 模板 | 网站 | 风格 |
|---|---|---|
apple.md | Apple | 高级留白、SF Pro、电影图像 |
spotify.md | Spotify | 深色活力绿、大胆类型、专辑艺术驱动 |
airbnb.md | Airbnb | 温暖珊瑚强调、摄影驱动、圆润 UI |
选择设计
- 开发者工具 / 仪表板：Linear、Vercel、Supabase、Raycast、Sentry
- 文档 / 内容网站：Mintlify、Notion、Sanity、MongoDB
- 营销 / 落地页：Stripe、Framer、Apple、SpaceX
- 深色模式 UI：Linear、Cursor、ElevenLabs、Warp、Superhuman
- 浅色 / 干净 UI：Vercel、Stripe、Notion、Cal.com、Replicate
- 高级 / 奢华：Apple、BMW、Stripe、Superhuman、Revolut
安装指南
复制下方命令，在终端运行即可安装：
# 安装到当前项目
npx skills add popular-web-designs
# 全局安装 — 所有项目可用
npx skills add popular-web-designs -g
使用指南
安装完成后，在对话框中直接使用此技能。