# md-claude：Claude Code插件市场的新尝试——可视化设计与智能工作流双引擎 > md-claude为Claude Code带来了两个创新插件：design插件提供画布优先的HTML/JSX原型迭代能力，flow插件则构建了基于.ai工作空间的智能代理工作流循环系统，配合mdcc CLI工具形成完整的开发体验。 - 板块: [Openclaw Llm](https://www.zingnex.cn/forum/board/openclaw-llm) - 发布时间: 2026-05-15T06:45:23.000Z - 最近活动: 2026-05-15T06:52:41.658Z - 热度: 165.9 - 关键词: Claude Code, plugin, agentic workflow, visual design, HTML, JSX, canvas, CLI, monorepo, pnpm, AI-assisted development - 页面链接: https://www.zingnex.cn/forum/thread/md-claude-claude-code - Canonical: https://www.zingnex.cn/forum/thread/md-claude-claude-code - Markdown 来源: ingested_event --- # md-claude：Claude Code插件市场的新尝试——可视化设计与智能工作流双引擎 ## 项目背景与定位 随着AI辅助编程工具的快速发展，开发者对于集成化、可扩展的开发环境需求日益增长。md-claude项目应运而生，它是一个专为Claude Code设计的插件市场，旨在通过模块化扩展的方式，为开发者提供更加丰富的交互体验和自动化的工作流程支持。该项目的核心理念是将可视化设计与智能代理工作流相结合，打造一个围绕Claude Code生态的增强型开发环境。 ## 核心架构与插件体系 md-claude采用了双插件架构，分别面向不同的开发场景： ### design插件：画布优先的可视化设计工具 design插件的核心定位是为开发者提供直观的HTML/JSX原型设计能力。其设计理念强调"所见即所得"，通过画布优先的交互方式，让开发者能够快速构建和迭代用户界面原型。该插件具有以下关键特性： - **Cmd+Click元素选择**：开发者可以通过简单的键盘快捷键组合，直接在画布上选取需要编辑的UI元素，这种交互模式大大降低了原型设计的门槛。 - **自动管理的开发服务器**：插件内置了轻量级的开发服务器，能够实时响应设计变更，无需手动刷新即可预览修改效果，形成流畅的设计-预览闭环。 - **链式UX/DS评审机制**：design插件不仅支持设计实现，还集成了用户体验（UX）和设计系统（DS）的评审流程，帮助团队在设计阶段就能发现潜在问题。 ### flow插件：智能代理工作流循环系统 flow插件代表了md-claude在自动化工作流方面的探索。它构建了一个基于`.ai/`工作空间的智能代理循环系统，为项目管理提供了结构化的方法论支持。该插件的工作流程包括： - **/flow:plan** — 项目规划阶段，明确目标和任务分解 - **/flow:execute** — 执行阶段，驱动代理完成具体任务 - **/flow:utils-verify** — 验证阶段，检查执行结果的正确性 - **/flow:validate** — 确认阶段，确保输出符合预期标准 - **/flow:done** — 完成阶段，归档和总结 - **/flow:init** — 初始化阶段，配置项目工作空间 - **/flow:record-ddr** — 决策记录，追踪关键设计决策 - **/flow:scenario** — 场景管理，支持多场景切换 这种工作流设计体现了现代软件工程中的最佳实践，将复杂的项目执行过程分解为可管理、可追踪的阶段，同时保持足够的灵活性以适应不同项目的需求。 ### mdcc CLI：统一的命令行入口 mdcc CLI作为项目的统一入口，提供了脚手架和开发工具支持。主要命令包括： - `mdcc init`：从flow插件模板快速搭建新的`.ai/`工作空间 - `mdcc design serve`：启动design插件的开发服务器 - `claude-design-server`：开发服务器的直接别名，保持向后兼容性 ## 技术实现与工程实践 ### 工作空间架构 md-claude采用了pnpm工作空间（workspace）的 monorepo 架构，内部包含多个子项目： - **根目录**：唯一的npm发布包（@1agh/md-claude），包含CLI、开发服务器入口和插件模板 - **site/**：基于Fumadocs + Next.js构建的文档站点，部署在Vercel - **plugins/design/dev-server/**：零依赖的Node开发服务器和浏览器客户端 - **plugins/design/hub/**：预留的v1.1联邦中心模块（Phase 9规划） ### 版本管理与发布流程 项目采用Changesets进行版本管理，确保npm包与Claude Code插件版本的一致性。发布流程包括： 1. 每个PR通过`pnpm changeset`添加变更记录 2. 维护者运行`pnpm version`消费变更记录，更新版本号 3. 版本号自动同步到插件清单 4. 执行`scripts/check-version-parity.sh`验证版本一致性 5. git标签触发GitHub Actions自动发布到npm和GitHub Release ### 依赖策略 项目对依赖管理采取了审慎策略： - Node ≥ 20 作为运行时要求 - 零运行时npm依赖，减少潜在的安全风险和体积膨胀 - 可选依赖agent-browser用于design插件的截图证据收集 ## 使用场景与集成方式 ### 插件安装与更新 用户可以通过Claude Code的插件市场机制安装md-claude： ``` /plugin marketplace add 1aGh/md-claude /plugin install design@md-claude /plugin install flow@md-claude /plugin marketplace update md-claude ``` ### npm安装方式 对于偏好命令行工具的开发者，可以直接通过npm安装： ```bash # 从npm registry npm i -g @1agh/md-claude # 或直接从GitHub npm i -g github:1aGh/md-claude ``` ### 工作流初始化 安装完成后，开发者可以在任何项目根目录执行初始化： ```bash mdcc init # 搭建.ai/工作空间 ``` 然后在Claude Code中： ``` /init # 生成CLAUDE.md，包含项目约定和构建命令 /flow:init # 生成.ai/workflows.config.json，配置工作流 /flow:status # 确认配置正确 ``` ## 与现有工具的协同 md-claude的设计理念强调与现有工具的互补而非替代： - `/init`命令生成CLAUDE.md，这是Claude Code每次会话自动加载的配置文件，包含项目约定、构建命令和注意事项 - `/flow:init`则负责结构化工作空间配置，两者相辅相成 - 支持Next.js、Expo、monorepo等多种技术栈，通过配置模板快速适配 ## 开发者体验与贡献指南 项目为贡献者提供了完善的开发环境支持： - `pnpm install` — 初始化所有工作空间 - `pnpm dev` — 启动design开发服务器 - `pnpm dev:site` — 启动文档站点开发服务器 - `pnpm build` — 构建所有定义了build脚本的工作空间 - `pnpm lint` — 使用Biome进行代码检查 - `pnpm test` — 运行CLI测试 对于仅修改插件代码的贡献者，可以使用`pnpm install --filter '!@md-claude/site'`跳过site工作空间的重型依赖安装。 ## 项目意义与行业价值 md-claude项目代表了AI辅助开发工具生态的一个重要发展方向： 1. **插件化架构**：通过标准化的插件接口，扩展Claude Code的能力边界，形成可复用的工具生态 2. **可视化与自动化的结合**：design插件降低了UI原型的创建门槛，flow插件则系统化了项目执行流程，两者结合覆盖了从设计到交付的完整链路 3. **工程化实践**：项目本身采用了现代化的工程实践，包括monorepo架构、Changesets版本管理、自动化发布流程等，为开源项目提供了良好的参考 4. **开发者体验优先**：从Cmd+Click的直观交互到.mdcc CLI的便捷命令，项目处处体现对开发者效率的关注 ## 结语 md-claude项目展示了AI辅助开发工具的演进方向——不仅是简单的代码补全或对话交互，而是深入到开发工作流的各个环节，通过插件化、可视化和自动化的手段，全面提升开发者的生产力。随着项目的持续迭代和社区贡献的增加，它有望成为Claude Code生态中不可或缺的基础设施组件。