使用说明
Claude代码可视化生成器
用于设计的可视化拖放工具 克劳德代码 项目结构。在画布上构建您的代理、技能、钩子和MCP服务器，然后导出为即用型ZIP。
不需要帐户。完全在浏览器中运行。
快速开始
git clone https://github.com/anthropics/claude-code-visual-builder.git
cd claude-code-visual-builder
npm install
npm run dev
打开 http://localhost:3000 并开始建设。
运作原理
- 选择模板 或者从头开始
- 拖动节点 从调色板到画布（代理、技能、MCP服务器、钩子等）
- 连接它们 通过在节点之间拖动边
- 配置 点击每个节点
- 导出ZIP --下载并将其放入您的项目文件夹中
就是这样。构建器生成完整的 .claude/ 目录结构适合您。
你能建造什么
| Node | 它做什么 |
|---|---|
| 厨师 | 根编排器——成为你的 CLAUDE.md |
| 代理 | 具有自己的角色、模型和工具的子代理 |
| 技能 | 可重用的提示模板（用于代理的斜线命令） |
| 命令 | 面向用户的斜线命令 |
| MCP服务器 | 连接外部工具（GitHub、Slack、Postgres等） |
| 钩子 | 在工具调用之前/之后运行的生命周期挂钩 |
| 规则 | 项目范围或特定路径的编码规则 |
| 工具权限 | 允许/拒绝每个代理的特定工具 |
| 记忆 | 持久内存配置 |
| 环境变量 | 环境变量定义 |
| 插件 | 插件配置 |
| 团队 | 多代理团队设置 |
特性
- 模板 -4个入门模板（Web应用程序、API服务、数据管道、最低）
- 智能连接 --将技能链接到代理会自动更新代理的配置
- 实时文件树 --实时查看生成的项目结构更新
- 自动布局 --基于Dagre的一键式布局
- 导入/导出 --ZIP文件和可共享URL
- 取消/重做 --使用Ctrl+Z/Ctrl+Shift+Z的完整历史记录
- 深色模式 --遵循您的系统偏好
- 验证 --导出前捕获常见的配置错误
- MCP模板 --11个预配置服务器（GitHub、Slack、Postgres等）
- 技能浏览器 --浏览社区技能 技能s.sh
生成的输出
导出的ZIP包含一个标准的Claude Code项目：
my-project/
├── CLAUDE.md # Main project instructions
├── .claude/
│ ├── settings.json # Permissions, hooks, env
│ ├── agents/
│ │ ├── code-reviewer.md # Agent definitions
│ │ └── test-writer.md
│ ├── skills/
│ │ └── deploy/
│ │ └── SKILL.md # Skill prompts
│ ├── commands/
│ │ └── review-pr.md # Slash commands
│ └── rules/
│ └── testing.md # Project rules
└── .mcp.json # MCP server configs
将其放入任何项目文件夹中，Claude Code会自动拾取它。
键盘快捷键
| 快捷方式 | 操作 |
|---|---|
Ctrl+Z |
撤消 |
Ctrl+Shift+Z |
重做 |
Ctrl+D |
复制选定节点 |
Delete / Backspace |
删除所选节点 |
技术栈
Next.js 16、React 19、TypeScript、顺风CSS v4、React Flow、Zustand、JSZip
贡献
- 分叉回购
- 创建分支：
git checkout -b feature/my-feature - 进行更改并验证：
npm run build - 打开拉取请求
开发人员注意事项：
- 用途 Next.js 16 （打破早期版本的更改--检查
node_modules/next/dist/docs/如果卡住） - UI组件使用 基础UI （非Radix）-用途
render道具，不是asChild - 顺风v4 随着
@custom-variant用于暗模式
许可证
麻省理工学院
