Awesome Design HTML
一個包含 118 個單頁 HTML 檔案的參考庫，分為：
assets/web/design.zhongguo-colors.html— 🎨 中國傳統色 Chinese Traditional Colors：源自 nevertoday/zhongguo-traditional-colors 的 742 色調色卡頁面。色調按色系（紅/橙/黃/綠/青/藍/紫/白/灰褐/黑）自動分組，可依名稱或 HEX 搜尋，點擊即可複製。當使用者需要 中國傳統色調色盤 / 中式配色 / 色卡 時使用。此頁面在圖庫中優先展示。assets/web/— 96 個行銷頁面示範（包含 22 個中國大廠）。包含 Hero 區塊、功能特色、定價及設計系統參考資料。當使用者想要一個 品牌風格的網站 / 登陸頁面 / 產品頁面 時使用。assets/ios/— 22 個 iOS 應用程式模型。在 Hero 區塊中使用三個 iPhone 框架展示真實應用的首頁 / 詳細頁 / 個人資料頁面，以及設計系統參考資料。當使用者想要 行動應用 UI 模型 或致敬品牌的 原生 iOS 介面（例如：正在播放、滑動卡片、聊天氣泡、學習路徑…）時使用。
每個檔案都是自包含的：內聯 CSS 以 :root Token 區塊呈現、使用 Google Fonts CDN、忠於品牌的色彩 / 字體 / 圓角 / 元件，並包含一個「查看原始碼 ↗」連結指向其設計規格。
如何使用此技能
當使用者提及品牌名稱加上設計 / 風格 / 頁面 / UI / Hero 區塊 / 定價 / 螢幕 / iPhone / 應用程式等關鍵字時：
- 比對品牌與平台：
- 想要網頁 / 登陸頁面 / 行銷頁面 → 在
assets/web/中尋找 - 想要 iOS 應用程式模型 / iPhone 畫面 / 行動 UI → 在
assets/ios/中尋找 - 部分品牌兩者都有（如 Spotify、Notion、Airbnb 等）— 選擇符合使用者意圖的類型。
- 想要網頁 / 登陸頁面 / 行銷頁面 → 在
- 讀取對應的 HTML：位於
assets/web/design.<slug>.html或assets/ios/design.<slug>-ios.html。 - 適配使用者請求 — 提取 Token（色彩、字體、圓角、按鈕形狀、Hero 原型）並加以應用。不要將多個品牌風格混雜成一個通用外觀。
檔案命名規則
- 網頁版本：
assets/web/design.<slug>.html - iOS 版本：
assets/ios/design.<slug>-ios.html
部分 slug 已標準化：
| 品牌 | Slug | 備註 |
|---|---|---|
| linear.app | linear | |
| mistral.ai | mistral | |
| together.ai | together | |
| x.ai | xai | （僅網頁） |
| opencode.ai | opencode | |
| bmw-m | bmw-m | 保留連字號 |
| x.com (Twitter) | x-twitter | （僅 iOS） |
| apple-music | apple-music | （僅 iOS） |
品牌索引 — 網頁（95 個）
🇨🇳 中國大廠（22 個，2026 年新增）
字節系：feishu (飛書)、douyin (抖音)、doubao (豆包) 阿里系：aliyun (阿里雲)、alipay (支付寶)、dingtalk (釘釘)、yuque (語雀) 騰訊系：tencent-cloud (騰訊雲)、wechat (微信) 國產 AI：deepseek、kimi、wenxin (文心一言)、qwen (通義千問)、qwencloud (Qwen Cloud · AI 原生雲平台) 新能源車：xiaomi-ev (小米汽車)、nio (蔚來)、li-auto (理想)、zeekr (極氪) 內容/消費：bilibili (嗶哩嗶哩)、mihoyo (米哈遊)、xiaomi (小米)、xiaohongshu (小紅書 · 瀑布流探索頁)
全球品牌（73 個）
生產力 / SaaS：airtable, cal, intercom, miro, notion, slack, superhuman, webflow, zapier
開發工具 / IDE：browseros（代理瀏覽器 · 奶油色 + 赤陶色 + 狗吉祥物）、bun（全能 JS 工具組 · 奶油色 heritage hero + 亮粉紅 #ff73a8 + bun 吉祥物 · docs 介面）、cursor, figma, framer, opencode, raycast, sanity, vercel, warp
AI / LLM 平台：claude, cohere, elevenlabs, lovable, minimax, mistral, ollama, runwayml, together, voltagent, xai
基礎設施 / 開發基礎設施：composio, clickhouse, hashicorp, mintlify, mongodb, posthog, replicate, resend, sentry, supabase
金融科技 / 加密貨幣：binance, coinbase, kraken, mastercard, revolut, stripe, wise
汽車 / 奢侈品：bmw, bmw-m, bugatti, ferrari, lamborghini, renault, tesla
消費 / 電商：airbnb, nike, pinterest, shopify, spotify, starbucks, uber
企業 / 平台：ibm, meta, nvidia, expo
媒體 / 編輯出版：theverge, wired
遊戲 / 航太 / 電信：playstation, spacex, vodafone
三大原創經典（品質標竿）：stripe, linear, notion
品牌索引 — iOS（22 個）
音樂 / 影片：spotify-ios, apple-music-ios, youtube-ios, netflix-ios, tiktok-ios
社交：instagram-ios, threads-ios, x-twitter-ios, snapchat-ios
即時通訊：whatsapp-ios, telegram-ios, discord-ios
AI / 生產力：chatgpt-ios, notion-ios
旅遊：uber-ios, airbnb-ios
交友：tinder-ios, hinge-ios
餐飲 / 金融 / 學習：starbucks-ios, doordash-ios, robinhood-ios, duolingo-ios
品牌原型（未指定特定品牌時的快速查詢）
| 原型 | 網頁範例 | iOS 範例 |
|---|---|---|
| 深色背景 + 產品 UI 為主體 | linear, warp, cursor, sentry, hashicorp, opencode | spotify, netflix, threads, x-twitter, discord |
| 明亮 + 漸層網格 Hero | stripe, vercel, intercom | apple-music |
| 明亮 + 柔和卡片 / 多彩光譜 | notion, slack, airbnb, miro, clay, pinterest, xiaohongshu | instagram, snapchat, duolingo |
| 瀑布流 / 垂直卡片資訊流 | pinterest, xiaohongshu | — |
| 編輯出版雜誌風格 | wired, theverge, claude, mistral, resend, elevenlabs | — |
| 純黑白 + 極小圓角 | apple, vercel, figma, bugatti, tesla, spacex | uber, threads, chatgpt |
| 儀表板模型為中心 | stripe, mongodb, supabase, posthog, hashicorp, coinbase | robinhood |
| 藥丸形按鈕系統 | stripe, slack, airbnb, spotify, mastercard, coinbase | airbnb-ios, instagram-ios |
| 矩形按鈕系統（8px 或更小） | notion, supabase, vercel, linear, mistral, expo | whatsapp, notion, telegram |
| 豪華汽車 + 規格表 | bmw, ferrari, lamborghini, bugatti, bmw-m, tesla | — |
| 3D 厚實陰影按鈕 | — | duolingo |
| 滑動卡片 + 色彩編碼操作 | — | tinder |
| 雙色聊天氣泡 | — | whatsapp, telegram, discord |
網頁 HTML 檔案結構
<head>
- <style> 中的內聯 CSS（單一模組，所有設計 Token 以 :root --custom-properties 表示）
- Google Fonts CDN（Inter + 品牌適配的輔助字型）
<body>
- 符合品牌的頂部導航列
- Hero 區塊（品牌的標誌性模式：漸層網格、深色帶、產品模型等）
- 2-4 個忠於品牌節奏的功能特色區塊
- 符合品牌的定價或行動呼籲按鈕
- 設計系統參考區塊（第二部分）：
-「色彩」分組子區塊
-「字體」表格：Token 名稱（等寬字體）+ 規格（等寬字體）+ 實際範例
-「圓角」視覺階梯
-「元件」矩陣：按鈕 + 輸入框 + 卡片 + 標籤/徽章
- 符合品牌的頁尾
- 右下角浮動「查看原始碼 ↗」連結，指向來源
</body>
iOS HTML 檔案結構
<head>
- 內聯 CSS、:root Token、Google Fonts CDN
- iPhone 框架 CSS（270pt × ~600pt，動態島、圓角 38px 螢幕、側邊按鈕）
<body>
- 頂部導航列（品牌標誌 + iOS 後綴）
- 包含三個 iPhone 框架的 Hero 區塊：
- 左側 iPhone（旋轉 -4°）— 次要螢幕
- 中央 iPhone（縮放 1.05 倍）— 標誌性螢幕
- 右側 iPhone（旋轉 +4°）— 第三級螢幕
每個 iPhone 顯示：動態島 + 狀態列（9:41）+ 渲染的應用程式 UI + 底部標籤
-「iOS 介面剖析」功能網格（3 種介面）
- 3 個交替的 iOS 特定功能行（例如動態島即時活動、觸覺回饋矩陣、鎖定畫面小工具、滑動手勢等）
- 設計系統參考區塊（第二部分）— 與網頁版相同，但新增 iOS 規格表（高度、內距、動畫曲線、觸覺回饋）
- 頁尾 + 浮動「查看原始碼 ↗」連結，指向 spectr.to 圖庫或上游 README
</body>
品質標準（從此參考庫產生新頁面時）
- 忠於品牌的真實標誌 — 不要套用通用模板。Stripe 的漸層網格、Linear 的 #010102 背景、Notion 的柔和色調、Apple 的產品區塊節奏、Spotify 的藥丸形按鈕 (border-radius: 9999px) 加上大寫字距都是不可妥協的識別特徵。
- 不要引入品牌未使用的色調 — Linear 只有薰衣草色，NVIDIA 只有綠色，xAI 完全沒有強調色，Threads 只有繼承的藍色勾勾和紅色愛心。
- 精確匹配按鈕形狀 — 藥丸形 vs 矩形 vs 尖角是品牌定義的關鍵。
- 品牌規格要求時使用負字距（Linear -3px、Stripe -1.4px 等）。
- 使用表格數字（
font-feature-settings: "tnum"）於品牌顯示金額或數字的場合（Stripe、Coinbase、Binance、Wise、Robinhood）。 - iOS 檔案：iPhone 框架必須包含動態島、狀態列顯示 9:41 並包含電信訊號條和電池圖示、符合品牌的正確分頁列數量（例如 Snapchat 5 個分頁含中央相機按鈕、Instagram 5 個分頁、ChatGPT 無分頁列）。
- iOS 檔案：Duolingo 必須使用 3D 厚實陰影按鈕（box-shadow
0 4-6px 0 darker）。WhatsApp 的聊天氣泡必須使用切角（發送方角落 = 0）。 - 深色背景品牌不使用陰影 — Linear、Bugatti 使用表面層次 + 細線來代替。
何時不使用此技能
- 使用者要求的是通用佈局模式（例如「雙欄儀表板」）且未提及任何品牌 — 此時應使用一般的設計判斷。
- 使用者有自己的設計系統 / 品牌規範，應以之覆蓋這些參考資料。
- 使用者詢問的「不在」這 116 個品牌清單中 — 應明確告知，而非猜測。
來源歸屬
- 網頁規格 源自 VoltAgent/awesome-design-md（MIT 授權）。
- iOS 規格 源自 Meliwat/awesome-ios-design-md（完整規格請見 Spectr 圖庫）。
每個 HTML 檔案右下角的連結均指向其來源。