awesome-design-skill

👤 zhouchang1988 📦 v1.2.0 ⭐ 4.4 ⬇️ 2.5K 下載

🎨 設計多媒體免費

📖 技能介紹

name: awesome-design-skill description: UI設計風格選擇器，從design-md風格庫中選擇合適的設計系統作為UI開發指導。支援50+知名品牌設計風格（Linear、Apple、Stripe、Vercel等）。觸發條件：使用者必須明確指定設計風格（如"用Linear風格設計"、"使用Apple風格建立頁面"、"按Stripe風格重構"）。也用於使用者詢問可用設計風格列表（"列出所有風格"、"有哪些風格"）或檢視特定風格詳情（"看看Vercel風格"）。不觸發：使用者未指定風格的一般設計請求（如"設計一個頁面"、"建立UI"等不會觸發此技能）。

Awesome Design Skill

根據使用者指定的設計風格，從 design-md 風格庫中選擇對應的設計系統作為 UI 開發指導，並將 DESIGN.md 複製到當前工作目錄。

重要：此技能僅在使用者明確指定設計風格時觸發。如果使用者未指定風格，不要使用此技能。

字型說明

所有設計風格的預覽檔案（preview.html、preview-dark.html）使用 fonts.loli.net 作為 Google Fonts 的映象源，以最佳化中國大陸地區的訪問體驗。如需更換為其他字型源，可批次替換檔案中的 fonts.loli.net 為其他映象地址。

自定義設計風格

design-md 目錄中的內容可以自由新增或替換。 你可以：

新增自己喜歡的設計風格（只需在 design-md/ 目錄下建立新的風格資料夾和 DESIGN.md）
替換現有風格的 DESIGN.md 內容
刪除不需要的風格

這樣你可以構建屬於自己的設計風格庫，讓 Claude 使用你熟悉和偏好的設計系統。

指令碼檔案

指令碼	用途
`scripts/list-styles.sh`	列出所有可用的設計風格
`scripts/smart-select.sh [需求描述]`	智慧選擇設計風格（根據需求關鍵詞匹配，無匹配則隨機）
`scripts/random-style.sh`	隨機選擇一個設計風格
`scripts/get-design.sh <風格名稱>`	獲取指定風格的 DESIGN.md 路徑
`scripts/copy-design.sh <風格名稱> [目標目錄]`	複製 DESIGN.md 到指定目錄（預設當前目錄）

工作流程

使用者指定風格進行設計

前提：使用者必須明確指定風格名稱

執行 scripts/get-design.sh <風格名稱> 驗證風格存在並獲取路徑
執行 scripts/copy-design.sh <風格名稱> 複製 DESIGN.md 到當前目錄
讀取當前目錄的 DESIGN.md 作為風格指導
告知使用者使用的設計風格

使用者檢視可用風格

當用戶詢問"有哪些風格"、"列出所有風格"、"檢視可用設計風格"時：

執行 scripts/list-styles.sh 列出所有可用的設計風格，並展示給使用者。

使用者檢視特定風格詳情

當用戶詢問"看看XX風格"、"檢視XX風格的設計規範"時：

執行 scripts/get-design.sh <風格名稱> 獲取風格路徑
讀取並展示該風格的設計規範概要

使用者重構現有頁面（需指定風格）

前提：使用者必須明確指定目標風格

當用戶要求將現有頁面改為某種風格時（如"將index.html改為airbnb的風格"、"用Vercel風格重構這個頁面"）：

首先讀取使用者指定的現有頁面檔案，理解其當前結構和內容
執行 scripts/get-design.sh <目標風格> 驗證風格存在
執行 scripts/copy-design.sh <目標風格> 複製到當前目錄
讀取 DESIGN.md 作為風格指導
根據新風格的設計系統，重構頁面的：
顏色方案（背景、文字、強調色等）
字型排版（字型家族、字號、行高等）
間距系統（邊距、內邊距、元素間距）
陰影和圓角
元件樣式（按鈕、卡片、表單等）
動畫效果
保持頁面原有的功能和內容結構，僅改變視覺風格
告知使用者重構完成及主要變化

