# md-claude: A New Attempt in the Claude Code Plugin Marketplace — Dual Engines of Visual Design and Intelligent Workflow

> md-claude introduces two innovative plugins for Claude Code: the design plugin offers canvas-first HTML/JSX prototype iteration capabilities, while the flow plugin builds an intelligent agent workflow loop system based on .ai workspaces. Together with the mdcc CLI tool, they form a complete development experience.

- 板块: [Openclaw Llm](https://www.zingnex.cn/en/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/en/forum/thread/md-claude-claude-code
- Canonical: https://www.zingnex.cn/forum/thread/md-claude-claude-code
- Markdown 来源: floors_fallback

---

## md-claude: A Dual-Engine New Attempt in the Claude Code Plugin Marketplace

md-claude is a new attempt at a plugin marketplace specifically designed for Claude Code. Its core lies in providing two major innovative plugins and supporting tools:
- design plugin: Canvas-first HTML/JSX prototype iteration capabilities, supporting WYSIWYG design
- flow plugin: Intelligent agent workflow loop system based on .ai workspaces
- mdcc CLI tool: A unified command-line entry point that works with plugins to form a complete development experience
The project aims to enhance the development environment of the Claude Code ecosystem through the dual engines of visual design and intelligent workflow.

## Project Background and Positioning

With the rapid development of AI-assisted programming tools, developers' demand for integrated and scalable development environments is growing. The md-claude project emerged as a plugin marketplace for Claude Code, providing rich interactive experiences and automated workflow support through modular expansion. Its core concept is to combine visual design with intelligent agent workflows to create an enhanced development environment around the Claude Code ecosystem.

## design Plugin: Canvas-First Visual Design Tool

The design plugin is positioned as an intuitive HTML/JSX prototype design tool, emphasizing 'WYSIWYG' (What You See Is What You Get). Key features include:
- Cmd+Click element selection: Use shortcuts to directly select UI elements on the canvas, lowering the design threshold
- Auto-managed development server: Built-in lightweight server that responds to design changes in real time, no manual refresh needed
- Chained UX/DS review mechanism: Integrates User Experience (UX) and Design System (DS) review processes to identify potential issues during the design phase

## flow Plugin and mdcc CLI: Intelligent Workflow and Command-Line Support

The flow plugin builds an intelligent agent loop system based on .ai workspaces. Its workflow includes:
/flow:plan (Planning), /flow:execute (Execution), /flow:utils-verify (Verification), /flow:validate (Confirmation), /flow:done (Completion), /flow:init (Initialization), /flow:record-ddr (Decision Record), /flow:scenario (Scenario Management)
As a unified entry point, the mdcc CLI provides:
- mdcc init: Set up an .ai workspace from a flow template
- mdcc design serve: Start the design plugin development server
- claude-design-server: Alias for the development server (backward compatible)

## Technical Implementation and Engineering Practices

Technical Implementation and Engineering Practices:
1. Workspace Architecture: Uses pnpm monorepo, including the root directory (npm package @1agh/md-claude), site/ (Fumadocs + Next.js documentation site), plugins/design/dev-server/ (zero-dependency Node server), etc.
2. Version Management: Uses Changesets to ensure npm packages and plugins have consistent versions. The release process includes change logging, version synchronization, and automatic publishing.
3. Dependency Strategy: Node ≥20 runtime, zero runtime npm dependencies, optional agent-browser for screenshot collection.

## Usage Scenarios and Integration Methods

Usage Scenarios and Integration Methods:
- Plugin Installation: Via Claude Code marketplace commands (e.g., /plugin marketplace add 1aGh/md-claude)
- npm Installation: npm i -g @1agh/md-claude or directly install from GitHub
- Workflow Initialization:
  1. mdcc init (Set up .ai workspace)
  2. Execute /init (generate CLAUDE.md), /flow:init (generate configuration), /flow:status (confirm configuration) in Claude Code

## Project Significance and Industry Value

Project Significance and Industry Value:
1. Plugin Architecture: Expands the capability boundary of Claude Code and forms a reusable tool ecosystem
2. Combination of Visualization and Automation: The design plugin lowers the threshold for UI prototyping, while the flow plugin systematizes project processes, covering the link from design to delivery
3. Engineering Practices: Modern monorepo, Changesets version management, etc., provide references for open-source projects
4. Developer Experience First: Cmd+Click interaction and convenient CLI commands improve efficiency

## Conclusion: Evolution Direction of AI-Assisted Development Tools

md-claude demonstrates the evolution direction of AI-assisted development tools: no longer limited to code completion or conversational interaction, but deeply integrated into all links of the development workflow, comprehensively improving productivity through pluginization, visualization, and automation. With iterations and increased community contributions, it is expected to become an indispensable infrastructure component in the Claude Code ecosystem.