What language is the output in?

The labels and text in the wireframe are generated in Vietnamese, matching the provided input PRD context.

What format does the input need to be in?

It works best with Lean PRD formats containing 'Screen States' and 'Workflow' sections.

How does it handle business rules?

It annotates UI elements with Rule IDs (e.g., BR-M01) so you can see exactly which requirement governs which field or button.

Can I navigate between screens in the generated mockup?

Yes, the output is a single HTML file with built-in navigation logic based on the PRD workflow.

Is this tool meant for high-fidelity design?

No, it is designed for low-fidelity visual validation of business rules; use tools like Figma for high-fidelity pixel-perfect designs.

PRD to Mockup Wireframe Generator

Name: PRD to Mockup Wireframe Generator
Author: cuongtl1992

bycuongtl1992

•

Design Tools

Transforms product requirements and screen states into interactive, low-fidelity HTML wireframes for rapid visual validation.

This skill bridges the gap between text-based product requirements and visual implementation by parsing Lean PRDs into interactive HTML wireframes. It automatically maps screen states, workflows, and business rules into a functional mockup, allowing stakeholders to validate user flows and engineers to understand UI structure before writing production code. By emphasizing business logic over pixel-perfect design, it ensures that every UI element is tied directly to a requirement or business rule (BR-Mxx), facilitating smoother handoffs and reducing design-to-dev friction.

Key Features

01Integrated Screen Inventory tables and annotation legends for documentation

02Automatic parsing of Screen States and Workflow diagrams from Lean PRDs

03Generation of single-file interactive HTML wireframes with screen-to-screen navigation

04Business Rule mapping with specific annotations (BR-Mxx) for each UI element

05Toggleable error states to visualize UI behavior when business rules are violated

0610 GitHub stars

Use Cases

01Generating visual reference points for behavior-driven development (BDD) and Gherkin scenario writing

02Providing engineers with a structural UI blueprint to align development with PRD specifications

03Validating complex business rules and user flows with stakeholders before high-fidelity design

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cuongtl1992/vibe-skills prd-to-mockup

For use in Claude.ai and ChatGPT

Key Features

01Integrated Screen Inventory tables and annotation legends for documentation

02Automatic parsing of Screen States and Workflow diagrams from Lean PRDs

03Generation of single-file interactive HTML wireframes with screen-to-screen navigation

04Business Rule mapping with specific annotations (BR-Mxx) for each UI element

05Toggleable error states to visualize UI behavior when business rules are violated

0610 GitHub stars

Use Cases

01Generating visual reference points for behavior-driven development (BDD) and Gherkin scenario writing

02Providing engineers with a structural UI blueprint to align development with PRD specifications

03Validating complex business rules and user flows with stakeholders before high-fidelity design