PM: "Help me write a PRD for the onboarding redesign"

Claude: *calls open_prd_builder → interactive UI renders inline*

┌─────────────────────────────────────────────┐
│  Untitled PRD          [Template ▼] [Export] │
├─────────────┬───────────────────────────────┤
│ Sections    │  Problem Statement             │
│             │  ┌─────────────────────────┐   │
│ ⬜ Title*    │  │ [editable textarea]      │   │
│ ⬜ Problem*  │  │                          │   │
│ ⬜ Users*    │  └─────────────────────────┘   │
│ ⬜ Solution* │  ⚠️ Only 12 chars — aim for 50+│
│ ⬜ Stories*  ├───────────────────────────────┤
│ ⬜ Reqs*     │  Completeness: 0%             │
│ ⬜ Metrics*  │  ⬜ 8 empty  🔄 0  👀 0  ✅ 0 │
│ ⬜ Timeline  │  💡 Start with: "What problem  │
│ ⬜ Risks     │     are users experiencing?"   │
└─────────────┴───────────────────────────────┘

PM: "The problem is that 67% of users abandon signup at step 3"

Claude: *drafts problem statement, calls update_prd_section*
→ Content appears in the UI, status changes ⬜→🔄, score updates

prd-builder-mcp/
├── packages/
│   ├── shared/              # Core domain types (the contract)
│   │   └── src/types.ts
│   │
│   ├── prd-engine/          # Business logic (no MCP/UI dependencies)
│   │   ├── src/
│   │   │   ├── templates/       # PRD template definitions
│   │   │   │   └── default-prd.ts   # 3 templates: feature, platform, bugfix
│   │   │   ├── validation/      # Section validation rules
│   │   │   │   └── section-rules.ts # Text, list, user-story, metrics rules
│   │   │   ├── scoring/         # Completeness scoring engine
│   │   │   │   └── completeness.ts  # Weighted scoring + suggestions
│   │   │   ├── factory.ts       # Create PRD from template, update/reorder
│   │   │   ├── export.ts        # Markdown, JSON, plain text export
│   │   │   └── index.ts         # Public API
│   │   └── package.json
│   │
│   ├── mcp-server/          # MCP protocol layer
│   │   ├── src/
│   │   │   ├── tools/           # Tool definitions with UI metadata
│   │   │   │   └── prd-tools.ts     # 5 tools: open, analyze, update, export, list
│   │   │   ├── handlers/        # Tool call handlers
│   │   │   │   ├── prd-handlers.ts  # Business logic per tool
│   │   │   │   └── store.ts         # In-memory PRD store (swap for persistent)
│   │   │   ├── resources/       # UI resource serving (ui:// scheme)
│   │   │   │   └── ui-resources.ts  # Returns HTML for iframe rendering
│   │   │   └── index.ts         # Server entry — stdio transport
│   │   └── package.json
│   │
│   └── ui/                  # Interactive React frontend
│       ├── src/
│       │   ├── hooks/           # MCP communication + state management
│       │   │   ├── useMCPApp.ts     # postMessage bridge to host/server
│       │   │   └── usePRDState.ts   # Optimistic local state
│       │   ├── components/      # Visual components
│       │   │   ├── Toolbar.tsx      # Title, template selector, export
│       │   │   ├── PRDOutline.tsx   # Sidebar: section list + drag reorder
│       │   │   ├── SectionEditor.tsx# Inline editing + validation feedback
│       │   │   └── CompletenessMeter.tsx # Score gauge + breakdown
│       │   ├── App.tsx          # Main layout wiring everything together
│       │   ├── main.tsx         # React entry point
│       │   └── styles/main.css  # Self-contained styling
│       └── package.json
│
├── docs/
│   ├── DEPLOYMENT.md        # Comprehensive guide: local dev → production
│   └── ARCHITECTURE.md      # Technical architecture deep-dive
│
├── package.json             # Root workspace config
├── tsconfig.json            # TypeScript config with path aliases
└── vite.config.ts           # Vite build config for UI

# Install
npm install

# Build
npm run build

# Configure in Claude Desktop
# See docs/DEPLOYMENT.md → Phase 3