效率神器（五）：18 个 AI Skills，让 Codex 从会写代码变成会干活生成图片
目录
3.https://mcpmarket.com/zh/leaderboards
③web-design-guidelines【前端UI】27k+⭐
④vercel-react-best-practices [React] 27k+⭐
①planning-with-files 【开发计划跟踪】23k+⭐
③superpowers【开发中按步骤开发，强推】225k+⭐
⑤supabase-postgres-best-practices【数据库操作】2k+⭐
③remotion-best-practices【视频制作】3k+⭐
本文主要以 Codex 为例，介绍主流 AI Skills 的安装方式、调用方法和常用技能包。
如果你平时经常用 AI 写代码、做页面、查资料、跑测试，只靠裸模型其实很容易遇到一个问题：它能回答，但不一定会按你的工作流干活。
Skills 的价值就在这里。它可以把一套固定的方法论、工具规范、设计规则或开发流程封装起来，让智能体在合适的场景自动调用。
一前置条件
1.Codex Token消耗使用量
GPT PLUS会员一个月的费用是150￥。只要能帮你节省几小时重复编码、调试、查文档的时间，基本就能回本。如果只是日常办公，或者预算有限，国内也可以看看 WorkBuddy。它的使用体验和 Codex 有点类似，每月还有免费额度。具体用法可以参考微信公众号「数字生命卡卢索」的教程。
2.Codex-skills安装方式：
最简单的方式是：直接告诉模型帮你安装。Claude Code 也是类似逻辑。如果遇到网络问题，可以先用镜像把 Skill 下载到本地，再把本地文件地址告诉模型，让它帮你安装。常见安装方式一般是：npx skills add <skills 仓库地址>如果一个仓库下面有多个 Skill，也可以指定安装其中某一个。
3.Codex-skills使用方式：
Skills 一般有两种调用方式。如果你刚开始用，建议先用显式调用。等熟悉以后，再让模型自动选择。
- 显式调用：输入
$，然后选择你要使用的 Skill。这种方式适合你明确知道当前任务要用哪个 Skill，比如$seo-audit、$frontend-design。- 隐式调用：直接输入需求，让智能体根据任务自动判断是否调用 Skill。比如你说“帮我审计这个网站 SEO”，它可能会自动调用
seo-audit。
二skill相关的网址
1.https://www.skills.sh/
这个网站专注 Skills 的分发和安装。它定义了一套基于
SKILL.md文件的技能规范，并提供npx skills add这样的一键安装命令，安装和体验都比较方便。最有价值的是排行榜。你可以直接看当前热门 Skills，大家都在用的 Top 项目基本都值得关注。
2.https://skillsmp.com/zh
一个独立的社区项目，索引了超过 170万 个来自 GitHub 的
SKILL.md文件。它的特色在于基于美国劳工部标准对 800+ 种职业进行分类，并提供 AI 驱动的语义搜索，让你能根据职业或任务领域来寻找技能。如果你不知道某个场景该用什么 Skill，比如前端开发、SEO、视频生成、浏览器自动化，就可以在这里按方向搜索。
3.https://mcpmarket.com/zh/leaderboards
平台收录了超过 31,000 个MCP技能，并提供 Leaderboard (排行榜) 和分类搜索功能，方便你找到热门的 MCP 服务器。目前来看，由于skills使用体验的便捷性、应用场景聚焦和普及度更高，还是skills的生态比较成熟。普通用户可以先从 Skills 入手，等你需要连接外部工具和真实数据时，再进一步研究 MCP。
三、常用 18个Skills 讲解
1. 前端开发与 UI 设计
这类 Skills 主要解决页面美观、设计规范、前端框架最佳实践的问题。如果你经常让 AI 生成页面，这一组基本必看。
①UI UX Pro Max 【前端UI】90k+⭐
介绍：专业级 UI/UX 设计 Skill。它能让 AI 更像一个产品设计师，而不是只会堆组件的前端助手。适合生成现代 SaaS、Dashboard、Landing Page 等页面设计，能明显减少默认模板感和 AI 味。
使用体验：⭐⭐⭐⭐⭐前端设计类强烈推荐，适合让 AI 从“能写页面”升级到“会设计页面”。
核心功能：
- 生成设计系统
- 给出颜色、字体、间距、阴影规范
- 设计 SaaS、Dashboard、Landing Page 页面
- 提供响应式布局建议
- 做 UI 细节优化和设计审查
适用场景：
- SaaS 官网
- 后台管理系统
- 移动端 App 原型
- Landing Page
- 产品界面重设计
②frontend-design 【前端UI】150k+⭐
介绍：Anthropic 官方前端设计 Skill。它更偏生产级前端界面设计与实现，会在写代码前先确定视觉方向，再输出更有辨识度、更可落地的前端页面。
使用体验：⭐⭐⭐⭐⭐生成结果更像真实产品，不容易出现默认模板感。
核心功能：
- 前端页面视觉设计
- React / Next.js / Tailwind 页面实现
- 组件布局与交互细节设计
- 响应式页面适配
- 可访问性和视觉层级优化
适用场景：
- 产品首页
- SaaS 控制台
- Web App 页面
- 营销页面
- 前端界面重构
③web-design-guidelines【前端UI】27k+⭐
介绍：Vercel 出品的 Web 设计规范 Skill。它主要用来约束 AI 遵循专业网页设计原则，包括视觉层级、留白间距、响应式布局、排版规范和颜色搭配，让页面更克制、更统一、更专业。
使用体验：⭐⭐⭐⭐适合搭配 frontend-design 使用，尤其适合防止 AI 乱用颜色、阴影和动画。
核心功能：
- 视觉层级检查
- 网页排版规范
- 留白与网格系统建议
- 响应式布局规范
- 颜色和对比度建议
适用场景：
- 网页设计审查
- Landing Page 优化
- SaaS 官网设计
- 前端页面改版
- 设计规范补充
④vercel-react-best-practices [React] 27k+⭐
介绍：Vercel 官方 React 最佳实践 Skill。它会指导 AI 按现代 React 和 Next.js 的方式开发，包括组件组织、App Router、性能优化、数据获取和代码结构规范，减少反模式代码。
使用体验：⭐⭐⭐⭐⭐做 Next.js 项目非常推荐，能明显改善 AI 生成代码的结构和性能意识。
核心功能：
- React / Next.js 最佳实践
- Server Components 与 Client Components 拆分建议
- App Router 代码组织规范
- 性能优化检查
- 组件复用与代码结构建议
适用场景：
- Next.js 项目
- React 项目重构
- SaaS 前端开发
- 性能优化
- 代码审查
⑤vue-skills【Vue】2k+⭐
介绍：Vue.js 最佳实践 Skill。它会让 AI 按 Vue 生态的最佳实践写代码，包括 Vue 3 组合式 API、Vite、Vitest、Pinia、UnoCSS 等常见技术栈。
使用体验：⭐⭐⭐⭐⭐做 Vue 项目推荐安装，能让 AI 代码风格更贴近 Vue 生态习惯。
核心功能：
- Vue 3 组合式 API 标准写法
- 组件逻辑拆分建议
- Pinia 状态管理规范
- Vite 项目结构建议
- Vitest 测试示例
适用场景：
- Vue 3 项目
- Nuxt 项目
- Vue 组件库
- 后台管理系统
- Vue 项目重构
2. 开发流程、项目管理与工程交付
这类 Skills 解决的不是某一段代码，而是整个开发过程。从开发前规划、开发中执行，到过程跟踪、交付前后检查，再到数据库操作规范，都可以用这一组来增强。
①planning-with-files 【开发计划跟踪】23k+⭐
介绍：基于 Markdown 文件的长期记忆 Skill。它会把需求、计划、任务状态、研究结果和关键决策记录到文件中，解决 AI 在复杂项目中上下文遗忘的问题。
使用体验：⭐⭐⭐⭐⭐
长周期开发神器，尤其适合超过几十轮对话的大项目。
核心功能：
- 生成任务计划文件
- 记录项目进度
- 保存关键决策
- 跨会话恢复上下文
- 支持复杂多步骤任务
适用场景：
- 长期项目开发
- 技术调研
- 多阶段任务
- 复杂需求拆解
- 多人协作项目
②OpenSpec 【开发前计划梳理】54k+⭐
介绍：OpenSpec 是一个轻量级的规格驱动开发框架。它的核心思路是先把需求、变更原因、技术方案和任务清单沉淀成可审查的规格文档，再让 AI 进入实现阶段，避免需求只停留在聊天记录里导致后续跑偏。
使用体验：⭐⭐⭐⭐⭐适合复杂功能开发，能让 AI 从“边想边写”变成“先定规格再实现”。
核心功能：
- 需求提案生成
- 规格文档管理
- 技术设计沉淀
- 任务拆解与执行清单
- 变更归档与历史追踪
- 支持多种 AI 编程工具
适用场景：
- 新功能开发
- 复杂需求评审
- 团队协作开发
- 需求频繁变更的项目
- 需要可追溯开发过程的项目
③superpowers【开发中按步骤开发，强推】225k+⭐
介绍：AI 编程工作流增强 Skill，提供完整的软件开发方法论。它会让 AI 在编码前先做需求分析、架构设计、任务拆解、测试驱动开发和代码审查，而不是上来就写代码。
使用体验：⭐⭐⭐⭐⭐大型项目必装，能明显减少 AI 直接开写导致的返工。
核心功能：
- 需求澄清与验收标准生成
- 架构设计与模块划分
- TDD 测试驱动开发流程
- 自动代码审查
- 调试与问题定位
- 自定义 Skill 工作流扩展
适用场景：
- SaaS 项目
- Agent 项目
- 企业级应用
- 长周期研发
④gstack【交付前后检查】109k+⭐
介绍：gstack 是 Garry Tan 开源的一套 AI 编程工作流工具包，包含 CEO、设计师、工程经理、代码审查、QA、发布工程师等多个角色化能力。它更像是把一个小型工程团队的工作方式封装成一组可调用命令，让 AI 不只是写代码，而是参与产品判断、设计审查、架构评审、浏览器测试和发布流程。
使用体验：⭐⭐⭐⭐⭐适合高强度开发者和技术创业者，尤其适合需要从想法、计划、实现、审查到发布完整闭环的人。
核心功能：
- 产品方向讨论与 CEO Review
- 工程方案评审
- 设计审查和 UI 质量把关
- 代码 Review 和安全审计
- 浏览器 QA 测试
- 发布和部署辅助
- 多 Agent / 多 Sprint 协同
适用场景：
- 技术创业项目
- 独立开发者高频迭代
- 多功能并行开发
- 产品方案评审
- PR 审查和上线前 QA
- 复杂项目的 AI 工程团队化管理
⑤supabase-postgres-best-practices【数据库操作】2k+⭐
介绍：Supabase 官方 PostgreSQL 最佳实践 Skill。它帮助 AI 编写高质量数据库代码，包括 SQL 查询、Schema 设计、索引优化、数据库性能、连接池、扩展性和 Row-Level Security（RLS）等内容。
使用体验：⭐⭐⭐⭐⭐用 Supabase 或 PostgreSQL 项目非常推荐，能减少数据库设计和权限策略错误。
核心功能：
- 数据库 Schema 设计建议
- SQL 查询优化
- 索引设计建议
- 数据库性能审查
- RLS 权限策略辅助
- 连接池和扩展性建议
适用场景：
- Supabase 项目
- PostgreSQL 数据库设计
- SaaS 后端开发
- 权限系统设计
- 数据库性能优化
3. Skills 管理与自定义
这类 Skills 不直接解决业务问题，而是帮助你查找、安装、创建和优化自己的 Skills。当你开始频繁使用 AI 编程工具之后，这一类会变得很有价值。
①find-skills【强推】22k+⭐
介绍：Skill 搜索与发现工具。它可以根据当前任务帮 AI 查找合适的 Skills，并给出推荐理由，适合作为搭建 Agent 工作流时的辅助入口。
使用体验：⭐⭐⭐⭐适合装了很多 Skill 的用户，能减少手动翻仓库的时间。
核心功能：
- 根据任务描述推荐 Skill
- 搜索可安装 Skill
- 解释推荐原因
- 辅助组合多个 Skill
- 提升 Agent 工作流配置效率
适用场景：
- 查找新 Skill
- 搭建 Claude Code 或 Codex 环境
- 配置 Agent 工作流
- 学习 Skill 生态
- 快速扩展 AI 能力
②skill-creator【强推】150k+⭐
介绍：Anthropic 官方 Skill 创建工具。它可以帮助用户创建、修改和优化 Skills，包括 Skill 结构设计、说明文档、触发条件和测试方式。
使用体验：⭐⭐⭐⭐⭐想定制自己工作流的人很有用，适合把重复经验沉淀成专属 Skill。
核心功能：
- 生成 Skill 模板
- 编写 SKILL.md 结构
- 优化触发描述
- 设计测试 Prompt
- 改进已有 Skill
适用场景：
- 自定义开发规范
- 团队内部工作流
- 专属 Agent 能力
- 沉淀项目经验
- 优化现有 Skill
4. 浏览器自动化与测试
这类 Skills 让 AI 像真人一样操作浏览器，适合测试、抓取、网页交互和自动化流程。
①browser-use【浏览器】98k+⭐
介绍：热门浏览器自动化框架。它让 AI 能够操作网页，支持页面访问、点击交互、表单填写、信息抓取和多步骤网页任务，是很多 Agent 产品常见的浏览器能力基础。
使用体验：⭐⭐⭐⭐⭐做网页自动化和 Agent 浏览器操作非常实用。
核心功能：
- 自然语言控制浏览器
- 自动访问网页
- 点击按钮和填写表单
- 抓取页面信息
- 执行多步骤网页任务
适用场景：
- 网页自动化
- 数据采集
- 自动化测试
- Agent 浏览器操作
- 后台流程代操作
②agent-browser 【浏览器】35k+⭐
介绍：Vercel 出品的浏览器自动化 CLI。它为 AI Agent 提供浏览器控制能力，可执行网页导航、页面测试、自动化操作和网页数据读取，适合接入工程化工作流。
使用体验：⭐⭐⭐⭐轻量实用，适合前端测试和 Agent 浏览器任务。
核心功能：
- 浏览器自动化控制
- 页面访问与交互
- 网页内容读取
- 自动化测试辅助
- 适配 AI Agent 工作流
适用场景：
- 前端页面测试
- 自动化回归测试
- 网页任务执行
- Agent 浏览器环境
- 页面调试辅助
5. 内容创作、视频生成与 SEO
这类 Skills 主要用于文章润色、中文内容生产、程序化视频、数字人口播、网站审计和内容 SEO 优化。如果你除了写代码，还要做内容分发、产品演示、博客增长或营销素材，这一组很有用。
①baoyu-skills 【图片内容生成】21k+⭐
介绍：面向中文创作者的内容生产 Skills 集合。它包含多种中文内容创作工作流，适合翻译、写作、排版、发布和内容运营相关任务。
使用体验：⭐⭐⭐⭐⭐中文内容创作很实用，适合自媒体、知识库和内容运营场景。
核心功能：
- 中文内容创作
- 文章翻译与润色
- 发布流程辅助
- 内容结构优化
- 多种创作工作流组合
适用场景：
- 公众号文章
- 知识库内容
- 中文自媒体
- 内容翻译
- 内容运营
②humanizer 【去AI味】23k+⭐
介绍：内容优化 Skill。它用于识别并减少 AI 生成文本中的常见机器感表达，让文章、博客、邮件和营销文案更自然，更接近真人写作风格。
使用体验：⭐⭐⭐⭐⭐写作类任务很实用，尤其适合改掉 AI 味。
核心功能：
- 识别 AI 写作痕迹
- 减少模板化表达
- 优化句子节奏
- 调整语气和措辞
- 让文案更自然
适用场景：
- 博客文章
- 营销文案
- 邮件回复
- 社交媒体内容
- AI 文本润色
③remotion-best-practices【视频制作】3k+⭐
介绍：Remotion 官方视频制作 Skill。它帮助 AI 使用 Remotion 创建程序化动画视频，包括时间轴设计、转场动画、字幕效果、数据可视化动画和营销视频制作。
使用体验：⭐⭐⭐⭐程序员做视频的神器，但更适合懂 React 或愿意维护代码的人。
核心功能：
- 生成 Remotion 视频代码
- 设计 Composition 和时间轴
- 实现转场与动画效果
- 制作字幕和动态文本
- 辅助视频导出配置
适用场景：
- 产品宣传视频
- 数据可视化视频
- 教学动画
- 短视频模板
- AI 视频生成产品
④seo-audit【网站审计】 32k+⭐
介绍：SEO 网站审计 Skill。它帮助 AI 分析网站 SEO 问题，并提供可执行的优化建议，包括页面标题、Meta 描述、站点结构、内容质量、内链、技术 SEO 和优先级修复清单。
使用体验：⭐⭐⭐⭐适合独立站、内容站、博客和 SaaS 官网上线前检查。
核心功能：
- SEO 问题诊断
- 标题和 Meta 检查
- 页面结构分析
- 内容与关键词建议
- 技术 SEO 审计
- 输出优化优先级
适用场景：
- SaaS 官网
- 内容网站
- 独立站
- 博客文章检查
- 产品上线前检查
- SEO 流量下降排查
四、总结
裸用 Codex，更多是“让 AI 回答问题”。装上合适的 Skills 之后，Codex 才更像一个能按流程干活的开发助手。建议不要一口气装太多。根据自己的主要场景选 3 到 5 个高频 Skill，把它们真正用起来，融入到实际的工作流中，效果会显而易见。
哲学思考
“Skills 是工作流的封装，也是经验的复利。”
——当一个个 Skill 被安装进 Codex，AI 便不再只是一个会回答问题的模型，而开始接近一个能够按流程执行任务的协作者；前端设计被沉淀为可复用的审美规则，工程实践被整理成可调用的开发纪律，浏览器自动化让 AI 具备了操作真实世界界面的手脚，数据库、SEO、内容创作则把不同领域的专业判断压缩成一个个可插拔的能力模块。它们真正改变的不是 AI 会不会写代码，而是让一次性的提示词变成稳定的生产流程，让个人经验变成可以反复调用的工具。于是，Codex 的边界不再只取决于模型本身，而取决于你为它接入了多少经过验证的方法、规范和手艺。
更多推荐
0
0- 0
已为社区贡献6条内容
所有评论(0)