可用設計風格關鍵詞

使用者指定風格時可以使用以下關鍵詞：

風格名稱	適用場景
linear.app	專案管理、任務工具、深色主題
apple	產品展示、高階簡潔、消費電子
stripe	支付、金融科技、企業級
vercel	開發者工具、深色主題
spotify	音樂、媒體播放器
notion	協作、文件工具
figma	設計工具、創意平臺
airbnb	旅行、預訂、民宿
coinbase	加密貨幣、區塊鏈
claude	AI產品、對話介面
cursor	開發者工具、程式碼編輯器
posthog	資料分析、監控儀表板
framer	設計工具、創意平臺

...以及更多風格，使用 scripts/list-styles.sh 檢視完整列表。

DESIGN.md 檔案結構
7w4.net小蔥技能。

每個 DESIGN.md 包含： - Overview - 設計概述 - Colors - 顏色系統 - Typography - 字型排版 - Spacing - 間距系統 - Shadows - 陰影效果 - Border Radius - 圓角設定 - Components - 元件樣式 - Animations - 動畫效果

輸出格式

完成設計後，告知使用者： 1. 使用的設計風格名稱 2. 主要設計特點概述 3. 生成的檔案列表

🤖 AI 評測

這個 Skill 質量不錯，內建 54 種知名設計風格（如 Linear、Stripe、Apple 等），每套都有完整的設計規範文件，能幫助快速生成符合特定品牌風格的 UI。觸發機制合理，只在使用者明確指定風格時才會啟用。不過它的功能比較基礎，主要就是複製設計文件到專案，缺少即時預覽和自動生成 UI 的能力。如果能直接生成帶樣式的內碼表面會更實用。

📊 多維度評分

適應性4.5

規範性3.9

有效性4.7

可靠性4.2

可信度4.8

📁 包含檔案 (225 個)

📄 README.md 7.4 KB

📄 SKILL.md 5 KB

📄 _meta.json 139 B

📄 design-md/airbnb/DESIGN.md 13.1 KB

📄 design-md/airbnb/README.md 1.2 KB

📄 design-md/airbnb/preview-dark.html 18.4 KB

📄 design-md/airbnb/preview.html 18.2 KB

📄 design-md/airtable/DESIGN.md 3.5 KB

📄 design-md/airtable/README.md 1.3 KB

📄 design-md/airtable/preview-dark.html 14.8 KB

📄 design-md/airtable/preview.html 14.7 KB

📄 design-md/apple/DESIGN.md 18.3 KB

📄 design-md/apple/README.md 1.2 KB

📄 design-md/apple/preview-dark.html 26.9 KB

📄 design-md/apple/preview.html 27 KB

📄 design-md/bmw/DESIGN.md 8.7 KB

📄 design-md/bmw/README.md 1.2 KB

📄 design-md/bmw/preview-dark.html 15.1 KB

📄 design-md/bmw/preview.html 15 KB

📄 design-md/cal/DESIGN.md 15.4 KB

📄 design-md/cal/README.md 1.2 KB

📄 design-md/cal/preview-dark.html 23.2 KB

📄 design-md/cal/preview.html 25 KB

📄 design-md/claude/DESIGN.md 18.4 KB

📄 design-md/claude/README.md 1.2 KB

📄 design-md/claude/preview-dark.html 31.2 KB

📄 design-md/claude/preview.html 31.8 KB

📄 design-md/clay/DESIGN.md 16.5 KB

📄 design-md/clay/README.md 1.2 KB

📄 design-md/clay/preview-dark.html 23.3 KB

📄 design-md/clay/preview.html 23.1 KB

📄 design-md/clickhouse/DESIGN.md 14.3 KB

📄 design-md/clickhouse/README.md 1.3 KB

