AI 辅助开发工具资源导航
本文整理 AI 辅助开发场景中常用的工具与资源,包括 Skills 来源、插件推荐、前端工作流以及动画开发工具。
Skills 资源
Skills 是可复用的任务流程包。
在哪里找 Skills
- anthropics/skills — Anthropic 官方 Skills 仓库
- VoltAgent/awesome-openclaw-skills — 社区 Skills 合集
- skills.sh — Skills 发现与安装平台
- clawhub.ai — Claude 工具与 Skills 聚合站
精选 Skills
-
skill-creator — 创建新 Skill 的方法论。指导如何定义触发条件、编写步骤说明和组织 references 目录,适合想沉淀团队工作流的场景。
-
find-skills — 根据当前任务描述自动推荐适用的 Skill,解决"不知道有没有现成 Skill 可用"的问题。
-
frontend-design — 前端设计实现指南。将设计稿(如 Figma)转化为高质量组件代码,包含布局还原、响应式处理和可访问性检查流程。
-
remotion — 在 React 中用代码驱动视频动画的 Skill。覆盖时间轴、帧控制、合成与渲染导出,适合程序化视频生成场景。
-
notebooklm-skill — 与 Google NotebookLM 集成的 Skill。可将文档、网页或研究资料导入 NotebookLM,生成摘要、问答和播客式音频。
-
planning-with-files — 基于文件的项目规划方法。将需求、任务拆解和进度状态存储为 Markdown 文件,让 AI 在多轮对话中保持上下文连贯性。
学习与配置参考
-
everything-claude-code — 跨 AI 编辑器的 agent 性能优化系统。覆盖 Skills、记忆机制、安全策略与 research-first 开发方法论,支持 Claude Code、Codex、Opencode、Cursor 等多个工具,并非仅限于 Claude Code。详见 Everything Claude Code 使用指南。
-
oh-my-claudecode — 类 oh-my-zsh 风格的 Claude Code 配置框架。提供主题、别名和插件管理机制,让终端使用体验更接近成熟的 shell 配置生态。
-
learn-claude-code — Claude Code 中文入门学习资源。包含基础概念、常见用法和实际案例,适合刚开始接触 Claude Code 的开发者系统上手。
-
claude-code-action — Anthropic 官方出品,将 Claude Code 集成进 GitHub Actions 工作流。可在 PR 中通过
@claude触发代码审查、自动修复或任务执行,实现 CI 流程中的 AI 辅助。
Skills 更新机制
Skills 本质上是文本文件,随着工具版本迭代,SKILL.md 内容也会更新。建议定期通过 skills.sh 或直接查看 GitHub 仓库获取最新版本,而不是只依赖本地已安装的版本。
插件资源
推荐插件
| 插件 | 说明 | 地址 |
|---|---|---|
| superpowers | 对话管理与 Skill 发现框架 | 内置 |
| claude-hud | 实时显示 token 用量与上下文状态 | jarrodwatts/claude-hud |
| gsd (Get Shit Done) | 完整的 AI 辅助开发工作流 | 内置 |
| spec-kit | 需求规格文档自动化 | 内置 |
前端工作流
Stitch → AI Studio 工作流
Google 推出的前端设计到代码的完整链路:
这套工作流适合快速原型开发,可以将设计意图直接转化为可运行的前端代码。
React 动画
使用 Remotion 在 React 中创作程序化视频动画。
典型工作流:
- 通过 AI(如 Sora、Kling 等)生成素材
- 在 Remotion 中编写 React 组件控制时间轴与动画逻辑
- 渲染导出为 MP4 或 WebM
Remotion 提供了 VSCode 插件与预览服务器,开发体验接近普通 React 项目。