高 Stars 代表人氣，不直接反映對 frontend-design 的契合度。
編者手記
官方 frontend-design 的定位是「審美規則層」，需搭配生成工具才能產出元件。
它不會幫你生出一個 app，而是逼 Claude 避開 generic AI aesthetics、做出有觀點的 UI 決策。要實際生成 component 或 app，得搭配
web-artifacts-builder、生成式 UI 工具或 app builder。高 Stars 的倉庫涵蓋範圍較廣，與 frontend-design 定位不一定吻合。
garrytan/gstack（105k）、bolt.new（16.4k）涵蓋的是整個工作流或 full-stack app；真正貼著 frontend-design/SKILL.md 的，反而是Ilm-Alan/frontend-design（42）、jezweb/claude-skills（809）這類小眾倉庫。建議以四個倉庫組合使用，各負責規則、架構、轉碼與視覺 QA 四個環節。
官方
frontend-design負責審美與產出規則、web-artifacts-builder負責 React / Tailwind / shadcn artifact 架構、screenshot-to-code負責 design-to-code、design-review-skill負責視覺 QA。詳見文末「最佳組合」。
完整排名 The Leaderboard
19 個與 frontend-design 方向相近的倉庫，依 GitHub stars 與相似度由高到低排列。Stars 僅供人氣參考。
完整排名
RANKED BY STARS + SIMILARITY TO frontend-design
排名 01/19
anthropics / skills官方 Agent Skills 原始倉庫
含 frontend-design、web-artifacts-builder、theme-factory、canvas-design
Claude / Agent Skill 的標準範本。frontend-design 強調 production-grade UI、避免 generic AI aesthetics；web-artifacts-builder 偏 React + Tailwind + shadcn/ui 的 artifact 建置。此倉庫是所有相似專案的上游來源。
- ★ 144k
- ✓ Anthropic 官方
- 官方 Agent Skills
- frontend-design
- /
- 19
- Stars
- 144k
- 類型
- 官方 Skills
- 關係
- 原始來源
排名 02
garrytan / gstackClaude Code 角色分工工作流套件
非純前端，但含 designer / design-review 類工作流
Claude Code workflow / skills pack，將 AI 分配為 CEO、Designer、Eng Manager、QA 等角色。範圍涵蓋整個工作流，適合作為「工作流層」使用，定位與 frontend-design 不同。
- ★ 105k
- Claude Code workflow
- 含 design-review
- Stars
- 105k
- 類型
- Workflow Pack
排名 03
nextlevelbuilder / ui-ux-pro-max-skill多平台 UI/UX 設計規則 Skill
偏設計規則庫，非單一 frontend generator
涵蓋多平台 UI/UX 設計規則、設計系統、社群圖像、HTML/CSS 輸出。適合拆出 rules 放進 Claude Code / Codex 使用，建議實測後再整合。
- ★ 85.2k
- UI/UX Skill
- 設計系統
- Stars
- 85.2k
- 類型
- UI/UX Skill
排名 04
abi / screenshot-to-code截圖或 Figma 轉前端碼的 design-to-code 工具
與 frontend-design 互補；從視覺稿生成 code
截圖、mockup、Figma → HTML / Tailwind / React / Vue。適合**「已有設計稿 → 前端碼」**流程，與 frontend-design 互補使用。
- ★ 72.7k
- Screenshot/Figma → code
- 互補
- Stars
- 72.7k
- 類型
- Design→Code
排名 05
ComposioHQ / awesome-claude-skillsClaude Skills 社群目錄
Skill 目錄，非單一 frontend skill
用來查找 Claude Skills 與理解 Skill 結構。README 整理了 SKILL.md 結構、progressive loading、skills vs MCP vs tools 的差異，可作為查找新 skill 的入口。
- ★ 62.6k
- Skills 目錄
- 結構說明
- Stars
- 62.6k
- 類型
- Skills 目錄
排名 06
onlook-dev / onlook可視覺化編輯 React App 的 AI-first 編輯器
目標相近，偏 visual editor
直接視覺化編輯 React App 的 style 與 layout。適合設計師需要直接修改 React UI 的場景，比純 prompt skill 更貼近產品設計流程。
- ★ 25.8k
- Visual React Editor
- Stars
- 25.8k
- 類型
- Visual Editor
排名 07
dyad-sh / dyad本機執行的 AI app builder
類 v0 / Lovable / Bolt，涵蓋整個 app 流程
本機 AI app builder，支援自帶 API key。適合要求本機執行、低平台依賴的 app builder 流程。
- ★ 20.5k
- Local AI app builder
- BYO API key
- Stars
- 20.5k
- 類型
- App Builder
排名 08
stackblitz / bolt.new瀏覽器內 prompt、run、edit、deploy 的 full-stack AI agent
涵蓋 run / edit / deploy，範圍超出純設計 skill
在瀏覽器內完成 full-stack app 的生成、執行、編輯與部署。適合研究 AI web dev agent 架構，定位上不屬於純設計 skill。
- ★ 16.4k
- Full-stack AI agent
- run/edit/deploy
- Stars
- 16.4k
- 類型
- Dev Agent
排名 09
travisvn / awesome-claude-skillsCurated 版 Claude Skills 目錄
收錄官方 frontend-design、web-artifacts-builder
用來查找 Claude Skills。採人工篩選的 curated list 格式，適合直接定位可用的 skill 名稱。
- ★ 13k
- Skills 目錄
- Curated
- Stars
- 13k
- 類型
- Skills 目錄
排名 10
Nutlope / llamacoder單一 prompt 生成小型 app 的 artifact generator
定位與 web-artifacts-builder 相近
一句 prompt 生成小型 app / artifact。適合研究 Claude Artifacts 風格 app builder 的前端架構。
- ★ 6.9k
- Artifact Generator
- Stars
- 6.9k
- 類型
- App Generator
排名 11
nraiden / cofounderFull-stack AI app 與 generative UI 框架
openv0 作者的後續專案，偏 app-level generative UI
支援 AI-generated apps、full-stack、generative UI。適合研究 generative UI pipeline 架構。
- ★ 6.7k
- Generative UI
- Full-stack
- Stars
- 6.7k
- 類型
- Generative UI
排名 12
superdesigndev / superdesignIDE 擴充形式的 AI Product Design Agent
定位接近 frontend-design，以 IDE extension 形式提供
在 Cursor / Windsurf / Claude Code / VS Code 內產生 UI mockup、component、wireframe。以 IDE 擴充形式整合設計 agent，非純 SKILL.md 格式。
- ★ 6.5k
- Product Design Agent
- IDE Extension
- Stars
- 6.5k
- 類型
- Design Agent
排名 13
heilcheng / awesome-agent-skillsAgent Skills 索引目錄
含 frontend / artifact 類技能
用來查找 Agent Skills，並了解 skill 的安全與貢獻規則。適合掃描生態，非直接生成 UI 的工具。
- ★ 5.2k
- Agent Skills 目錄
- Stars
- 5.2k
- 類型
- Skills 目錄
排名 14
21st-dev / magic-mcp以 MCP 整合的 UI component 生成工具
與 frontend-design 互補，屬 MCP 工具層
在 Cursor / Windsurf / Cline / Claude 內用自然語言生成 UI component。為 MCP 化的 v0-like component generator，適合搭配 Claude Code 使用，不替代 SKILL.md。
- ★ 5k
- UI Generation MCP
- Stars
- 5k
- 類型
- UI MCP
排名 15
nraiden / openv0AI 生成 React / Next.js / Svelte UI 的 generative UI framework
與 frontend-design 定位相近，但 README 已標註停止維護
AI 生成並迭代 React / Next.js / Svelte UI component。README 已明確標註不再維護，作者新專案已轉向 Cofounder。
- ★ 3.9k
- Generative UI
- 已停止維護
- Stars
- 3.9k
- 類型
- UI Framework
排名 16
jezweb / claude-skills含 design-loop 與 design-review 的 Claude Code frontend skills
定位接近 SKILL.md，含 design-loop、design-review
自動多頁網站 builder、HTML/Tailwind、視覺驗證。design-loop 以 baton loop 方式自動生成多頁網站，流程化程度高於官方 frontend-design。
- ★ 809
- Claude Code frontend
- design-loop
- Stars
- 809
- 類型
- Frontend Skills
排名 17
Ilm-Alan / frontend-design定位最貼近 frontend-design SKILL.md 的社群實作
可直接安裝到 Claude / Codex / Gemini
包含 8 種 aesthetic anchors 與 CSS token 化的風格規範。Stars 數少但結構與官方 SKILL.md 最為吻合，適合作為自有品牌 frontend skill 的起點。
- ★ 42
- ✓ 最接近基準
- SKILL.md
- Stars
- 42
- 類型
- Frontend SKILL.md
排名 18
shomtsm / figma-review-skillFigma 設計審查 skill
偏 review，不是生成
Figma 設計審查、工程角度 comment、Figma MCP。若你的流程是 Figma → engineering review，很有參考價值。
- ★ 7
- Figma Review
- Figma MCP
- Stars
- 7
- 類型
- Design Review
排名 19
AslanMazhidov / design-review-skill以 Playwright MCP 截圖進行視覺審查的設計 skill
偏 review，非生成
用 Playwright MCP 截圖，審查 typography / contrast / hierarchy / spacing。Stars 數少，但審查方式以實際畫面為依據，非僅讀 code 推測 UI 狀態。
- ★ 2
- Design Review
- Playwright MCP
- Stars
- 2
- 類型
- Design Review
依規則、生成、轉碼或審查需求，對應選用倉庫。
依需求選
以下六種常見目標，各自對應優先參考的倉庫。
01 · 複製官方 frontend-design 做自己的 skill
從官方倉庫與定位最吻合的版本開始
anthropics/skills 看原始定義，Ilm-Alan/frontend-design 拿來改品牌規範，jezweb/claude-skills 參考它更流程化的 design-loop 寫法。
02 · 想做 AI 生成漂亮 UI / component
生成式 UI 工具
superdesign（IDE 內設計 agent）、21st-dev/magic-mcp（MCP component 生成）、openv0（框架，已停維護）、cofounder（app-level generative UI）。
03 · 想從截圖 / Figma 轉前端碼
design-to-code 路線
abi/screenshot-to-code 把截圖 / Figma 轉成 HTML / Tailwind / React / Vue；shomtsm/figma-review-skill 補上 Figma 審查。
04 · 想做完整 AI app builder
整套 app builder
dyad（本機、低 lock-in）、bolt.new（瀏覽器內 run/edit/deploy）、llamacoder（Artifacts 類 app generator）。
05 · 想建立自己的 Claude Code frontend workflow
自建前端工作流
anthropics/skills 打底，加上 jezweb 的 design-loop 做多頁自動生成，再用 design-review-skill 收尾做視覺 QA。
06 · 想找更多 skills
三個策展目錄
ComposioHQ/awesome-claude-skills、travisvn/awesome-claude-skills、heilcheng/awesome-agent-skills，三者均可作為查找新 skill 的入口。
四個倉庫組合，分別覆蓋規則、架構、轉碼與視覺 QA。
最佳組合
建議的前端設計流程由四個工具串接：審美規則決定方向、artifact 架構負責產出、design-to-code 轉換設計稿、視覺 QA 於上線前審查品質。
推薦堆疊 · Recommended Stack
frontend-design
負責
審美與產出規則
，使 Claude 避開 AI slop，輸出具設計觀點的 UI 決策。
web-artifacts-builder
負責
React / Tailwind / shadcn artifact 架構
，將設計決策轉為可運作的元件。
screenshot-to-code
負責
design-to-code
。已有設計稿時，將視覺稿直接轉為前端碼。
design-review-skill
負責
視覺 QA
（或 jezweb 的 design-review）。以截圖方式檢查字體、對比、層級、間距。
AI-First 設計與技術顧問公司。15+ 年、300+ 品牌。我們把 Claude、MCP、Agentic Commerce 接進 Headless CMS、Webflow、Shopify Plus 的企業級交付 — 讓 AI 透過 GEO (AEO) 找到你的品牌，讓 B2B ABM 把買家轉成營收。
解決方案
By Topic
資源
公司
© 2026 Tenten Inc. · Skills Atlas · Design Edition · 由 Tenten 設計與策展。排序依 GitHub stars 與 frontend-design 相似度，星數為目前查到的顯示值、僅供人氣參考，實際數值與維護狀態以各 repo 為準。轉載與引用請保留來源。