📄 design-md/clickhouse/preview-dark.html 31.5 KB

📄 design-md/clickhouse/preview.html 29.7 KB

📄 design-md/cohere/DESIGN.md 13.5 KB

📄 design-md/cohere/README.md 1.2 KB

📄 design-md/cohere/preview-dark.html 30.1 KB

📄 design-md/cohere/preview.html 30.2 KB

📄 design-md/coinbase/DESIGN.md 4.9 KB

📄 design-md/coinbase/README.md 1.3 KB

📄 design-md/coinbase/preview-dark.html 14.9 KB

📄 design-md/coinbase/preview.html 14.8 KB

📄 design-md/composio/DESIGN.md 19 KB

📄 design-md/composio/README.md 1.3 KB

📄 design-md/composio/preview-dark.html 33.9 KB

📄 design-md/composio/preview.html 33.4 KB

📄 design-md/cursor/DESIGN.md 18.2 KB

📄 design-md/cursor/README.md 1.2 KB

📄 design-md/cursor/preview-dark.html 27.2 KB

📄 design-md/cursor/preview.html 27.1 KB

📄 design-md/elevenlabs/DESIGN.md 14 KB

📄 design-md/elevenlabs/README.md 1.3 KB

📄 design-md/elevenlabs/preview-dark.html 19.6 KB

📄 design-md/elevenlabs/preview.html 19.4 KB

📄 design-md/expo/DESIGN.md 16.3 KB

📄 design-md/expo/README.md 1.2 KB

📄 design-md/expo/preview-dark.html 28.9 KB

📄 design-md/expo/preview.html 29 KB

📄 design-md/figma/DESIGN.md 10.4 KB

📄 design-md/figma/README.md 1.2 KB

📄 design-md/figma/preview-dark.html 31 KB

📄 design-md/figma/preview.html 31.2 KB

📄 design-md/framer/DESIGN.md 16 KB

📄 design-md/framer/README.md 1.2 KB

📄 design-md/framer/preview-dark.html 29.7 KB

📄 design-md/framer/preview.html 29.3 KB

📄 design-md/hashicorp/DESIGN.md 15.1 KB

📄 design-md/hashicorp/README.md 1.3 KB

📄 design-md/hashicorp/preview-dark.html 40.9 KB

📄 design-md/hashicorp/preview.html 41.2 KB

📄 design-md/ibm/DESIGN.md 19 KB

📄 design-md/ibm/README.md 1.2 KB

📄 design-md/ibm/preview-dark.html 27 KB

📄 design-md/ibm/preview.html 26.8 KB

📄 design-md/intercom/DESIGN.md 6.3 KB

📄 design-md/intercom/README.md 1.3 KB

📄 design-md/intercom/preview-dark.html 17.1 KB

📄 design-md/intercom/preview.html 16.9 KB

📄 design-md/kraken/DESIGN.md 4.3 KB

📄 design-md/kraken/README.md 1.2 KB

📄 design-md/kraken/preview-dark.html 15.3 KB

📄 design-md/kraken/preview.html 15.1 KB

📄 design-md/linear.app/DESIGN.md 21.3 KB

📄 design-md/linear.app/README.md 1.3 KB

📄 design-md/linear.app/preview-dark.html 27.9 KB

📄 design-md/linear.app/preview.html 27.5 KB

📄 design-md/lovable/DESIGN.md 16.6 KB

📄 design-md/lovable/README.md 1.3 KB

📄 design-md/lovable/preview-dark.html 22.1 KB

📄 design-md/lovable/preview.html 21.9 KB

📄 design-md/minimax/DESIGN.md 13.5 KB

📄 design-md/minimax/README.md 1.3 KB

📄 design-md/minimax/preview-dark.html 38.6 KB

📄 design-md/minimax/preview.html 38.1 KB

📄 design-md/mintlify/DESIGN.md 16.3 KB

📄 design-md/mintlify/README.md 1.3 KB

