Skills Atlas · Design Edition
設計技能 · Claude / Codex Design Skills

Skills Atlas — Design Edition Design 類 Claude / Codex Skill 清單與配置建議。

Design 類 Claude / Codex Skill 的合併清單。主表 11 項有 1K+ stars 證據,涵蓋偵測修復、設計推薦庫、design-to-code、動態影片與行動 UI。副表 4 項為新興 / 細分作品,star 未驗證。文末附 Codex 內建 Frontend App Builder 說明,以及對應 Tenten 客戶交付五個階段的配置建議。星數為整理時查到的顯示值,僅供人氣參考。

收錄 Skill
15+
主表 11 + 副表 4,另含 Codex 內建 builder。
已驗證 1K+
11
主表項目有明確 1K+ stars 證據。
新興 / 細分
4
star 未驗證,但主題定位獨特、值得追蹤。
配置情境
5
對應 Tenten 客戶交付的五個階段。
01 / 編者手記 怎麼讀這份清單

設計 skill 的實用差異主要來自偵測與修復,而非設計詞彙量。

編者手記 EDITOR'S NOTE

主表 11 項有 1K+ stars 證據。副表 4 項 star 未在搜尋結果中標示,依主題定位收錄。星數為整理時查到的顯示值,僅供人氣參考,以各 repo 為準。

01

偵測與修復比設計詞彙庫更實用。

pbakaus/impeccable 內建 CLI,可偵測 24 種 anti-pattern(紫漸層、bounce easing、dark glow 等)。相較 ui-ux-pro-max 的資料庫式推薦,它直接定位並修復問題。

02

設計 skill 已涵蓋動態影片,不限於靜態 UI。

heygen-com/hyperframes 以「Write HTML, render video」產生產品發布影片與教學動畫,比 Remotion 輕量、agent-first。Tenten 目前未佈局此類交付。

03

正式設計建議用三件套,而非單一 skill。

組合:frontend-design(方向)、impeccable(偵測修復)、web-design-guidelines(合規)。詳見文末配置建議。

02 / 主表 DESIGN SKILLS · 1K+ STARS 已驗證
01

已驗證 1K+ Stars

有 1K+ stars 證據的設計 skill,涵蓋偵測修復、設計推薦庫、design-to-code、動態影片與行動 UI。

11 Entries
1K+ Stars
Claude / Codex
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
Stars 28.1K / 31.6K 類型 Design Skill 作者 Paul Bakaus
02
anthropics / skills

Anthropic 官方設計 skill 合集

frontend-design、canvas-design、brand-guidelines

針對 Inter 字型、紫色漸層、預設卡片版型等「AI slop」提供官方準則。常作為其他設計 skill 的基準。

★ 65,847 ✓ Anthropic 官方 frontend-design
Stars 65,847 類型 官方合集
03
anthropics / claude-code

frontend-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-skills

Web 介面合規守則(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 / hyperframes

HTML 轉影片的 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-video

hyperframes 範例 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
03 / 副表 新興 · 細分 · STAR 未驗證但定位獨特
02

新興 / 細分設計 Skill

star 未在搜尋結果中標示,依主題定位收錄:design token 抽取、單一美學流派、設計稽核評分。

4 Entries
Star 未驗證
定位獨特
12
arvindrk / extract-design-system

Design 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-extract

Design 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 未驗證
04 / 另補 CODEX 內建 FRONTEND APP BUILDER

Codex 內建的 Frontend App Builder。

直接在 Codex skill marketplace 搜尋下載,不在公開 GitHub 上以獨立 repo 形式存在,因此無 star 數可比。工作流與 Taste Skill 類似:先生成設計圖,再轉程式碼。但有兩個關鍵差異:

A

對圖像還原度要求更嚴格。

顏色不能任意解讀(要從 reference 抽精準 hex),圖示風格要逐一對齊,同一頁面不能混 line / fill / duotone。

B

整體流程更工程化。

適合做客戶交付,不適合 mood-board 階段的快速探索。要快速發散概念時,改用 Taste Skill 之類更鬆的工具。

05 / 配置建議 基於 Tenten 客戶交付情境

依交付階段組合 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 裡更明確被觸發。

想把這套設計流程接進交付?

Skill 已經開源。
接上 客戶交付這一段,
是 Tenten 在做的事。

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

預約 30 分鐘諮詢 → Tenten Awesome List