aicoe-mockup-generation

Name: aicoe-mockup-generation
Availability: InStock
Author: sunilaicoe

Convert PRD Markdown, synthetic JSON, and use case XML into interactive HTML mockups.

Updated Apr 28, 2026

Search Tags:#workflow #HTML #interactive #PRD #prototype #mockup

Ready to run

npx skills add https://github.com/sunilaicoe/genesis-core --skill aicoe-mockup-generation

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: aicoe-mockup-generation
Source: https://github.com/sunilaicoe/genesis-core/tree/main/convex/skills/aicoe-mockup-generation
Command: npx skills add https://github.com/sunilaicoe/genesis-core --skill aicoe-mockup-generation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires html-generator, xml-parser, json-loader, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the development of interactive HTML mockups from detailed PRD use cases, enabling rapid visualization of workflows and UI components.

Core Features & Use Cases

Automated Mockup Creation: Converts PRD documents into fully functional, styled HTML demos following design standards.
Data Integration: Incorporates synthetic data JSON files to populate mockups with realistic content.
Use Case: For a new product feature, quickly generate mockups that demonstrate user flows with sample data, facilitating stakeholder reviews and iterative design.

Quick Start

Use the mockup skill to generate an interactive demo from '04-prd.md' incorporating the sample data '06-synthetic-data.json' and use case XML '03-use-cases.xml'.

Frequently Asked Questions about aicoe-mockup-generation

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

FAQPage Schema

How do I generate interactive HTML mockups from a PRD?▼

To generate interactive HTML mockups from a PRD, you need to provide matching PRD Markdown, synthetic JSON data, and use case XML files. The skill integrates these inputs to produce styled, preview-ready prototypes for stakeholder demonstrations.

What is the best way to convert product requirements into a prototype with sample data?▼

The best way to convert product requirements into a prototype with sample data is to automate the transformation of detailed PRD use case XML and synthetic JSON files into functional HTML demos. This enables rapid visualization of user flows and UI components.

Do I need use case XML and synthetic JSON files to create PRD mockups?▼

Yes, you need use case XML and synthetic JSON files to create PRD mockups. The skill requires matching PRD Markdown, synthetic JSON data, and use case XML files to populate the mockups with realistic content and workflows.

Can I use markdown and XML to build user flow demonstrations for stakeholder reviews?▼

Yes, you can use markdown and XML to build user flow demonstrations for stakeholder reviews. The skill integrates PRD Markdown and use case XML files to create interactive HTML mockups suitable for testing and iterative design feedback.

What are the limitations of automating HTML mockup generation from use case documents?▼

A key limitation of automating HTML mockup generation is its strict dependency on matching PRD Markdown, synthetic JSON data, and use case XML files. Without these specific input formats properly structured, the automated transformation into styled prototypes cannot proceed.