📄 design-md/mintlify/preview-dark.html 25.8 KB

📄 design-md/mintlify/preview.html 25.5 KB

📄 design-md/miro/DESIGN.md 4.8 KB

📄 design-md/miro/README.md 1.2 KB

📄 design-md/miro/preview-dark.html 15.9 KB

📄 design-md/miro/preview.html 15.7 KB

📄 design-md/mistral.ai/DESIGN.md 14.5 KB

📄 design-md/mistral.ai/README.md 1.3 KB

📄 design-md/mistral.ai/preview-dark.html 28.3 KB

📄 design-md/mistral.ai/preview.html 28.3 KB

📄 design-md/mongodb/DESIGN.md 14.5 KB

📄 design-md/mongodb/README.md 1.3 KB

📄 design-md/mongodb/preview-dark.html 19.5 KB

📄 design-md/mongodb/preview.html 19.3 KB

📄 design-md/notion/DESIGN.md 17.2 KB

📄 design-md/notion/README.md 1.2 KB

📄 design-md/notion/preview-dark.html 25.5 KB

📄 design-md/notion/preview.html 25.3 KB

📄 design-md/nvidia/DESIGN.md 16.1 KB

📄 design-md/nvidia/README.md 1.2 KB

📄 design-md/nvidia/preview-dark.html 26.2 KB

📄 design-md/nvidia/preview.html 26.4 KB

📄 design-md/ollama/DESIGN.md 14.4 KB

📄 design-md/ollama/README.md 1.2 KB

📄 design-md/ollama/preview-dark.html 23 KB

📄 design-md/ollama/preview.html 22.9 KB

📄 design-md/opencode.ai/DESIGN.md 14.5 KB

📄 design-md/opencode.ai/README.md 1.3 KB

📄 design-md/opencode.ai/preview-dark.html 22.7 KB

📄 design-md/opencode.ai/preview.html 22.4 KB

📄 design-md/pinterest/DESIGN.md 11.7 KB

📄 design-md/pinterest/README.md 1.3 KB

📄 design-md/pinterest/preview-dark.html 17.8 KB

📄 design-md/pinterest/preview.html 17.6 KB

📄 design-md/posthog/DESIGN.md 17.4 KB

📄 design-md/posthog/README.md 1.3 KB

📄 design-md/posthog/preview-dark.html 28.5 KB

📄 design-md/posthog/preview.html 27.7 KB

📄 design-md/raycast/DESIGN.md 17.2 KB

📄 design-md/raycast/README.md 1.3 KB

📄 design-md/raycast/preview-dark.html 27.6 KB

📄 design-md/raycast/preview.html 29.3 KB

📄 design-md/replicate/DESIGN.md 13.5 KB

📄 design-md/replicate/README.md 1.3 KB

📄 design-md/replicate/preview-dark.html 29.9 KB

📄 design-md/replicate/preview.html 30.2 KB

📄 design-md/resend/DESIGN.md 17.7 KB

📄 design-md/resend/README.md 1.2 KB

📄 design-md/resend/preview-dark.html 24.5 KB

📄 design-md/resend/preview.html 24.3 KB

📄 design-md/revolut/DESIGN.md 8.6 KB

📄 design-md/revolut/README.md 1.3 KB

📄 design-md/revolut/preview-dark.html 18.3 KB

📄 design-md/revolut/preview.html 18.1 KB

📄 design-md/runwayml/DESIGN.md 13.1 KB

📄 design-md/runwayml/README.md 1.3 KB

📄 design-md/runwayml/preview-dark.html 24.7 KB

📄 design-md/runwayml/preview.html 24.7 KB

📄 design-md/sanity/DESIGN.md 19.9 KB

📄 design-md/sanity/README.md 1.2 KB

📄 design-md/sanity/preview-dark.html 31.4 KB

📄 design-md/sanity/preview.html 37.4 KB

