這份Claude Skill 清單，讓你不再每次強調樣式風格
整理版優先睇
呢篇文章整理咗設計師專用嘅 Claude Skill 清單，包含六大核心 Skill 嘅用途、安裝優先級同實戰流程，避免每次都要重複描述設計系統。
呢篇文章係作者參考 skills.sh 嘅設計類安裝數據同 SkillsMP 嘅視覺類索引，整合出嚟嘅設計師專用 Claude Skill 清單。作者發現設計師用 Claude 時最大嘅卡點唔係唔識描述審美，而係每次都要重新講設計系統、間距規則同交付格式。呢啲 Skill 可以將重複嘅設定寫死，觸發關鍵詞就自動行同一套流程，慳返好多時間。
作者建議將設計交付鏈路拆成四步：Brief、出稿、審計同動效，每步用一個 Skill 就夠。出稿用 frontend-design 或者 canvas-design，審計就靠 web-design-guidelines，動效用 remotion-best-practices。佢特別提醒出稿同審計唔好調轉，先 audit 空頁面冇意思，要出咗稿先審計，咁樣改動先落得返喺具體組件上。
安裝優先級方面，find-skills 同 web-design-guidelines 係必裝，frontend-design 同 canvas-design、remotion-best-practices、skill-creator 就按項目需要裝。作者強調要同工程向嘅 React 性能 Skill 分開，避免上下文混亂。整體結論係設計師裝 Skill 應該「出稿一個、審計一個、按需引入」，咁樣輸出先會貼近自己嘅設計系統。
- 設計師用 Claude 最大痛症係每次都要重複描述設計規範，Skill 可以固化流程慳返時間。
- 作者建議拆成四步：Brief、出稿、審計、動效，每步最多一個 Skill，避免 Agent 混亂。
- frontend-design 負責生成新界面，web-design-guidelines 專注審查違規，兩者角色唔同互補。
- canvas-design 適合靜態圖，remotion-best-practices 適合數據類動效，skill-creator 將品牌規範寫入 Agent 檔案。
- 必裝 find-skills 同 web-design-guidelines，按需裝 frontend-design 等，唔好同工程 Skill 混裝，保持上下文乾淨。
find-skills
搜尋 Figma、canvas、a11y 相關包，安裝命令：npx skills add vercel-labs/skills@find-skills -y -g
web-design-guidelines
審計清單，檢查 UX 同無障礙問題，安裝命令：npx skills add vercel-labs/agent-skills --skill web-design-guidelines
frontend-design
生成落地頁、Dashboard 等組件級界面，安裝命令：npx skills add anthropics/skills --skill frontend-design
canvas-design
架構圖、流程圖、封面構圖，導出 PNG/PDF，安裝命令：npx skills add anthropics/skills --skill canvas-design
設計師嘅痛點同六大 Skill 總覽
呢篇文章係基於 skills.sh 嘅設計類安裝數據同 SkillsMP 嘅視覺類索引整理出嚟，專畀設計師用 Claude 時唔使每次重複講設計系統。作者話最大卡點係「每次都要重新講設計系統、間距規則、交付格式」，而 Skill 可以將呢啲寫死，觸發詞對了就自動行流程。
- find-skills：搜 Figma、canvas、a11y 相關包
- frontend-design：落地頁、Dashboard 組件級產出
- web-design-guidelines：100+ 條界面問題清單
- remotion-best-practices：用 React 時間軸導出 MP4
- skill-creator：把品牌手冊封成團隊 Skill
- canvas-design：架構圖、流程圖、封面
設計交付鏈路同核心 Skill 實戰
作者習慣將設計交付拆成四步，每步最多用一個 Skill，避免 Agent 混規範。步驟分別係：Brief（存約束，可選 planning-with-files）、出稿（界面或示意圖，用 frontend-design 或 canvas-design）、審計（a11y、觸控、對比度，用 web-design-guidelines）、動效（Demo 片、數據動畫，用 remotion-best-practices）。
出稿同審計唔好對調，先 audit 空頁面冇意思，要出咗稿先審計，改動先落到具體組件上
frontend-design 係 anthropics/skills 嘅熱門 Skill，安裝榜長期前三。佢嘅核心係「限制嗰種紫漸變、Inter 字體堆疊嘅通用 AI 皮」。作者建議附上品牌色 hex、字號階梯、圓角規則，令輸出更貼近設計系統。觸發示例就係「按呢份 brief 做一版移動端優先嘅註冊頁，唔好默認 AI 風格」。
web-design-guidelines 同 frontend-design 安裝量同級，但角色係「審計清單」，唔係出圖工具。講「review 呢個頁面嘅 UX」、「查無障礙問題」，佢會按文件列出違規項。快就快，但代替唔到真實用戶測試。
進階 Skill 同安裝優先級
canvas-design 適合技術分享配圖、流程說明、封面構圖——用自然語言描述節點關係，導出 PNG/PDF 插進文檔或 Figma 再精修。remotion-best-practices 就適合可重複嘅動效，例如產品 Demo、指標動畫、社媒切片；佢係 skills.sh 前五唯一嘅視頻 Skill，由 Remotion 官方維護。
靜態品牌 KV 仍以 Figma 為主；Skill 更適合「要改數字就要重渲」嘅數據類動效
skill-creator 可以將團隊設計系統寫入 Agent：包括禁止用 #6366f1 以外嘅主色、標題最大兩級、圖片必須帶 alt。以後講「按團隊設計規範改呢頁」就自動加載同一套。find-skills 可以搜 figma、design-system、a11y 等關鍵詞，因為設計垂直 Skill 更新快，裝固定清單不如先裝 find-skills 再搜。
- 1 必裝 find-skills：npx skills add vercel-labs/skills@find-skills -y -g
- 2 必裝 web-design-guidelines：npx skills add vercel-labs/agent-skills --skill web-design-guidelines
- 3 常裝 frontend-design：npx skills add anthropics/skills --skill frontend-design
- 4 按需 canvas-design：npx skills add anthropics/skills --skill canvas-design
- 5 按需 remotion-best-practices：npx skills add remotion-dev/skills --skill remotion-best-practices
- 6 按需 skill-creator：npx skills add anthropics/skills --skill skill-creator
常見問題同小結
- 會取代 Figma 嗎？唔會，Skill 出參考代碼或靜態圖，最終視覺仍以源文件為準。
- 開發用嘅 React 規範要裝嗎？唔寫 code 可以 skip，同開發交接時叫佢哋自己裝。
- 生成嘅代碼瀏覽器兼容？補一句目標瀏覽器，避免 container queries 等新特性踩坑。
設計師嘅 Claude Skill 清單：出稿、審計、動效，各自負責一段
根據 skills.sh 設計類安裝數據 + SkillsMP 視覺類索引整理
設計師用 Claude，常見嘅難位唔係「唔識描述審美」，係「每次都重新講過設計系統、間距規則、交付格式」。Skill 將呢啲寫死，觸發詞啱咗就行同一套流程。
呢篇只講設計相關：出界面、審界面、做動效片、整理設計規範。工程向嘅 React 性能規範唔喺正文入便——嗰啲係開發嘅嘢，文末擴展度提一句就得。
一張表睇明六款 Skill
「6 個核心 Skill」：2 個必裝，4 個按項目揀裝。
01 · 設計交付鏈路上，Skill 放邊度
我習慣拆做四步，每步最多一個 Skill，避免 Agent 撈亂規範：
出稿同審計唔好調轉。先 audit 空頁面冇意義；先出稿再 audit，改動可以落到具體組件上。
02 · frontend-design：剋制 AI 預設 UI
anthropics/skills 裏的 「frontend-design」 喺 skills.sh 安裝榜長期頭三位。佢做嘅唔係「隨手畫個網頁」，係「限制嗰啲紫色漸變、Inter 字體堆疊嘅通用 AI 皮」。
npx skills add anthropics/skills --skill frontend-design
「適合：」 活動頁初稿、內部工具面板、畀開發睇嘅 HTML/CSS 參考。
我會附上品牌色 hex、字號階梯、圓角規則，等佢一次貼近設計系統。
「觸發示例：」 「按呢份 brief 做一版移動端優先嘅註冊頁，唔好默認 AI 風格」。
03 · web-design-guidelines：幫稿子做體檢
vercel-labs/agent-skills 裏的 「web-design-guidelines」 同 frontend-design 安裝量同級，但角色唔同：佢係「審計清單」，唔係出圖工具。
npx skills add vercel-labs/agent-skills --skill web-design-guidelines
講「review 呢個頁面嘅 UX」「查無障礙問題」，佢會按文件列出違規項。同設計走查表類似，快，但代替唔到真實用戶測試。
04 · canvas-design 同 remotion：靜態圖 vs 動效片
「canvas-design」（anthropics/skills）適合技術分享配圖、流程說明、封面構圖——用自然語言描述節點關係，匯出 PNG/PDF 插進文檔或者 Figma 再精修。
npx skills add anthropics/skills --skill canvas-design
「remotion-best-practices」 適合可重複嘅動效：產品 Demo、指標動畫、社媒切片。skills.sh 前五入便唯一嘅視頻 skill，Remotion 官方維護。
npx skills add remotion-dev/skills --skill remotion-best-practices
靜態品牌 KV 仍然以 Figma 為主；Skill 更適合「要改數字就要重新渲染」嘅數據類動效，版本可控。
05 · skill-creator：將設計系統寫入 Agent
團隊有 Figma 變數、間距 8pt 網格、組件命名規範——每次口述好煩。用 「skill-creator」 封成一份 SKILL.md，以後講「按團隊設計規範改呢頁」就加載同一套。
npx skills add anthropics/skills --skill skill-creator
我喺 Skill 入便會寫：禁止用 #6366f1 以外嘅主色、標題最大兩級、圖片必須帶 alt。比長 system prompt 穩定，改規範只改一個文件。
「find-skills 唔好唔記得」
設計垂直 skill 更新快，裝固定清單不如先npx skills add vercel-labs/skills@find-skills -y -g，再搜 figma、design-system、a11y 等關鍵詞。
06 · 設計師安裝清單
npx skills add vercel-labs/skills@find-skills -y -g | ||
npx skills add vercel-labs/agent-skills --skill web-design-guidelines | ||
npx skills add anthropics/skills --skill frontend-design | ||
npx skills add anthropics/skills --skill canvas-design | ||
npx skills add remotion-dev/skills --skill remotion-best-practices | ||
npx skills add anthropics/skills --skill skill-creator |
SkillsMP 上按「設計」「視覺」標籤仲可以挖到社區包，裝前打開 GitHub 睇最近有冇 commit。
常見問題
「會取代 Figma 嗎？」
唔會。Skill 出參考代碼或者靜態圖，最終視覺仍然以你嘅原始檔案為準。
「開發用嘅 React 規範要裝嗎？」
你唔寫代碼可以 skip vercel-react-best-practices；同開發交接時等佢哋自己裝。
「生成嘅代碼瀏覽器兼容？」
補一句目標瀏覽器，避免 container queries 等新特性中伏。
小結
設計師裝 Skill：「出稿一個、審計一個、按需要引入」。
find-skills + web-design-guidelines 打底；frontend-design 出界面；canvas-design 做示意圖；remotion-best-practices 做動效片；skill-creator 沉澱品牌規範。唔好同工程嘅性能 skill 撈亂裝，上下文越乾淨，輸出越似你嘅系統。
「可以先試：」npx skills find accessibility，拎一頁現有稿行一次 audit。
設計師的 Claude Skill 清單：出稿、審計、動效，各管一段
基於 skills.sh 設計類安裝數據 + SkillsMP 視覺類索引整理
設計師用 Claude，常見卡點不是「不會描述審美」，是「每次都要重新講設計系統、間距規則、交付格式」。Skill 把這些寫死，觸發詞對了就走同一套流程。
這篇只談設計相關：出界面、審界面、做動效片、整理設計規範。工程向的 React 性能規範不在正文裏——那是開發的事，文末擴展裏提一句即可。
一張表看懂六款 Skill
「6 個核心 Skill」：2 個必裝，4 個按項目選裝。
01 · 設計交付鏈路上，Skill 放哪
我習慣拆成四步，每步最多一個 Skill，避免 Agent 混規範：
出稿和審計不要對調。先 audit 空頁面沒意義；先出稿再 audit，改動能落在具體組件上。
02 · frontend-design：剋制 AI 默認 UI
anthropics/skills 裏的 「frontend-design」 在 skills.sh 安裝榜長期前三。它乾的不是「隨便畫個網頁」，是「限制那種紫漸變、Inter 字體堆疊的通用 AI 皮」。
npx skills add anthropics/skills --skill frontend-design
「適合：」 活動頁初稿、內部工具面板、給開發看的 HTML/CSS 參考。
我會附上品牌色 hex、字號階梯、圓角規則，讓它一次貼近設計系統。
「觸發示例：」 「按這份 brief 做一版移動端優先的註冊頁，不要默認 AI 風格」。
03 · web-design-guidelines：給稿子做體檢
vercel-labs/agent-skills 裏的 「web-design-guidelines」 和 frontend-design 安裝量同級，但角色不同：它是「審計清單」，不是出圖工具。
npx skills add vercel-labs/agent-skills --skill web-design-guidelines
說「review 這個頁面的 UX」「查無障礙問題」，它會按文件列出違規項。和設計走查表類似，快，但代替不了真實用戶測試。
04 · canvas-design 與 remotion：靜態圖 vs 動效片
「canvas-design」（anthropics/skills）適合技術分享配圖、流程說明、封面構圖——用自然語言描述節點關係，導出 PNG/PDF 插進文檔或 Figma 再精修。
npx skills add anthropics/skills --skill canvas-design
「remotion-best-practices」 適合可重複的動效：產品 Demo、指標動畫、社媒切片。skills.sh 前五里唯一的視頻 skill，Remotion 官方維護。
npx skills add remotion-dev/skills --skill remotion-best-practices
靜態品牌 KV 仍以 Figma 為主；Skill 更適合「要改數字就要重渲」的數據類動效，版本可控。
05 · skill-creator：把設計系統寫進 Agent
團隊有 Figma 變量、間距 8pt 柵格、組件命名規範——每次口述很煩。用 「skill-creator」 封成一份 SKILL.md，以後說「按團隊設計規範改這頁」就加載同一套。
npx skills add anthropics/skills --skill skill-creator
我在 Skill 裏會寫：禁止用 #6366f1 以外的主色、標題最大兩級、圖片必須帶 alt。比長 system prompt 穩，改規範只改一個文件。
「find-skills 別忘了」
設計垂直 skill 更新快，裝固定清單不如先npx skills add vercel-labs/skills@find-skills -y -g，再搜 figma、design-system、a11y 等關鍵詞。
06 · 設計師安裝清單
npx skills add vercel-labs/skills@find-skills -y -g | ||
npx skills add vercel-labs/agent-skills --skill web-design-guidelines | ||
npx skills add anthropics/skills --skill frontend-design | ||
npx skills add anthropics/skills --skill canvas-design | ||
npx skills add remotion-dev/skills --skill remotion-best-practices | ||
npx skills add anthropics/skills --skill skill-creator |
SkillsMP 上按「設計」「視覺」標籤還能挖到社區包，裝前打開 GitHub 看最近有沒有 commit。
常見問題
「會取代 Figma 嗎？」
不會。Skill 出參考代碼或靜態圖，最終視覺仍以你的源文件為準。
「開發用的 React 規範要裝嗎？」
你不寫代碼可以跳過 vercel-react-best-practices；和開發交接時讓他們自己裝。
「生成的代碼瀏覽器兼容？」
補一句目標瀏覽器，避免 container queries 等新特性踩坑。
小結
設計師裝 Skill：「出稿一個、審計一個、按需引入」。
find-skills + web-design-guidelines 打底；frontend-design 出界面；canvas-design 做示意圖；remotion-best-practices 做動效片；skill-creator 沉澱品牌規範。別和工程的性能 skill 混裝，上下文越乾淨，輸出越像你的系統。
「可以先試：」npx skills find accessibility，拿一頁現有稿跑一遍 audit。