# 工具集

> 全部已收录的资源，编辑推荐的排在前面。下面几种条件可以同时用。

- 可以搜索：在地址后加 `?q=<关键词>`，多个关键词用空格分隔，要同时命中。搜的是名称、仓库、标签、职业、简介与 README。
- 可以按类型过滤：在地址后加 `?type=<cli|skill|plugin|mcp>`。
- 可以按职业过滤：在地址后加 `?profession=<职业编号>`，多个用逗号分隔，资源适合其中任意一个即可。编号见 https://hebbmind.com/api/v1/professions
- 可以按标签过滤：在地址后加 `?tag=<标签>`，多个用逗号分隔，资源要同时带有这些标签。标签见 https://hebbmind.com/api/v1/tags

适合全栈 / 独立开发或前端开发或运维 / SRE或算法 / AI或数据工程的资源，共 990 项。

> - 全栈 / 独立开发：跨前后端的通用研发：编码 Agent 工作流、代码评审、调试与 Git 协作。
> - 前端开发：网页、H5 与小程序的界面开发、调试与性能优化。
> - 运维 / SRE：部署、监控、云资源与系统稳定性。
> - 算法 / AI：模型训练、评测与大模型应用开发。
> - 数据工程：数据管道、数仓建模、ETL 与数据质量治理。

