prd-to-wireframe

What problem does it solve?

This Skill bridges the gap between written Product Requirements Documents (PRDs) and visual design by automatically generating interactive wireframe prototypes, catching design and functional misalignments early in the development cycle.

Core Features & Use Cases

• Automated Prototype Generation: Converts PRDs into navigable HTML/React prototypes with Tailwind CSS.
• Structured Requirement Extraction: Parses user stories, acceptance criteria, and screen flows from PRDs.
• Clinical Trial EDC Patterns: Implements industry-standard UI patterns for Electronic Data Capture systems.
• Use Case: Transform a Confluence PRD for a new clinical trial data entry screen into a clickable prototype that can be reviewed by stakeholders before any code is written.

Quick Start

Convert the Confluence PRD located at the provided URL into an interactive wireframe prototype.