| 1 |
anthropics/skills |
144k |
官方 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 建置。 |
| 2 |
garrytan/gstack |
105k |
Claude Code workflow / skills pack |
非純前端，但包含 designer / design-review 類工作流 |
把 Claude Code 變成 CEO、Designer、Eng Manager、QA 等角色系統 |
高人氣但範圍很廣。適合當「工作流層」，不是直接取代 frontend-design。 |
| 3 |
nextlevelbuilder/ui-ux-pro-max-skill |
85.2k |
UI/UX Skill |
更接近「設計智能層」而不是單一 frontend generator |
多平台 UI/UX 設計規則、設計系統、社群圖像、HTML/CSS 輸出 |
看起來功能很大，但要實測。適合拆出 rules 放進 Claude Code / Codex。 |
| 4 |
abi/screenshot-to-code |
72.7k |
Screenshot / Figma to code |
與 frontend-design 互補；它從視覺稿生成 code |
截圖、mockup、Figma → HTML / Tailwind / React / Vue |
最實用的 design-to-code 類 repo 之一。適合用在「已有設計稿 → 前端碼」流程。 |
| 5 |
ComposioHQ/awesome-claude-skills |
62.6k |
Claude Skills 目錄 |
Skill 生態索引，不是單一 frontend skill |
找 Claude Skills、理解 Skill 結構 |
適合找新 skill。README 對 SKILL.md 結構、progressive loading、skills vs MCP vs tools 有整理。 |
| 6 |
onlook-dev/onlook |
25.8k |
AI-first visual React editor |
與 frontend-design 目標相近，但偏 visual editor |
直接視覺化編輯 React App、style、layout |
若你要「設計師也能改 React UI」，Onlook 比純 prompt skill 更接近實際產品流程。 |
| 7 |
dyad-sh/dyad |
20.5k |
Local AI app builder |
類 v0 / Lovable / Bolt；不只是 UI |
本機 AI app builder，支援自帶 API key |
適合想要本機、低 lock-in 的 vibe coding / app builder 流程。 |
| 8 |
stackblitz/bolt.new |
16.4k |
Browser full-stack AI dev agent |
比 frontend-design 更完整，涵蓋 run / edit / deploy |
瀏覽器內 prompt、run、edit、deploy full-stack app |
適合研究 AI web dev agent 架構，不是單純 design skill。 |
| 9 |
travisvn/awesome-claude-skills |
13k |
Claude Skills 目錄 |
收錄官方 frontend-design 、web-artifacts-builder 等 |
快速查找 Claude Skills |
比 Composio 版本更偏 curated list；適合找實際可用 skill 名稱。 |
| 10 |
Nutlope/llamacoder |
6.9k |
Claude Artifacts 類 app generator |
與 web-artifacts-builder 更像 |
一句 prompt 生成小型 app / artifact |
適合研究「Claude Artifacts-style app builder」的前端架構。 |
| 11 |
nraiden/cofounder |
6.7k |
Full-stack + generative UI |
比 openv0 新；偏 app-level generative UI |
AI-generated apps、full-stack、generative UI |
openv0 作者的新方向；適合研究 generative UI pipeline。 |
| 12 |
superdesigndev/superdesign |
6.5k |
AI Product Design Agent |
很接近 frontend-design，但以 IDE extension 形式存在 |
在 Cursor / Windsurf / Claude Code / VS Code 產生 UI mockup、component、wireframe |
實用度高。它不是單純 SKILL.md，而是把設計 agent 放進 IDE。 |
| 13 |
heilcheng/awesome-agent-skills |
5.2k |
Agent Skills 目錄 |
技能目錄，含 frontend / artifact 類技能 |
找 Agent Skills、看 skill 安全與貢獻規則 |
適合掃描生態；不是直接拿來產 UI。 |
| 14 |
21st-dev/magic-mcp |
5k |
UI generation MCP |
與 frontend-design 互補；MCP 工具層 |
在 Cursor / Windsurf / Cline / Claude 內用自然語言生成 UI component |
MCP 化的 v0-like component generator。適合搭配 Claude Code，不是替代 SKILL.md。 |
| 15 |
nraiden/openv0 |
3.9k |
Generative UI component framework |
與 frontend-design 高相關，但已標註不維護 |
AI 生成並迭代 React / Next.js / Svelte UI component |
歷史價值高；README 已寫明不再維護，新專案轉向 Cofounder。 |
| 16 |
jezweb/claude-skills |
809 |
Claude Code frontend skills |
真正接近 SKILL.md；含 design-loop 、design-review |
自動多頁網站 builder、HTML/Tailwind、視覺驗證 |
小眾但很對題。design-loop 用 baton loop 自動生成多頁網站，比官方 frontend-design 更流程化。 |
| 17 |
Ilm-Alan/frontend-design |
42 |
Frontend design SKILL.md |
最接近你給的連結；可直接安裝到 Claude / Codex / Gemini |
8 種 aesthetic anchors、CSS token 化風格規範 |
Stars 少，但方向最準。適合拿來改成自己的 Tenten / 客戶品牌 frontend skill。 |
| 18 |
shomtsm/figma-review-skill |
7 |
Figma review Claude Skill |
偏 review，不是生成 |
Figma 設計審查、工程角度 comment、Figma MCP |
若流程是 Figma → engineering review，很有參考價值。 |
| 19 |
AslanMazhidov/design-review-skill |
2 |
Claude Code design review skill |
偏 review，不是生成 |
Playwright MCP 截圖、審查 typography / contrast / hierarchy / spacing |
Stars 很少，但方法正確：真正看畫面，而不是只讀 code 猜 UI。 |