📄 design-md/sentry/DESIGN.md 14.3 KB

📄 design-md/sentry/README.md 1.2 KB

📄 design-md/sentry/preview-dark.html 26.2 KB

📄 design-md/sentry/preview.html 30 KB

📄 design-md/spacex/DESIGN.md 10.5 KB

📄 design-md/spacex/README.md 1.2 KB

📄 design-md/spacex/preview-dark.html 15.6 KB

📄 design-md/spacex/preview.html 15.3 KB

📄 design-md/spotify/DESIGN.md 12.7 KB

📄 design-md/spotify/README.md 1.3 KB

📄 design-md/spotify/preview-dark.html 17.1 KB

📄 design-md/spotify/preview.html 16.9 KB

📄 design-md/stripe/DESIGN.md 19.7 KB

📄 design-md/stripe/README.md 1.2 KB

📄 design-md/stripe/preview-dark.html 27.9 KB

📄 design-md/stripe/preview.html 27.5 KB

📄 design-md/supabase/DESIGN.md 14.2 KB

📄 design-md/supabase/README.md 1.3 KB

📄 design-md/supabase/preview-dark.html 35.3 KB

📄 design-md/supabase/preview.html 34.7 KB

📄 design-md/superhuman/DESIGN.md 17.1 KB

📄 design-md/superhuman/README.md 1.3 KB

📄 design-md/superhuman/preview-dark.html 29.8 KB

📄 design-md/superhuman/preview.html 29.2 KB

📄 design-md/together.ai/DESIGN.md 13.5 KB

📄 design-md/together.ai/README.md 1.3 KB

📄 design-md/together.ai/preview-dark.html 31 KB

📄 design-md/together.ai/preview.html 31.3 KB

📄 design-md/uber/DESIGN.md 17.2 KB

📄 design-md/uber/README.md 1.2 KB

📄 design-md/uber/preview-dark.html 32.7 KB

📄 design-md/uber/preview.html 32.6 KB

📄 design-md/vercel/DESIGN.md 18.5 KB

📄 design-md/vercel/README.md 1.2 KB

📄 design-md/vercel/preview-dark.html 25.7 KB

📄 design-md/vercel/preview.html 25.6 KB

📄 design-md/voltagent/DESIGN.md 23.6 KB

📄 design-md/voltagent/README.md 1.3 KB

📄 design-md/voltagent/preview-dark.html 26.6 KB

📄 design-md/voltagent/preview.html 28.7 KB

📄 design-md/warp/DESIGN.md 15.2 KB

📄 design-md/warp/README.md 1.2 KB

📄 design-md/warp/preview-dark.html 23 KB

📄 design-md/warp/preview.html 24.3 KB

📄 design-md/webflow/DESIGN.md 4 KB

📄 design-md/webflow/README.md 1.3 KB

📄 design-md/webflow/preview-dark.html 16.3 KB

📄 design-md/webflow/preview.html 16.2 KB

📄 design-md/wise/DESIGN.md 8.5 KB

📄 design-md/wise/README.md 1.2 KB

📄 design-md/wise/preview-dark.html 17.1 KB

📄 design-md/wise/preview.html 16.9 KB

📄 design-md/x.ai/DESIGN.md 15.2 KB

📄 design-md/x.ai/README.md 1.2 KB

📄 design-md/x.ai/preview-dark.html 22 KB

📄 design-md/x.ai/preview.html 24.5 KB

📄 design-md/zapier/DESIGN.md 17.7 KB

📄 design-md/zapier/README.md 1.2 KB

📄 design-md/zapier/preview-dark.html 23.4 KB

📄 design-md/zapier/preview.html 23.2 KB

📄 scripts/copy-design.sh 983 B

📄 scripts/get-design.sh 422 B

📄 scripts/list-styles.sh 763 B

📄 scripts/random-style.sh 470 B

📄 scripts/smart-select.sh 4.2 KB

📄 scripts/styles.json 23.6 KB