ai-form-builder

# AI 表单构建器 **用于 React 的 AI 表单构建器。** 从截图、PDF、HTML 或文本提示生成生产就绪的 React 表单 — 作为 Claude 技能、Cursor 规则或 Windsurf 规则。输出可移植的 JSON 模式 + 可运行的 React 代码。构建在 [FormEngine Core](https://github.com/optimajet/formengine) 之上（MIT，永久免费）。 ## 这是什么 将表单的截图、PDF、HTML 片段或纯文本描述放入 Claude / Cursor / Windsurf — 获取有效的 FormEngine JSON 模式和可运行的 `App.tsx`，通过 `@react-form-builder/core` 渲染。每个输出都通过真正的验证器（无幻觉组件类型，无走私 HTML，无损坏的验证）。 三个安装目标，一个真实来源： | 您的工作地点 | 安装方式 | 触发方式 | |---|---|---| | Claude Code / Cowork | Claude 技能 | "为我创建一个注册表单" / 拖放截图 | | Claude Code (单行) | 插件 | `/plugin install ai-form-builder` | | Cursor | Cursor 规则 | 提及 "表单" / "FormEngine" | | Windsurf | Windsurf 规则 | 同上 | | 任意 IDE / API (计划中) | MCP 服务器 | 调用 `generate_form` 工具 | ## 快速开始 ```bash # 1. 安装运行时 npm install @react-form-builder/core @react-form-builder/components-rsuite rsuite # 2. 将 AI 表单构建器添加到您选择的助手（见下文） # 3. 说类似这样的话： # "为我创建一个包含姓名、电子邮件、密码和服务条款复选框的注册表单" ``` 您将收到一个 `form.json` 和一个 `App.tsx`。运行 `npm run dev`，表单即可上线。 ## 作为 Claude 技能安装 ```bash git clone https://github.com/lukinov/ai-form-builder.git ~/.claude/skills/ai-form-builder ``` 或者，如果您将技能放在项目内： ```bash git clone https://github.com/lukinov/ai-form-builder.git .claude/skills/ai-form-builder ``` 重启 Claude Code。当您提到表单、注册、联系、 onboarding 等，或拖放表单截图时，技能会自动加载。 ## 作为 Claude Code 插件安装 ```bash /plugin marketplace add lukinov/ai-form-builder /plugin install ai-form-builder ``` ## 作为 Cursor 规则安装 ```bash mkdir -p .cursor/rules curl -L https://raw.githubusercontent.com/lukinov/ai-form-builder/main/.cursor/rules/formengine.mdc \ -o .cursor/rules/formengine.mdc ``` 当您编辑包含 "表单"、"注册"、"联系"等字样的 `.tsx` / `.jsx` 文件时，规则会自动附加。或者显式调用： > @formengine 为我创建一个多步骤的 onboarding 表单 ## 作为 Windsurf 规则安装 ```bash mkdir -p .windsurf/rules curl -L https://raw.githubusercontent.com/lukinov/ai-form-builder/main/.windsurf/rules/formengine.md \ -o .windsurf/rules/formengine.md ``` ## 工作原理 每次技能都会生成四个产物： 1. **`form.json`** — 规范化的 FormEngine 模式，针对 [`@react-form-builder/components-rsuite`](https://www.npmjs.com/package/@react-form-builder/components-rsuite) （或 MUI / Mantine）的真实组件类型列表进行验证。 2. **`App.tsx`** — 最小的可运行 React 代码；通过库的提供者进行主题化，无配套 CSS。 3. **验证报告** — 通过了什么，修复了什么（屏幕根目录，唯一键， 有效的验证规则键，布局-only `css`，无走私 HTML 标记）。 4. **下一步** — 安装命令，文档链接， "导入到在线表单构建器" 链接，团队成员可以使用它进行可视化编辑。 相同的 JSON 模式可以与 [在线表单构建器](https://formbuilder.formengine.io) 互相转换 — 粘贴进去，拖拽字段，粘贴回来。无厂商锁定。 ## 示例 | 用例 | 模式 | 备注 | |---|---|---| | 包含服务条款的注册表单，姓名字段并排 | [examples/signup](examples/signup/) | 密码验证，`truthy` 同意，弹性容器 | | 包含多行消息的联系表单 | [examples/contact](examples/contact/) | `RsTextArea`，`min` 长度验证 | | 多步骤 onboarding 向导 | [examples/multi-step-onboarding](examples/multi-step-onboarding/) | `RsWizard` + `RsWizardStep` | | 包含条件字段的调查问卷 | [examples/survey-conditional](examples/survey-conditional/) | `renderWhen` + `validateWhen` | 每个示例文件夹都有一个可运行的 `form.json` + `App.tsx`，您可以直接粘贴到 Vite/Next/CRA 项目中。 ## 为什么选择 FormEngine + AI 如果您尝试过使用原始 LLMs 生成表单，您知道其中的痛苦： - Bare JSX 转储，无法可视化编辑 - "表单" 库幻觉组件名称 - 内联 `<style>` 块与您的主题不匹配 - 无验证，无无障碍，无设计师往返 - 每次都有一个新的组件 → 没有您可以从 CMS 提供 schema 的 schema 该技能通过针对 **FormEngine 的 JSON 模式格式** 解决了所有这些问题，该格式是： - **可移植的.** 普通数据 — 将其提供给 React 中的 FormViewer，在 [在线表单构建器](https://formbuilder.formengine.io) 中编辑，从您的 API 提供，本地化。 - **可往返的.** 设计师 ↔ JSON ↔ 设计师。无需重新生成代码。 - **库无关的.** 相同的模式通过 RSuite、Material UI 或 Mantine 渲染 — 选择您的应用已经使用的一个。 - **已验证的.** 真实的 Python 验证器 (`scripts/validate_schema.py`) 捕获了 LLMs 遇到的 30+ 个失败模式（错误类型，解包属性，走私 HTML，视觉样式在 `css` 中）。 您不必为此付费。FormEngine Core 是 MIT 许可的，技能也是 MIT 许可的。 ## 与替代方案比较 | | 此技能 + FormEngine | react-hook-form | react-jsonschema-form (RJSF) | 无代码 SaaS (Tally, Typeform, Jotform) | |---|---|---|---|---| | 从截图/PDF 进行 AI 生成 | 是 | 否 | 否 | 部分 | | 验证的 JSON 模式 | 是 | 否（只是钩子） | 是 | 专有 | | 可视化编辑器往返 | 是（在线表单构建器） | 否 | 否 | 是（他们自己的 UI 仅限） | | 您拥有 React 代码 | 是 | 是 | 是 | 否，仅限嵌入 | | MIT 许可，免费 | 是 | 是 | 是 | 否 | | 可主题化，适用于您的设计系统 | 是（RSuite/MUI/Mantine 主题） | 是 | 部分 | 有限 | | 多步骤向导 | 是（`RsWizard`） | 手动 | 手动 | 是 | | 条件渲染 | 是（`renderWhen`） | 手动 | 部分 | 是 | ## 技能输出（真实示例） 输入： > 为我创建一个注册表单：姓名，电子邮件，密码（8+ 个字符），和一个服务条款复选框。 输出摘录（`form.json`）： ```json { "form": { "type": "Screen", "key": "signup", "children": [ { "type": "RsCard", "props": { "header": { "value": "创建您的帐户" } }, "children": [ { "type": "RsInput", "key": "email", "props": { "label": { "value": "电子邮件" }, "type": { "value": "email" } }, "schema": { "validations": [{ "key": "required" }, { "key": "email" }] } }, { "type": "RsInput", "key": "password", "props": { "label": { "value": "密码" }, "type": { "value": "password" } }, "schema": { "validations": [ { "key": "required" }, { "key": "min", "args": { "limit": 8 } } ] } } ] } ] } } ``` 以及一个 12 行的 `App.tsx`。运行 `npm run dev`，您就拥有了一个可用的表单。 ## MCP 服务器路线图 一个独立的模型上下文协议服务器（`generate_form`、`validate_schema`、`list_components` 工具）正在路线图中 — 请参见 [`mcp-server/README.md`](mcp-server/README.md)。给这个仓库加星，以便收到通知。 ## 仓库布局 ``` ai-form-builder/ ├── skills/ai-form-builder/ # 技能源代码（SKILL.md + 参考资料 + 脚本） ├── .claude-plugin/ # Claude Code 插件清单 ├── .cursor/rules/ # Cursor .mdc 规则 ├── .windsurf/rules/ # Windsurf 规则 ├── mcp-server/ # MCP 服务器（路线图） ├── examples/ # 4 个参考输出（注册/联系/多步骤/调查） ├── docs/ # 长篇文档 └── .github/ # 工作流 + 问题模板 ``` ## 常见问题 **问：没有 Claude / Cursor 可以使用吗？** 答：今天，技能需要一个 LLM 主机来加载它。MCP 服务器（在路线图中）将向任何 IDE 或 API 客户端公开相同的逻辑。 **问：我需要 FormEngine 许可证才能使用它吗？** 答：不。FormEngine Core 是 MIT 许可的 — 在生产环境中运行，无需费用。商业 **FormEngine Designer** 是可选的，用于在您自己的应用程序中进行可视化编辑；免费的 **在线表单构建器** 足以满足大多数工作流程。 **问：我可以使用 Material UI / Mantine 而不是 RSuite 吗？** 答：是的。告诉技能您要使用哪个库，或者它将从周围的项目中自动检测。所有三个组件库都受支持。 **问：我的表单有一个自定义字段类型。它还会工作吗？** 答：技能映射到 FormEngine 的内置组件集（RSuite 中有 35+ 个，MUI / Mantine 中每个大约 25 个）。对于自定义字段类型，请在 FormEngine 的组件注册表中注册它们，并在技能提示中添加注释 — 它会获取它们。 **问：它与 v0 / Vercel AI / shadcn-ui 生成器有什么不同？** 答：它们生成 JSX。我们生成 **模式** — 可移植数据，可以通过可视化编辑器往返，发送到 CMS，并通过任意三个组件库渲染。 **问：它支持 React Hook Form / Zod / Yup 吗？** 答：FormEngine 有自己的验证层（Zod 等效规则键）。如果您必须使用 RHF，模式可以在运行时转换 — 请参见 [docs/integration-with-rhf.md](docs/integration-with-rhf.md)。 ## 贡献 欢迎提出问题和 PR。请参见 [CONTRIBUTING.md](CONTRIBUTING.md)。尤其欢迎： - 额外的 UI 库适配器（Chakra，Ant Design） - 更多示例模式（管理面板，KYC，带有分支的调查） - MCP 服务器贡献者 ## 许可证 MIT — 请参见 [LICENSE](LICENSE)。构建在 [FormEngine](https://github.com/optimajet/formengine) 之上，由 Optimajet 构建。 ## 相关项目 - [FormEngine Core](https://github.com/optimajet/formengine) — 此技能针对的渲染器 - [在线表单构建器](https://formbuilder.formengine.io) — 免费可视化编辑器，粘贴 JSON 进/出 - [FormEngine 文档](https://formengine.io/documentation/formengine-core/) — 完整参考资料 --- 如果这为您节省了一个下午，请考虑给 [FormEngine Core](https://github.com/optimajet/formengine) 加星 — 它帮助更多开发者找到 MIT 渲染器。