設計 skill 的實用差異主要來自偵測與修復,而非設計詞彙量。
編者手記
偵測與修復比設計詞彙庫更實用。
pbakaus/impeccable內建 CLI,可偵測 24 種 anti-pattern(紫漸層、bounce easing、dark glow 等)。相較ui-ux-pro-max的資料庫式推薦,它直接定位並修復問題。設計 skill 已涵蓋動態影片,不限於靜態 UI。
heygen-com/hyperframes以「Write HTML, render video」產生產品發布影片與教學動畫,比 Remotion 輕量、agent-first。Tenten 目前未佈局此類交付。正式設計建議用三件套,而非單一 skill。
組合:
frontend-design(方向)、impeccable(偵測修復)、web-design-guidelines(合規)。詳見文末配置建議。
已驗證 1K+ Stars
有 1K+ stars 證據的設計 skill,涵蓋偵測修復、設計推薦庫、design-to-code、動態影片與行動 UI。
主表
DESIGN SKILLS · 1K+ STARS 已驗證
排名 01/11
pbakaus / impeccable反 AI-slop 的偵測與修復 skill
jQuery UI 創作者 Paul Bakaus 開發;偵測 + 修復,不只生成
子命令涵蓋 /audit、/polish、/critique、/normalize、/bolder、/shape、/delight、/optimize。內建 CLI(npx impeccable detect)可偵測 24 種 anti-pattern(紫漸層、bounce easing、dark glow 等),不裝 AI agent 也能單獨使用。相較 UI UX Pro Max,提供程式化偵測與修復,而非設計詞彙推薦。
- ★ 28.1K（skill）/ 31.6K（repo）
- 偵測 + 修復
- 內建 CLI
- Paul Bakaus
- /
- 11
- Stars
- 28.1K / 31.6K
- 類型
- Design Skill
- 作者
- Paul Bakaus
排名 02
anthropics / skillsAnthropic 官方設計 skill 合集
frontend-design、canvas-design、brand-guidelines
針對 Inter 字型、紫色漸層、預設卡片版型等「AI slop」提供官方準則。常作為其他設計 skill 的基準。
- ★ 65,847
- ✓ Anthropic 官方
- frontend-design
- Stars
- 65,847
- 類型
- 官方合集
排名 03
anthropics / claude-codefrontend-design 的 Claude Code plugin 版
同樣內容,以 Claude Code plugin 形式封裝
Claude Code CLI 使用者用 /plugin marketplace add 安裝較方便。內容與官方 frontend-design 一致。
- ★ 65,362
- ✓ 官方 Plugin
- 一鍵安裝
- Stars
- 65,362
- 類型
- 官方 Plugin
排名 04
nextlevelbuilder / ui-ux-pro-max-skill資料庫式設計推薦 skill
50+ 風格 · 161 配色 · 57 字體配對 · 99 UX 守則
內建 25 種圖表、10 個技術 stack 的搜尋資料庫,用 BM25 + 正則 hybrid search 推薦設計系統。屬資料庫式推薦:對新手友善,對資深設計師可能過於規格化。v2.5 起加入 banner-design / slides / Jetpack Compose。
- ★ 84.2K
- Design Intelligence
- 10 技術 stack
- Stars
- 84.2K
- 類型
- 設計智能庫
排名 05
obra / superpowers通用 skill 框架(設計工作流上游)
通用 skill 框架,涵蓋設計確認到交付
brainstorming → 設計確認 → 子代理 → TDD 全流程。不是純設計 skill,而是把設計卡進整條工程方法論的上游。
- ★ 170,634
- 通用框架
- 工作流上游
- Stars
- 170,634
- 類型
- Skill 框架
排名 06
vercel-labs / agent-skillsWeb 介面合規守則(Vercel 官方)
web-design-guidelines · 每週 133k 次安裝
100+ 條 Web Interface Guidelines。與 frontend-design 互補:frontend-design 決定方向,本守則負責正確性與合規。
- ★ 19,487
- ✓ Vercel 官方
- 合規守則
- Stars
- 19,487
- 類型
- Vercel 官方
排名 07
Leonxlnx / Taste Skill風格校準設計套件
11 個變體 + 3 個圖像生成 skill
以 3 參數 equalizer 調整風格(variance / motion / density),用於校準 AI 產出的視覺風格。
- ★ 18,400
- 品味校準
- 圖像生成
- Stars
- 18,400
- 類型
- 設計套件
排名 08
heygen-com / hyperframesHTML 轉影片的 motion graphics skill
「Write HTML, render video」· HeyGen 官方 video skill
用 HTML + GSAP 產生產品發布影片、PR walkthrough、教學動畫。屬 motion graphics 類,比 Remotion 輕量、agent-first,將設計輸出從靜態 UI 擴及動態影片。
- ★ 22.4K
- ✓ HeyGen 官方
- motion graphics
- Stars
- 22.4K
- 類型
- Video Skill
排名 09
heygen-com / hyperframes-launch-videohyperframes 範例 composition 庫
HeyGen 自家發布影片的開源 composition 原始檔
可 clone 直接 render。非 skill 本體,內含 CSS animations、GSAP、Lottie、shaders、Three.js、footage compositing 等技法,可作為 hyperframes 的入門參考。
- Showcase Repo
- composition 範本
- Stars
- 較小
- 類型
- 範例庫
排名 10
JCodesMore / ai-website-cloner-template網站逆向工程 skill + 範本
一個 URL,平行 builder 重建整站
跑 /clone-website,agent 會 inspect 網站、抽 design tokens、寫 component specs、派平行 builder 重建每個 section。用途:競品分析、品牌參考、客戶提案速建。Tenten 提案前可先生出對方現有網站的可改版本。
- ★ 14.6K
- 逆向工程
- Skill + Template
- Stars
- 14.6K
- 類型
- Clone Template
排名 11
expo / skills行動 UI 原生 pattern skill
iOS 18/26、Android 16 原生樣式
把行動平台的原生互動與版型 pattern 餵給 agent;Expo 官方數據採用率 +46%。適用 React Native / Expo 專案。
- ★ 1,837
- ✓ Expo 官方
- 行動 UI
- Stars
- 1,837
- 類型
- 行動 UI Skill
新興 / 細分設計 Skill
star 未在搜尋結果中標示,依主題定位收錄:design token 抽取、單一美學流派、設計稽核評分。
副表
新興 · 細分 · STAR 未驗證但定位獨特
排名 12
arvindrk / extract-design-systemDesign token 抽取(輕量)
只取 tokens,不取整站 code
從任何公開網站抽出 colors / typography / spacing / radius / shadows,輸出 W3C-compatible tokens.json + tokens.css。比 ai-website-cloner 輕量,只取 tokens。
- Design Tokens
- W3C tokens
- 主題
- Token 抽取
- Star
- 未驗證
排名 13
Manavarya09 / design-extractDesign token 多平台輸出
一鍵輸出 17+ 檔,跨多平台
npx designlang stripe.com 一鍵輸出 DTCG tokens、Tailwind v4、shadcn 主題、Figma variables、iOS SwiftUI、Android Compose、Flutter、WordPress、PDF brand book。輸出涵蓋面相對最廣。
- Design Tokens
- 17+ 平台輸出
- 主題
- 全平台輸出
- Star
- 未驗證
排名 14
dominikmartn / nothing-design-skill單一美學流派 skill(Nothing 風格)
專做 Nothing 品牌設計語彙
monochrome、typographic、industrial、OLED black 暗模式。單一美學 skill 比 frontend-design 的自選方向更可預測,適合需要強品牌一致性的場景。
- 單一美學
- 品牌一致性
- 主題
- 美學流派
- Star
- 未驗證
排名 15
Ashutos1997 / claude-design-auditor-skill設計稽核與評分 skill
19 類守則稽核,輸出可讀分數報告
輸出含 mini bar chart 的分數、WCAG 接近性分數、Ethics 分數(dark patterns)、Usability 分數。輸入支援 Figma MCP / CSS / 截圖 / wireframe。與 impeccable 的生成+偵測不同,本 skill 專注評分審計,適合交付前 QA。
- 設計稽核
- WCAG / Ethics 分數
- 主題
- 稽核 / 評分
- Star
- 未驗證
Codex 內建的 Frontend App Builder。
另補
直接在 Codex skill marketplace 搜尋下載,不在公開 GitHub 上以獨立 repo 形式存在,因此無 star 數可比。工作流與 Taste Skill 類似:先生成設計圖,再轉程式碼。但有兩個關鍵差異:
A · 對圖像還原度要求更嚴格。
顏色不能任意解讀(要從 reference 抽精準 hex),圖示風格要逐一對齊,同一頁面不能混 line / fill / duotone。
B · 整體流程更工程化。
適合做客戶交付,不適合 mood-board 階段的快速探索。要快速發散概念時,改用 Taste Skill 之類更鬆的工具。
依交付階段組合 skill。
配置建議
依交付情境組合 skill,而非追單一工具。以下五個階段,各對應一套組合。
01 · 新客戶提案 / 競品研究
30 分鐘生出可改版對照組
JCodesMore/ai-website-cloner-template + arvindrk/extract-design-system → 逆向他們現有網站、抽出 token,半小時內做出可直接改版的對照組。
02 · 正式設計階段
正式設計三件套
anthropics/frontend-design(方向)、pbakaus/impeccable(偵測與修復)、vercel-labs/web-design-guidelines(合規)。
03 · 交付前 QA
出客戶可讀的分數報告
Ashutos1997/claude-design-auditor-skill 產出 WCAG / Ethics / Usability 分數,比口頭說「我覺得 OK」可信很多。
04 · 動態內容
產品發布影片 & 案例 walkthrough
heygen-com/hyperframes + hyperframes-launch-video 範本。Tenten 目前未佈局此類交付。
05 · 內部品牌一致性
做一個 tenten-editorial-skill
參考 dominikmartn/nothing-design-skill 的「單一美學」模式,把現有 HTML 報告模板封裝成內部 skill(Instrument Serif + DM Sans + paper #f6f4f0 + ink #0a0f14 + 暗底 hero radial glow)。比每次手動套樣式快,也比放在 SKILL.md context 裡更明確被觸發。
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 設計與策展。星數為整理時查到的顯示值、僅供人氣參考,副表項目 star 未驗證,實際數值與維護狀態以各 repo 為準。轉載與引用請保留來源。