- [MagicPath (Codex)](https://hebbmind.com/zh-TW/plugin/magicpath.md): [Plugin] MagicPath 官方 Codex 插件，收录于 OpenAI 官方插件市场。在 Codex 里搜索并安装 MagicPath 画布上的 UI 组件、套用团队主题，也能把本地代码里的界面搬上画布继续改。需要 MagicPath 账号和 Node.js。
- [Build ChatGPT App](https://hebbmind.com/zh-TW/skill/chatgpt-apps.md): [Skill] 用 OpenAI Apps SDK 搭建、重构与排查 ChatGPT 应用：规划工具、生成 MCP 服务器与界面组件脚手架，并对照官方文档校验。OpenAI 官方维护，原 openai/skills 中的 chatgpt-apps。
- [Frontend Testing Debugging](https://hebbmind.com/zh-TW/skill/playwright-interactive.md): [Skill] 测试与调试本地运行的前端页面：优先用 Codex 的 Browser 插件、没有则用 Playwright，检查空白页、框架报错与控制台错误，截图取证，改完重载复查并输出 QA 报告。OpenAI 官方维护，原 openai/skills 中的 playwright-interactive。
- [Remotion](https://hebbmind.com/zh-TW/plugin/remotion.md): [Plugin] Remotion 官方出品、收录于 OpenAI 官方插件市场的 Codex 插件：用 React 以编程方式制作视频，内含新建项目、动画与特效、字幕、地图、预览、导出渲染等 12 个技能。个人、非营利组织与 3 人以内的公司免费，更大的营利公司需购买公司许可。
- [Codex Security](https://hebbmind.com/zh-TW/plugin/codex-security.md): [Plugin] 对整个仓库或 PR、提交等代码变更做安全扫描，并提供威胁建模、漏洞研判、修复与复验，报告可导出 JSON、SARIF 等格式。OpenAI 官方 Codex 插件，需要开通 Codex Security 访问权限。
- [OpenAI Codex Plugins](https://hebbmind.com/zh-TW/plugin/openai-plugins.md): [Plugin] OpenAI 官方 Codex 插件市场（openai-curated），收录 Figma、Notion、GitHub、Stripe、Vercel 等 60 多个插件，把技能、MCP 与应用连接打包安装。
- [Figma (Codex)](https://hebbmind.com/zh-TW/plugin/figma.md): [Plugin] Figma 出品、收录于 OpenAI 官方市场的 Codex 插件：按设计稿实现界面、生成 Code Connect 映射，还能在 Figma 里创建或更新页面、组件库、FigJam 图表和幻灯片。需要连接 Figma 账号。
- [Build Web Apps](https://hebbmind.com/zh-TW/plugin/build-web-apps.md): [Plugin] OpenAI 官方 Codex 插件：搭建前端应用并生成视觉素材、用浏览器测试和调试，附带 React、shadcn/ui、Stripe 支付与 Supabase 数据库的最佳实践技能。只支持 Codex。
- [Firecrawl MCP Server](https://hebbmind.com/zh-TW/mcp/firecrawl-mcp-server.md): [MCP] 把网页抓取成 Markdown 或结构化数据，支持整站爬取、站点地图、网页搜索与动态页面交互。Firecrawl 官方维护，云端需要 API Key（也可自托管）；托管端免密钥时仅开放抓取、搜索与解析。
- [Defending Code Reference Harness](https://hebbmind.com/zh-TW/skill/defending-code-reference-harness.md): [Skill] Anthropic 官方的漏洞发现与修复参考实现：在仓库内用 Claude Code 技能做威胁建模、静态扫描、分诊与补丁生成，另附侦察→发现→验证→报告→修补的自主流水线（默认针对 C/C++ 内存漏洞，需 Docker 与 gVisor 沙箱）。官方已声明不再维护。
- [kubectl-ai](https://hebbmind.com/zh-TW/cli/kubectl-ai.md): [CLI] 用自然语言管理 Kubernetes 集群：把意图翻译成 kubectl 操作并执行，也可作为 MCP 服务器供其他 agent 调用。默认用 Gemini（需 API Key），也支持 OpenAI、本地模型等。Google Cloud 官方维护。
- [OpenCompass](https://hebbmind.com/zh-TW/cli/opencompass.md): [CLI] 开源的大模型评测平台，opencompass 命令一行指定模型与数据集即可跑评测，覆盖上百个基准，既能评测本地 Hugging Face 模型也能评测 API 模型，并支持 vLLM、LMDeploy 加速推理。
- [Waza](https://hebbmind.com/zh-TW/plugin/waza.md): [Plugin] Tw93 出品的精简工程习惯技能包：/think 推敲方案、/hunt 定位根因、/check 评审 diff、/ui 前端界面、/write 中英文润色等 8 个技能，同时支持 Claude Code 与 Codex。
- [VTracer](https://hebbmind.com/zh-TW/cli/vtracer.md): [CLI] 把 JPG、PNG 等位图转成 SVG 矢量图的命令行工具，支持彩色描摹、黑白线稿和光照不均的扫描件，适合把 logo、插画和扫描的旧图纸矢量化。命令行版目前是 1.0 预览版，用 cargo 安装，需要 Rust 环境；也提供桌面版。
- [sd](https://hebbmind.com/zh-TW/cli/sd.md): [CLI] 更直观的查找替换工具（sed 替代）：使用 JavaScript / Python 风格的正则语法，支持字符串字面量模式与原地修改文件，适合 agent 批量改写文本。
- [Tailwind CSS](https://hebbmind.com/zh-TW/skill/tailwindcss.md): [Skill] 用 Tailwind CSS 实现界面的通用指南：响应式与状态变体、深色模式、克制使用任意值、优先拆组件再用 @apply，以及动态拼接类名导致生产环境缺样式等常见问题，附按钮与首屏版式示例。
- [Three.js](https://hebbmind.com/zh-TW/skill/threejs.md): [Skill] 用 Three.js 构建或调试网页 3D 场景：场景、相机、渲染器、光照与材质，GLTF 加载与控制器，以及限制设备像素比、处理窗口缩放、释放 WebGL 资源等性能要点，减少动态效果时只渲染静帧。
- [Matter.js](https://hebbmind.com/zh-TW/skill/matterjs.md): [Skill] 用 Matter.js 实现 2D 物理交互：搭建 Engine、Render、Runner 与刚体，按需加入鼠标拖拽约束，并给出单页应用中停止运行、移除画布的清理步骤；需求不明时先问清画布尺寸与渲染方式。
- [WebGL Landing Steering](https://hebbmind.com/zh-TW/skill/webgl-landing-steering.md): [Skill] 在制作以 WebGL 为主视觉的落地页前先定方向：按品牌调性与页面类型在四种视觉路线中选一种，过信息、性能、无障碍、稳定性四道关，先做静态降级再增强，输出推荐路线、视觉规格、技术栈与构建顺序。
- [Beautiful Shadows](https://hebbmind.com/zh-TW/skill/beautiful-shadows.md): [Skill] 提供 sm、md、lg 三档现成的 Tailwind 任意值阴影类，用于卡片、表单控件、浮层、主视觉等表面，做出分层的中性灰阴影，并规定不与默认阴影混用、不染色、不叠加多个阴影。
- [Cobe.js](https://hebbmind.com/zh-TW/skill/cobejs.md): [Skill] 用轻量 WebGL 库 cobe 在首页或关于页加入可旋转的地球，讲解画布按设备像素比设置尺寸、位置标记、旋转动画、窗口缩放后重建与销毁，可在 React/Next.js 中集成。
- [Company Logos](https://hebbmind.com/zh-TW/skill/company-logos.md): [Skill] 在客户墙、集成列表、合作伙伴等区域用 Iconify Simple Icons 的品牌图标代替纯文字公司名，按 64x64 方框统一尺寸、默认单色、对齐到同一网格，可交互或重要的标识补上无障碍标签。
- [Container Lines](https://hebbmind.com/zh-TW/skill/container-lines.md): [Skill] 在页面内容容器左右边缘画 1px 低透明度的竖向参考线，并在区块角落加小方块，营造精确、有结构感的版式；提供 CSS 变量与伪元素写法，参考线不拦截点击与选中。
- [Design-First UI Prompting](https://hebbmind.com/zh-TW/skill/design-first-ui-prompting.md): [Skill] 把模糊的界面想法整理成设计优先的生成提示词：按目标、尺寸、布局、字体、配色、图像风格、精确文案、约束与反向提示词填写模板，每次只改一个变量迭代，文字易出错时先出图再到 Figma 排版。
- [Pricing Page](https://hebbmind.com/zh-TW/skill/pricing-page.md): [Skill] 为 SaaS 设计或重写高转化定价页：先收集方案、价格、限制、升级触发点与常见顾虑，再按价值标题、月付年付切换、三档方案、对比表、FAQ 与安全合规区块组织，并给出标题、方案说明与按钮文案模板。
- [Backlog.md](https://hebbmind.com/zh-TW/cli/backlog-md.md): [CLI] 把任意文件夹变成 Markdown 任务看板：让 Claude Code、Codex 先把需求拆成带验收标准的任务，人审阅后再动手，终端和浏览器里都能拖动管理，也可以不用 Git 做个人计划。需要 Node.js 或 Homebrew，本地运行、无需账号。
- [Animation Systems](https://hebbmind.com/zh-TW/skill/animation-systems.md): [Skill] 参照 Stripe、Linear、Apple、Vercel 的风格为网页产品建立统一的动效体系：可复用的动效基元、时长与缓动默认值、错峰编排、滚动与悬停交互，并要求只动 transform 与 opacity、支持 prefers-reduced-motion。
- [GSAP ScrollTrigger Storytelling](https://hebbmind.com/zh-TW/skill/gsap-scrolltrigger-storytelling.md): [Skill] 用 GSAP ScrollTrigger 搭建滚动叙事式产品页：固定主画面，随滚动逐步揭示界面状态、功能层与数据视图，区块之间用缩放、遮罩或模糊过渡；要求及时清理触发器、小屏简化编排、不遮挡文字与按钮。
- [Animation On Scroll](https://hebbmind.com/zh-TW/skill/animation-on-scroll.md): [Skill] 用 IntersectionObserver 加 Tailwind 任意值动画类实现元素进入视口时的入场动画，给出关键帧与观察器代码片段，可调整触发阈值、rootMargin、时长、延迟以及是否只播放一次。
- [Landing Page](https://hebbmind.com/zh-TW/skill/landing-page.md): [Skill] 为 SaaS、应用或服务设计或重写高转化落地页：先问清唯一的转化动作、受众、顾虑与证明素材，按首屏、论证、异议处理的结构编排，并提供版式类型、标题与 CTA 文案模板及 SEO 建议。
- [Marquee Loop](https://hebbmind.com/zh-TW/skill/marquee-loop.md): [Skill] 实现无缝循环的跑马灯，用于滚动展示标识、用户评价、截图或标签：复制一份元素序列，用线性 transform 从 0 平移到 -50%，固定元素宽度、边缘渐隐，并照顾 prefers-reduced-motion。
- [Masked Reveal](https://hebbmind.com/zh-TW/skill/masked-reveal.md): [Skill] 用 GSAP ScrollTrigger 让标题与短文案在进入视口时逐词从遮罩下方升起，提供不依赖付费 SplitText 插件的拆词代码、默认时长与错峰、React 清理写法，保留 aria-label 并支持减少动态效果。
- [Progressive Blur](https://hebbmind.com/zh-TW/skill/progressive-blur.md): [Skill] 用多层 backdrop-filter 与渐变遮罩在页面顶部或底部做出由弱到强的渐进模糊，提供可直接粘贴的 HTML 与 CSS，可调整高度、模糊层级、方向与 z-index，且不拦截点击。
- [GSAP](https://hebbmind.com/zh-TW/skill/gsap.md): [Skill] 用 GSAP 编写或调试网页动画：补间、时间线与位置参数、缓动、错峰，以及 ScrollTrigger 的固定与滚动联动；说明优先动 transform、在 React 中用 gsap.context() 清理、图片加载后刷新等常见问题。
- [BrowserTools MCP](https://hebbmind.com/zh-TW/mcp/browser-tools-mcp.md): [MCP] 通过 Chrome 扩展把你正在使用的浏览器会话交给 agent：读取控制台日志与网络请求、截图，并运行 Lighthouse 性能、无障碍与 SEO 审计，无需重新登录。
- [Jupytext](https://hebbmind.com/zh-TW/cli/jupytext.md): [CLI] 在 Jupyter Notebook 与普通 Python 脚本或 Markdown 之间互相转换、双向同步的工具，让 agent 能像改普通文本一样修改科研和教学用的 notebook，版本对比也更清楚。需要本机 Python 环境，用 pip 安装。
- [OpenPencil](https://hebbmind.com/zh-TW/mcp/openpencil.md): [MCP] 开源的 AI 原生矢量设计工具，桌面应用内置 MCP 服务器，可在应用里一键接入 Claude Code、Codex，让 agent 用自然语言读写 .op 设计稿、套用风格指南，并导出 React、Vue、Flutter、SwiftUI 等代码。需先安装桌面应用。
- [arxiv-latex-cleaner](https://hebbmind.com/zh-TW/cli/arxiv-latex-cleaner.md): [CLI] 向 arXiv 投稿前清理 LaTeX 工程：删除注释、辅助文件和未被引用的 tex 与图片，可按需压缩图片，避免内部批注随源码公开。Google Research 出品，macOS 可用 Homebrew 安装。
- [Trafilatura](https://hebbmind.com/zh-TW/cli/trafilatura.md): [CLI] Python 编写的网页正文提取库与命令行：抓取网页，可跟随站点地图与 RSS 批量采集，去除页眉页脚等噪声，输出 TXT、Markdown、JSON、XML 等格式并附元数据，也能离线处理已下载的 HTML。
- [Talk to Figma MCP](https://hebbmind.com/zh-TW/mcp/cursor-talk-to-figma-mcp.md): [MCP] 借助 Figma 插件与本地 WebSocket 服务，让 agent 读取并直接修改设计稿：建框架与文本、调整自动布局和样式、批量替换文案。需安装 Bun，现由 Grab 维护。
- [Anthropic Sandbox Runtime (srt)](https://hebbmind.com/zh-TW/cli/sandbox-runtime.md): [CLI] Anthropic 官方的系统级沙箱命令行：无需容器即可限制 agent、MCP 服务器与任意命令的文件和网络访问，macOS 用 sandbox-exec、Linux 用 bubblewrap。目前是研究预览版。
- [zizmor](https://hebbmind.com/zh-TW/cli/zizmor.md): [CLI] CI/CD 配置的安全静态分析工具：找出 GitHub Actions 工作流中的模板注入、凭据泄露、权限过大等问题，也覆盖 Dependabot 与 pre-commit 配置，部分问题可自动修复。
- [Remotion Captions](https://hebbmind.com/zh-TW/skill/remotion-captions.md): [Skill] 指导 agent 在 Remotion 视频中处理字幕：统一用 @remotion/captions 的 Caption 类型存成 JSON，可转写音视频生成字幕、导入 .srt 文件，并在合成中显示字幕、制作字幕动画。Remotion 官方技能。
- [Home Assistant MCP Server (ha-mcp)](https://hebbmind.com/zh-TW/mcp/ha-mcp.md): [MCP] 让 agent 操作 Home Assistant 智能家居：控制设备、查询状态与历史，创建并调试自动化、编辑仪表盘，共 80 多个工具。社区维护（非官方），需自有 Home Assistant 实例，uvx 方式运行还需长期访问令牌。
- [Remotion Create](https://hebbmind.com/zh-TW/skill/remotion-create.md): [Skill] 指导 agent 新建 Remotion 视频项目与合成：先检查当前目录再用 create-video 脚手架初始化，动手写画面前先打开 Remotion Studio 预览，并按需参考视频布局、多场景与剪辑时间线等指南。Remotion 官方技能，需要 Node.js 与 Git。
- [Remotion Render](https://hebbmind.com/zh-TW/skill/remotion-render.md): [Skill] 告诉 agent 如何导出 Remotion 作品：用 npx remotion render 渲染视频、npx remotion still 渲染静帧，用 --frames 一次导出多帧图片，并可按说明输出透明背景的视频。Remotion 官方技能。
- [Remotion Best Practices](https://hebbmind.com/zh-TW/skill/remotion-best-practices.md): [Skill] Remotion 官方技能：教 agent 用 React 代码制作程序化视频，涵盖新建项目、动画与排版、字幕、地图动画、多媒体处理与渲染，作为路由按需加载各子主题。
- [Dev Browser](https://hebbmind.com/zh-TW/skill/dev-browser.md): [Skill] 让编码 agent 用简短的 Puppeteer 脚本控制真实 Chrome，命名页面跨调用保持状态，可取无障碍树快照、截图并自测网页改动。需先全局安装 dev-browser CLI，仅支持 macOS 与 glibc Linux。
- [n8n-skills](https://hebbmind.com/zh-TW/plugin/n8n-skills.md): [Plugin] 配合 n8n-mcp 使用的 14 个技能，外加钩子提醒层：教 agent 写对 n8n 表达式、配置节点、套用工作流模式、修复校验错误，也能部署自托管 n8n。需要先配置 n8n-mcp。
- [n8n Skills](https://hebbmind.com/zh-TW/skill/n8n-skills.md): [Skill] 14 个 n8n 工作流技能：表达式语法、MCP 工具用法、节点配置、校验排错、Code 节点、AI Agent 工作流与自建 n8n 部署。需要配合 n8n-mcp 服务器使用。

下一页：https://hebbmind.com/zh-TW/tools.md?page=11&profession=fullstack%2Cfrontend%2Cdevops%2Calgorithm%2Cdata-engineering