LJC-god/popular-web-designs-skill

熱門網頁設計

54 個真實世界的設計系統，隨時可用於產生 HTML/CSS。每個模板都捕捉了網站的完整視覺語言：色板、字體層級、元件樣式、間距系統、陰影、回應式行為，以及提供精確 CSS 值的實用 AI 提示。

相關設計技能

• claude-design — 用於設計的流程與品味（界定需求、產生變體、驗證本地 HTML 成品、避免 AI 設計俗套）。當使用者想要一個以知名品牌風格設計的精緻頁面時，請與此技能搭配使用：claude-design 驅動工作流程，此技能提供視覺詞彙。
• design-md — 當交付產物是正式的 DESIGN.md 令牌規格檔案，而非渲染成品時使用。

使用方法

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>
  <!-- 從模板的 Hermes 筆記貼上 Google Fonts <link> 標籤 -->
  <link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
  <style>
    /* 將模板的色板套用為 CSS 自訂屬性 */
    :root {
      --color-bg: #ffffff;
      --color-text: #171717;
      --color-accent: #533afd;
      /* ... 更多來自模板第 2 節的內容 */
    }
    /* 套用模板第 3 節的字體設定 */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--color-text);
      background: var(--color-bg);
    }
    /* 套用模板第 4 節的元件樣式 */
    /* 套用模板第 5 節的版面配置 */
    /* 套用模板第 6 節的陰影 */
  </style>
</head>
<body>
  <!-- 使用模板中的元件規格來建構內容 -->
</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	標誌性紫色漸層、weight-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、電影感影像
bmw.md	BMW	深色高級表面、精確工程美學
ibm.md	IBM	Carbon 設計系統、結構化藍色調色板
nvidia.md	NVIDIA	綠黑能量、技術力量美學
spacex.md	SpaceX	強烈黑白色調、滿版影像、未來感
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