| name | prd-to-wireframe |
| description | Converts Product Requirements Documents from Confluence into interactive HTML/React wireframe prototypes with clinical trial EDC patterns. Pulls PRDs via Atlassian MCP, extracts user stories and acceptance criteria, then generates a fully navigable prototype with Tailwind CSS styling ready for local preview or Figma Code-to-Canvas export. |
| allowed-tools | Read, Grep, Glob, Bash, Write, Edit |
| argument-hint | [confluence-page-url-or-prd-title] |
PRD to Wireframe Prototype
Purpose
Transform a Product Requirements Document into a working, clickable wireframe prototype that stakeholders can interact with before any production development begins. This bridges the gap between written requirements and visual design, catching misalignment early.
Workflow
Step 1: Acquire the PRD
Option A - Confluence via Atlassian MCP:
- Use
mcp__claude_ai_Atlassian__searchConfluenceUsingCql to locate the PRD page by title or space key.
- Use
mcp__claude_ai_Atlassian__getConfluencePage to retrieve the full page content.
- If the PRD spans child pages, use
mcp__claude_ai_Atlassian__getConfluencePageDescendants to pull all sub-pages.
Option B - Pasted or local PRD:
- Accept PRD text pasted directly by the user.
- Or read a local file path provided by the user.
Step 2: Extract Structured Requirements
