creating-dynamic-wireframes

Convert product documentation and PRDs into deterministic low-fidelity wireframes with ASCII layouts.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/KGmufassa/Escrolly --skill creating-dynamic-wireframes
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: creating-dynamic-wireframes
Source: https://github.com/KGmufassa/Escrolly/tree/main/.opencode/skills/Wireframe-generator
Command: npx skills add https://github.com/KGmufassa/Escrolly --skill creating-dynamic-wireframes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reads product documentation or PRD files and generates structured, low-fidelity wireframes with deterministic page architecture, state definitions, trigger mapping, and annotated ASCII layouts. Supports dynamic workflow detection and safe update mode.

Core Features & Use Cases

  • Deterministic wireframe generation from PRDs and docs
  • Auto-detects workflow types (Marketing site → Website workflow, Product app → App workflow, Admin panel → Dashboard workflow, Multi-step journey → Flow workflow)
  • Safe update mode to preserve existing wireframes
  • Outputs an MVP page map and ASCII wireframes for review
  • Use cases: quickly convert feature specs into IA and flow diagrams for early design reviews.

Quick Start

Use a PRD or product document as input and request a deterministic, low-fidelity wireframe with an MVP page map.

Frequently Asked Questions about creating-dynamic-wireframes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate wireframes from a PRD?

To generate wireframes from a PRD, provide the product document as input to produce deterministic, low-fidelity ASCII wireframes with an MVP page map, state definitions, and trigger mapping.

What is deterministic wireframe generation for product design?

Deterministic wireframe generation converts product documentation into structured, low-fidelity ASCII layouts with predictable page architecture, mandatory states, and labeled components for early design reviews.

Can I create wireframes for different workflow types like admin dashboards and marketing sites?

You can create wireframes for admin dashboards, marketing sites, product apps, and multi-step journeys by using auto-detection to infer the correct workflow type and apply the appropriate page architecture.

How do I update existing wireframes without losing current page architecture?

To update existing wireframes without losing current page architecture, use the safe update mode which preserves previous wireframe structures while applying new modifications from the product documentation.

What is the best way to map MVP page states and triggers from documentation?

The best way to map MVP page states and triggers is using structural validation and page-architecture engineering to extract mandatory states, labeled components, and triggers directly from the PRD.