流行網頁設計
從真實網站中提取的 54 個生產級設計系統。加載模板以生成與 Stripe、Linear、Vercel、Notion、Airbnb 等網站視覺標識相匹配的 HTML/CSS。每個模板都包含顏色、排版、組件、佈局規則以及即拿即用的 CSS 值。
技能元數據
| 來源 | 捆綁（默認安裝） |
| 路徑 | skills/creative/popular-web-designs |
| 版本 | 1.0.0 |
| 作者 | Hermes Agent + Teknium（設計系統源自 VoltAgent/awesome-design-md） |
| 許可證 | MIT |
參考：完整 SKILL.md
信息
以下是觸發此技能時 Hermes 加載的完整技能定義。這是技能激活時代理看到的指令。
流行網頁設計
54 個可用於生成 HTML/CSS 的真實世界設計系統。每個模板都捕捉了網站的完整視覺語言：調色板、排版層級、組件樣式、間距系統、陰影、響應式行為，以及包含確切 CSS 值的實用代理提示。
使用方法
- 從下面的目錄中選擇一個設計
- 加載它：
skill_view(name="popular-web-designs", file_path="templates/<site>.md") - 在生成 HTML 時使用設計令牌和組件規範
- 與
generative-widgets技能配合使用，通過 cloudflared 隧道提供服務結果
每個模板頂部都包含一個 Hermes 實施說明 塊，其中有：
- CDN 字體替代品和 Google Fonts
<link>標籤（可直接粘貼使用） - 主要字體和等寬字體的 CSS font-family 堆棧
- 提醒使用
write_file創建 HTML 並使用browser_vision進行驗證
HTML 生成模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<!-- Paste the Google Fonts <link> from the template's Hermes notes -->
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
<style>
/* Apply the template's color palette as CSS custom properties */
:root {
--color-bg: #ffffff;
--color-text: #171717;
--color-accent: #533afd;
/* ... more from template Section 2 */
}
/* Apply typography from template Section 3 */
body {
font-family: 'Inter', system-ui, sans-serif;
color: var(--color-text);
background: var(--color-bg);
}
/* Apply component styles from template Section 4 */
/* Apply layout from template Section 5 */
/* Apply shadows from template Section 6 */
</style>
</head>
<body>
<!-- Build using component specs from the template -->
</body>
</html>
使用 write_file 寫入文件，通過 generative-widgets 工作流（cloudflared 隧道）提供服務，並使用 browser_vision 驗證結果以確認視覺準確性。
字體替代參考
大多數網站使用的專有字體無法通過 CDN 獲取。每個模板都映射到一個能保留設計特徵的 Google Fonts 替代品。常見映射如下：
| 專有字體 | CDN 替代品 | 特徵 |
|---|---|---|
| Geist / Geist Sans | Geist (on Google Fonts) | 幾何風格，緊湊字距 |
| Geist Mono | Geist Mono (on Google Fonts) | 簡潔等寬，支持連字 |
| sohne-var (Stripe) | Source Sans 3 | 輕量級優雅感 |
| Berkeley Mono | JetBrains Mono | 技術感等寬字體 |
| Airbnb Cereal VF | DM Sans | 圓潤、友好的幾何風格 |
| Circular (Spotify) | DM Sans | 幾何風格，溫暖感 |
| figmaSans | Inter | 簡潔的人文主義風格 |
| Pin Sans (Pinterest) | DM Sans | 友好、圓潤 |
| NVIDIA-EMEA | Inter (或 Arial 系統字體) | 工業風，簡潔 |
| CoinbaseDisplay/Sans | DM Sans | 幾何風格，可信賴感 |
| UberMove | DM Sans | 粗體，緊湊 |
| HashiCorp Sans | Inter | 企業級，中性 |
| waldenburgNormal (Sanity) | Space Grotesk | 幾何風格，略微壓縮 |
| IBM Plex Sans/Mono | IBM Plex Sans/Mono | 可在 Google Fonts 獲取 |
| Rubik (Sentry) | Rubik | 可在 Google Fonts 獲取 |
當模板的 CDN 字體與原始字體匹配時（Inter、IBM Plex、Rubik、Geist），不會發生替代損失。當使用替代品時（如用 DM Sans 替代 Circular，用 Source Sans 3 替代 sohne-var），請嚴格遵循模板的字重、字號和字間距值——這些比具體的字體面更能承載視覺標識。
設計目錄
AI 與機器學習
| 模板 | 網站 | 風格 |
|---|---|---|
claude.md | Anthropic Claude | 溫暖的赤陶色點綴，簡潔的編輯佈局 |
cohere.md | Cohere | 鮮豔的漸變，數據豐富的儀表板美學 |
elevenlabs.md | ElevenLabs | 深色電影感 UI，音頻波形美學 |
minimax.md | Minimax | 大膽的深色界面，帶有霓虹點綴 |
mistral.ai.md | Mistral AI | 法式工程極簡主義，紫色調 |
ollama.md | Ollama | 終端優先，單色簡約 |
opencode.ai.md | OpenCode AI | 以開發者為中心的深色主題，全等寬字體 |
replicate.md | Replicate | 簡潔的白色畫布，代碼優先 |
runwayml.md | RunwayML | 電影感深色 UI，媒體豐富佈局 |
together.ai.md | Together AI | 技術感，藍圖風格設計 |
voltagent.md | VoltAgent | 虛空黑畫布，翡翠綠點綴，終端原生 |
x.ai.md | xAI | 鮮明的單色，未來主義極簡主義，全等寬字體 |
開發者工具與平臺
| 模板 | 站點 | 風格 |
|---|---|---|
cursor.md | Cursor | 時尚深色界面，漸變點綴 |
expo.md | Expo | 深色主題，緊湊字間距，以代碼為中心 |
linear.app.md | Linear | 極簡深色模式，精準，紫色點綴 |
lovable.md | Lovable | 活潑漸變，友好的開發者美學 |
mintlify.md | Mintlify | 簡潔，綠色點綴，針對閱讀優化 |
posthog.md | PostHog | 活潑的品牌形象，對開發者友好的深色 UI |
raycast.md | Raycast | 時尚深色鉻質感，鮮豔漸變點綴 |
resend.md | Resend | 極簡深色主題，等寬字體點綴 |
sentry.md | Sentry | 深色儀表盤，數據密集，粉紫色點綴 |
supabase.md | Supabase | 深色翡翠主題，代碼優先的開發者工具 |
superhuman.md | Superhuman | 高端深色 UI，鍵盤優先，紫色光暈 |
vercel.md | Vercel | 黑白精準，Geist 字體系統 |
warp.md | Warp | 深色類 IDE 界面，基於塊的命令 UI |
zapier.md | Zapier | 溫暖橙色，友好的插圖驅動風格 |
基礎設施與雲
| 模板 | 站點 | 風格 |
|---|---|---|
clickhouse.md | ClickHouse | 黃色點綴，技術文檔風格 |
composio.md | Composio | 現代深色搭配彩色集成圖標 |
hashicorp.md | HashiCorp | 企業級簡潔，黑白配色 |
mongodb.md | MongoDB | 綠葉品牌形象，專注於開發者文檔 |
sanity.md | Sanity | 紅色點綴，內容優先的編輯佈局 |
stripe.md | Stripe | 標誌性紫色漸變，300 字重優雅風格 |
設計與生產力
| 模板 | 站點 | 風格 |
|---|---|---|
airtable.md | Airtable | 多彩，友好，結構化數據美學 |
cal.md | Cal.com | 簡潔中性 UI，面向開發者的簡約性 |
clay.md | Clay | 有機形狀，柔和漸變，藝術指導佈局 |
figma.md | Figma | 鮮豔多色，活潑而專業 |
framer.md | Framer | 大膽黑藍配色，動效優先，設計前沿 |
intercom.md | Intercom | 友好藍色調，對話式 UI 模式 |
miro.md | Miro | 明亮黃色點綴，無限畫布美學 |
notion.md | Notion | 溫暖極簡主義，襯線標題，柔和表面 |
pinterest.md | 紅色點綴，瀑布流網格，以圖像為主的佈局 | |
webflow.md | Webflow | 藍色點綴，精緻的營銷網站美學 |
金融科技與加密貨幣
| 模板 | 站點 | 風格 |
|---|---|---|
coinbase.md | Coinbase | 簡潔藍色標識，注重信任，機構感 |
kraken.md | Kraken | 紫色點綴深色 UI，數據密集儀表盤 |
revolut.md | Revolut | 時尚深色界面，漸變卡片，金融科技精準感 |
wise.md | Wise | 明亮綠色點綴，友好且清晰 |
企業與消費者
| 模板 | 站點 | 風格 |
|---|---|---|
airbnb.md | Airbnb | 溫暖珊瑚色點綴，攝影驅動，圓角 UI |
apple.md | Apple | 高端留白，SF Pro 字體，電影感 imagery |
bmw.md | BMW | 深色高端表面，精準工程美學 |
ibm.md | IBM | Carbon 設計系統，結構化藍色調 |
nvidia.md | NVIDIA | 綠黑能量感，技術力量美學 |
spacex.md | SpaceX | 鮮明黑白，全出血 imagery，未來感 |
spotify.md | Spotify | 深色背景上的鮮豔綠色，粗體排版，專輯封面驅動 |
uber.md | Uber | 大膽黑白，緊湊排版，都市活力 |
選擇設計風格
將設計與內容相匹配：
- 開發者工具 / 儀表盤： 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
- 活潑 / 友好： PostHog, Figma, Lovable, Zapier, Miro
- 高端 / 奢華： Apple, BMW, Stripe, Superhuman, Revolut
- 數據密集 / 儀表盤： Sentry, Kraken, Cohere, ClickHouse
- 等寬字體 / 終端美學： Ollama, OpenCode, x.ai, VoltAgent