與 frontend-design 相似的設計技能排行｜19 個 GitHub 倉庫

Skills Atlas — Design Edition 與 frontend-design 相似的設計技能與工具。19 個 GitHub 倉庫，依人氣與相似度排行。

以 Anthropic 官方 frontend-design / SKILL.md 為基準，盤點 19 個方向相近的設計技能、生成式 UI 工具、design-to-code 與設計審查 skill。排序依「GitHub stars + 與 frontend-design 相似度」。Stars 為目前查到的顯示值，僅供人氣參考，不等於品質保證。定位最貼近 SKILL.md 的倉庫，星數不一定最高。

收錄倉庫

19 Repos

官方技能、生成式 UI、design-to-code、AI app builder、設計審查 skill。

Stars 區間

2 – 144k

從 144k 的官方倉庫，到僅 2 顆星但方法正確的審查 skill。

類型

6 Types

官方 Skills · 工作流 · 生成式 UI · design-to-code · app builder · 目錄。

基準

SKILL.md

以 anthropics/skills 的 frontend-design 為相似度比較基準。

高 Stars 代表人氣，不直接反映對 frontend-design 的契合度。

編者手記 EDITOR'S NOTE

排序按「GitHub stars + 與 frontend-design 相似度」。Stars 為目前查到的 GitHub 顯示值，請視為人氣指標。範圍越廣的工具往往星數越高，但不代表它最貼近 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。詳見文末「最佳組合」。

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

Stars 144k 類型官方 Skills 關係原始來源

garrytan / gstack

Claude 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

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

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

ComposioHQ / awesome-claude-skills

Claude 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 目錄

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

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

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

travisvn / awesome-claude-skills

Curated 版 Claude Skills 目錄

收錄官方 frontend-design、web-artifacts-builder

用來查找 Claude Skills。採人工篩選的 curated list 格式，適合直接定位可用的 skill 名稱。

★ 13k Skills 目錄 Curated

Stars 13k 類型 Skills 目錄

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

nraiden / cofounder

Full-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

superdesigndev / superdesign

IDE 擴充形式的 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

heilcheng / awesome-agent-skills

Agent Skills 索引目錄

含 frontend / artifact 類技能

用來查找 Agent Skills，並了解 skill 的安全與貢獻規則。適合掃描生態，非直接生成 UI 的工具。

★ 5.2k Agent Skills 目錄

Stars 5.2k 類型 Skills 目錄

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

nraiden / openv0

AI 生成 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

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

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

shomtsm / figma-review-skill

Figma 設計審查 skill

偏 review，不是生成

Figma 設計審查、工程角度 comment、Figma MCP。若你的流程是 Figma → engineering review，很有參考價值。

★ 7 Figma Review Figma MCP

Stars 7 類型 Design Review

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 的入口。

Skills 已經開源。
接上生產環境這一段，
是 Tenten 在做的事。

Tenten 是 AI-First 設計與技術顧問公司。我們把 Claude、MCP、Agentic Commerce 接進 Headless CMS、Webflow、Shopify Plus 的企業級交付 — 讓這份排行裡每一個好的開源資產，都能真正跑在你正式上線的 pipeline 上。

Tenten 如何部署這些 Skills

Skills 架構諮詢

依團隊與堆疊選出適配 skills，建立 OpenClaw 路由與 CI/CD 部署流程。

Claude Design System Sprint

兩週固定價格，接上 frontend-design + brand-guidelines 到 production。

Agentic Commerce Build

Shopify Plus / Webflow / Headless 遷移，搭配 Claude + MCP 營運層。