Content
# AI Product Design Runtime (APDR) v0.3.0
> Author: **Joker**
An AI product design pipeline from product requirements to front-end code. Supports **Codex, Cursor, Claude Code** and other MCP protocol compatible tools.
[](https://github.com/lazysheep-z/apdr-product-design-runtime)
[](LICENSE)
---
## One Sentence
APDR = **5 MCP Servers** + **16 Skill files** + **11-stage pipeline**
After AI dialogue tools access through the MCP protocol, they can automatically complete the entire product design process from requirement input to front-end code generation. You only need to review and approve at key nodes.
---
## 11-stage Pipeline
| # | Stage | Output | Human Gate |
|---|------|------|----------|
| 1 | intake | ProjectBrief (structured requirements) | Optional |
| 2 | requirements_analysis | RequirementsAnalysis (JTBD/risks) | **Mandatory** |
| 3 | prd | PRD (MoSCoW/acceptance criteria/data contract) | **Mandatory** |
| 4 | user_flows | UserFlows (including error paths/permission flows) | Optional |
| 5 | information_architecture | IA (site map/search/navigation) | Optional |
| 6 | wireframes | Wireframes (HTML + interactive annotations) | Optional |
| 7 | ui_design | UIDesignSpec (Token/components/concept map) | **Mandatory** |
| 8 | design_review | DesignReviewReport (Token/responsive/a11y) | **Mandatory** |
| 9 | frontend_codegen | CodeBundle (React/Vite + testing) | Optional |
| 10 | handoff | HandoffDoc (component documentation/API/deployment) | Optional |
| 11 | quality_eval | QualityReport (full-process scoring/coverage) | Optional |
## Features
- **MCP Native** — Standard MCP protocol, not bound to any specific AI tool
- **5 Independent MCP Servers** — design-artifacts (main control), research (research), diagram (charts), preview (preview), repo (code)
- **Human Gate** — Key stages require human confirmation, non-key stages automatically advance
- **Versioned Artifact** — JSON envelope, supporting rollback/revision/stale propagation
- **Skill-driven** — Each stage has independent SKILL.md instructions (can be optimized with SkillOpt)
- **External Integration** — Supports pm-skills (19k★), Superpowers (7k★), baoyu-skills and other ecosystems
- **Adaptable to Multiple Tools** — Codex, Cursor, Claude Code are all usable
## Quick Start
### Prerequisites
- Node.js >= 20
- AI tools supporting MCP protocol (Codex / Cursor / Claude Code, etc.)
### Method 1: Clone from GitHub
```bash
git clone https://github.com/lazysheep-z/apdr-product-design-runtime.git
cd apdr-product-design-runtime
npm install
npm run build
```
Then configure the MCP server in your AI tool. See the "Configure MCP" section below.
### Method 2: Install from Codex Marketplace
```bash
codex plugin marketplace add lazysheep-z/apdr-product-design-runtime
```
### Method 3: Directly Copy Plugin Directory
Copy `plugins/apdr-product-design-runtime/` to your `~/plugins/` directory, then run:
```bash
bash ~/plugins/apdr-product-design-runtime/setup.sh /path/to/apdr-repo
```
## Configure MCP
### Cursor
Edit `.cursor/mcp.json` (replace `<APDR_ROOT>` with your repository path):
```json
{
"mcpServers": {
"design-artifacts": {
"command": "node",
"args": ["<APDR_ROOT>/packages/mcp-servers/design-artifacts/dist/index.js"],
"env": { "APDR_PROJECTS_ROOT": "<APDR_ROOT>/projects" }
},
"research": {
"command": "node",
"args": ["<APDR_ROOT>/packages/mcp-servers/research/dist/index.js"],
"env": { "APDR_PROJECTS_ROOT": "<APDR_ROOT>/projects" }
},
"preview": {
"command": "node",
"args": ["<APDR_ROOT>/packages/mcp-servers/preview/dist/index.js"],
"env": { "APDR_PROJECTS_ROOT": "<APDR_ROOT>/projects" }
},
"repo": {
"command": "node",
"args": ["<APDR_ROOT>/packages/mcp-servers/repo/dist/index.js"],
"env": { "APDR_PROJECTS_ROOT": "<APDR_ROOT>/projects" }
},
"diagram": {
"command": "node",
"args": ["<APDR_ROOT>/packages/mcp-servers/diagram/dist/index.js"],
"env": { "APDR_PROJECTS_ROOT": "<APDR_ROOT>/projects" }
}
}
}
```
### Codex / Claude Code
Add through Codex Plugin or MCP configuration interface. Refer to the `setup.sh` script for automatic configuration.
### Workflow Configuration (Cursor Rules)
In Cursor, set `.cursor/rules/apdr-product-design-runtime.mdc` to `alwaysApply: true`, which will automatically load APDR orchestration logic for each conversation.
## Technical Architecture
```
┌──────────────────────────────────────────────────────────┐
│ AI Dialogue Tool (Codex / Cursor / Claude Code) │
│ ── Read SKILL.md → Call MCP tool → Write artifact │
└──────────┬───────────────────────────────────────────────┘
│ MCP Protocol
▼
┌──────────────────────────────────────────────────────────┐
│ design-artifacts Project creation / Stage control / Artifact CRUD │
│ research Web search / Web scraping / Research notes │
│ diagram Mermaid flowchart / Sequence diagram / Site map │
│ preview Local wireframe / Front-end preview server │
│ repo Template scaffolding / Git status query │
└──────────────────────────────────────────────────────────┘
│
▼
┌──────────────────────────────────────────────────────────┐
│ projects/{id}/ Output directory (JSON + HTML + code) │
│ skills/ 16 SKILL.md instruction files │
│ packages/ 8 npm packages (core/orchestrator/MCP) │
└──────────────────────────────────────────────────────────┘
```
## Project Structure
```
apdr-product-design-runtime/
├── packages/
│ ├── core/ # Type definitions + capability registration + artifact schemas
│ ├── orchestrator/ # CLI + pipeline engine
│ ├── mcp-shared/ # MCP server shared tools
│ └── mcp-servers/
│ ├── design-artifacts/ # Main control MCP
│ ├── research/ # Research MCP
│ ├── preview/ # Preview MCP
│ ├── repo/ # Code MCP
│ └── diagram/ # Chart MCP
├── skills/ # 16 agent SKILL.md files
│ ├── intake/ # Requirement input
│ ├── requirements-analyst/ # Requirement analysis
│ ├── prd-writer/ # PRD writing
│ ├── ux-flow/ # User flow
│ ├── information-architect/ # Information architecture
│ ├── wireframe-designer/ # Wireframe design
│ ├── visual-designer/ # UI design
│ ├── design-reviewer/ # Design review
│ ├── frontend-engineer/ # Front-end generation
│ ├── frontend-code-reviewer/# Code review
│ ├── test-strategy/ # Test strategy
│ ├── handoff/ # Handoff document
│ ├── quality-evaluator/ # Quality evaluation
│ └── ... # Other auxiliary skills
├── projects/ # Project data
├── templates/ # Scaffolding templates
├── vendor/ # External skills (Superpowers, baoyu)
├── docs/ # Documentation
└── skillopt/ # SkillOpt configuration (optional)
```
## Version History
See [CHANGELOG.md](CHANGELOG.md)
- **v0.3.0** (2026-06-24) — 11-stage pipeline, 7 new skills, quality evaluation
- **v0.2.0** (2026-06-17) — 8-stage pipeline, 5 MCP Servers, Codex Plugin
- **v0.1.0** (2026-06-10) — Initial version
## Related Projects
- [phuryn/pm-skills](https://github.com/phuryn/pm-skills) 19k★ — PM skill market
- [microsoft/SkillOpt](https://github.com/microsoft/SkillOpt) 7.7k★ — SKILL.md automatic optimization
- [obra/superpowers](https://github.com/obra/superpowers) 7k★ — Engineering methodology
- [JimLiu/baoyu-skills](https://github.com/JimLiu/baoyu-skills) — Content production skill set
## License
MIT License. Copyright (c) 2026 Joker
