面向前端开发者的 Claude Code、Codex 与 OpenClaw 共享插件方案

本文将三个面向前端开发者的 AI 编码工具共享插件开源，涵盖以下版本：

Claude Code：frontend-craft
Codex：frontend-craft-codex
OpenClaw：frontend-craft-openclaw

仓库地址：

这些插件基于公开工具能力和个人通用工程经验整理，不包含任何公司内部代码、客户资料或内部文档。

01-cover-overview

设计初衷

许多开发者在使用 AI 编码工具时存在以下问题：

每个人都有自己的 prompt 小宇宙
项目整体呈现"八仙过海，各显神通"
Review 说过的话，过几天就找不到了
新同学接入时，常常只能靠口口相传

个人会用 AI，不等于已经把 AI 用成了稳定、顺手、可复用的生产力。因此将这些经常重复出现的事情，收拢成一套共享工作流。

核心功能

目前主要覆盖这些前端开发常见场景：

Code Review
Security Review
Accessibility Check
Design to Code
Scaffold
lint / type-check / test / build 后辅助修复
React / Vue3 / Next.js / Nuxt / Monorepo
Legacy Web / 老项目迁移分析

它不能替你理解所有业务逻辑，也不能替你驯服全部祖传代码，但比较适合做一件事：把前端开发中那些重复劳动、规范约束、分析检查，尽量做得更稳定一点。

02-workflow

版本说明

Claude Code 版：`frontend-craft`

面向使用 Claude Code 的开发者。优势是上下文理解很强，适合复杂 review 场景、Legacy 迁移分析。

Codex 版：`frontend-craft-codex`

面向使用 OpenAI Codex 体系的开发者。两个版本的工作流设计保持高度一致，切换工具时不至于重新从零开始。

OpenClaw 版：`frontend-craft-openclaw`

面向使用 OpenClaw 的开发者。延续了前两个版本的核心工作流设计思路，同时针对 OpenClaw 的特性做了一些适配和优化。

03-three-versions

核心特性：结果留痕

很多 AI 工具的问题是说完就消失。在这套插件里，尽量把 review / analysis / evaluation 结果输出到 reports/ 目录里。

好处很直接：

可以回看
可以共享
可以留档
可以复盘
可以给新人看

对于多人协作的项目来说，这种"不那么炫，但很有用"的能力，往往比花哨更重要。

04-reports-directory

多版本支持

既然社区都在探索，那就别把路走窄。有的同学用 Claude Code，有的同学用 Codex，现在又有同学开始试 OpenClaw，那就尽量把常用工作流在三个生态里都整理出来。这样至少大家在切换工具时，不至于每次都从零开始重新"驯化"AI。

适用场景

我觉得比较适合以下情况：

多人协作的前端项目：尤其是有 review、规范、交接、留痕诉求的项目场景。
新旧技术栈混合的项目：比如 React + Vue3 混合、Next / Nuxt 并存、Monorepo + 老项目共存。
正在多工具对比选型的开发者：如果在 Claude Code / Codex / OpenClaw 之间做评估，三个版本能帮你在同等工作流下，更清楚地感知各工具的实际差异。
想把个人 AI 用法沉淀成可复用资产的开发者：比如独立开发者、开源项目维护者、或者希望把自己的 AI 工作流系统化的技术同学。

插件模式优势

维度	各自手搓	共享插件
使用方式	每人一套 prompt，风格随缘	共用工作流，口径更稳定
工具覆盖	一般只熟悉自己用的那个	Claude Code / Codex / OpenClaw 三套可选
review 结果	说完就散，回头难找	可落盘留痕，方便复盘
新人接入	靠口口相传和"你自己悟一下"	有固定入口，上手更顺
规范统一	容易漂移	更容易沉淀为可复用资产
老项目适配	经常临场发挥	有更明确的场景支持
协作使用	个人很灵活，多人略混乱	少一点玄学，多一点复用

这不是说"手搓 prompt"不好。只是很多事情一旦要多人协作，就会从"灵活"变成"混乱"。这个时候，共享插件的意义就出来了。

05-compare-table

定位与期待

对它的期待其实很朴素：

不一定要最惊艳，但尽量要更稳定
不一定替代人，但尽量帮开发者减少重复折腾
不一定一次到位，但最好能持续沉淀

它可能不是让你"哇"的那种工具，但我希望它是让你用了之后觉得"嗯，这个还挺省事"的那种工具。

开发挑战

做这几个插件的时候，也踩过不少坑：

不同工具的插件机制差异，比想象中大
同样的工作流，在不同生态里，表现并不会自动保持一致
有些能力看起来都支持，真正落到细节上，还是要一项项适配
目录组织、命名方式、输出格式、可维护性，这些比"先跑起来"更麻烦

AI 工具真正难的，很多时候不是"能不能用"，而是"能不能长期顺手地用"。

社区共建

这三个仓库现在肯定还有很多地方可以继续打磨。尤其是 OpenClaw 版，算是最新加入的，还比较嫩，特别欢迎用过的同学来提意见。

欢迎 Star、Issue、PR 及使用反馈、场景建议。

开源地址

Claude Code：https://github.com/bovinphang/frontend-craft
Codex：https://github.com/bovinphang/frontend-craft-codex
OpenClaw：https://github.com/bovinphang/frontend-craft-openclaw

如果刚好能帮你少踩一个坑，那这些仓库就没白开。