流行網頁設計

從真實網站中提取的 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 值的實用代理提示。

使用方法

1. 從下面的目錄中選擇一個設計
2. 加載它：skill_view(name="popular-web-designs", file_path="templates/<site>.md")
3. 在生成 HTML 時使用設計令牌和組件規範
4. 與 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	Pinterest	紅色點綴，瀑布流網格，以圖像為主的佈局
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