顶流人气项目排名
Skill 名称
核心用途
GitHub 链接
⭐ Stars
适用 Agent
1
mattpocock/skills
全流程软件工程 Skill 合集，内置
53 个能力模块
（TDD、需求澄清
grill-with-docs
、Code Review、ADR 等），强制 AI 先确认需求再写代码，避免瞎猜需求
https://github.com/mattpocock/skills
~240k+
Claude Code、Codex 及各类 AI 编码代理
2
anthropics/skills
Anthropic 官方技能集，核心
frontend-design
消除 AI 模板化 UI 审美，输出生产级前端；附带
webapp-testing
Playwright 自动化测试、
ui-ux-pro-max
设计智能库等能力
https://github.com/anthropics/skills
~173k
Claude Code、Claude Desktop 及所有兼容 Agent Skills 规范的 AI 代理
3
Screenshot to Code
截图/设计稿/屏幕录制直接转换成可运行前端代码（HTML/CSS/React/Vue 等），视觉生成代码领域的标杆项目
https://github.com/abi/screenshot-to-code
~77k
通用 AI 编码助手
UI/UX 设计与审美类排名
Skill 名称
核心用途
GitHub 链接
⭐ Stars
适用 Agent
4
taste-skill
给 AI 注入设计品味的反模板化前端技能框架，包含 taste-skill（核心）、redesign-skill、output-skill、soft-skill 四个子技能
。Vercel 官方赞助项目
https://github.com/Leonxlnx/taste-skill
~84.7k
Claude Code、Cursor 等 AI 编码 Agent
5
ui-ux-pro-max-skill
多端 UI/UX 增强 Skill，内置
50+ 样式、161 种调色板、57 种字体配对、99 条 UX 规则
，覆盖 10 个技术栈
；面向 Cursor/Claude Code，输出响应式、多端适配界面
https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
~125k
Claude Code、Cursor、TRAE
6
emilkowalski/skills
前端动画与设计品味专项 Skill，包含设计哲学、动画审查、代码库审计、词汇和 Apple 设计原则等 8 个 Skill
。作者曾就职 Vercel 和 Linear
https://github.com/emilkowalski/skills
~14.5k
Claude Code、Cursor 等 AI 编码 Agent
7
impeccable
前端 UI 质量校验 Skill，提供
1 项核心技能、23 条设计命令、44 条确定性检测规则
。约束 AI 输出排版、间距、可访问性，提升页面产品质感
https://github.com/pbakaus/impeccable
待核实（早期报道称 96k+
，建议直接访问）
Claude Code、Cursor 等 AI 编码 Agent
8
frontend-slides
AI 生成零依赖、带动画的单 HTML 演示文稿，支持从 PPTX 文件输入生成
https://github.com/zarazhangrui/frontend-slides
~28.4k
通用 AI 编码助手
9
huashu-design
面向 AI 代理的快速 HTML 原型设计工具，HTML 优先的设计工作流
https://github.com/alchaincyf/huashu-design
~23.9k
AI 编码代理
️ 功能与工程化类排名
Skill 名称
核心用途
GitHub 链接
⭐ Stars
适用 Agent
10
EffectiveHTML
供 Coding Agent 使用的 HTML 技能集，分为
任务路由、线框、原型、图表、计划与视觉
六个 Skill，主张先确定页面结构再写样式，自动检查加载、报错等交互状态
https://github.com/EffectiveHTML/EffectiveHTML
~3k
Claude Code、Codex 等 Coding Agent
11
humanlayer/skills
强化 Claude Code 工程化的工具包，包含
improve-claude-md
（改进指令遵循）、
narrow-react-prop-types
（React 类型匹配）、
build-iterated-agentic-loop
（生成迭代式工作流）等 5 个技能
https://github.com/humanlayer/skills
~2.7k
Claude Code
12
archify
AI 生成自包含 HTML 架构图、流程图、时序图；前端可直接嵌入页面，用于前端项目架构梳理
https://github.com/tt-a1i/archify
~27.4k
通用 AI 编码助手
13
minimax-ai/skills
多能力 Skill 集合，共 24 个能力模块，包含专门的
frontend-dev
前端开发 Skill
https://github.com/minimax-ai/skills
待核实
Claude Code 等 AI 编码 Agent
索引与合集Skill 名称
核心用途
GitHub 链接
⭐ Stars
适用 Agent
awesome-claude-ui-armory
Claude Code UI Skill 精选索引清单（本身不含代码），收录
frontend-design
、
ui-ux-pro-max
、
web-design
、
impeccable
、
tasteful-ui-skill
等大量前端 UI 相关 Skill
https://github.com/ezra-y/awesome-claude-ui-armory
~1.4k
Claude Code
BoardUI
面向 AI 代理界面场景的 React 组件设计系统
https://github.com/BoardUI/boardui
~67
AI 代理界面开发
使用方式说明大多数 Agent Skill 的安装方式类似，以 npx skills add 命令为主：
# 示例：安装 mattpocock/skills 中的某个 Skill
npx skills add mattpocock/skills --skill grill-with-docs
# 示例：安装 humanlayer/skills
npx skills add humanlayer/skills --skill improve-claude-md[reference:32]注：GitHub Star 数为动态数据，以上为 2026 年 9 月 7 日前后快照参考值，实际请以 GitHub 页面为准。