skills.rest
sunilaicoe
sunilaicoeCOMMUNITY
Explore all skills by this author →
GitHub

aicoe-mockup-generation

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
One-click install
npx skills add https://github.com/sunilaicoe/genesis-core --skill aicoe-mockup-generation
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Content & Communication Skills→
decoutkhanqindevdecoutkhanqindev
8

kta-design-spec

Generate per-screen design specifications from PRD documents.

Community
Advanced
zephyrwang6zephyrwang6
14

space-image2proto

Convert UI screenshots, mockups, and wireframes into single-file HTML prototypes.

Community
Advanced
VuNguyenVietTienVuNguyenVietTien

markdown-novel-viewer

Renders markdown files as a browsable, book-like web page with Chinese-style formatting.

Community
Intermediate
whichguywhichguy

html-artifact

Generate self-contained HTML files from Markdown content.

Community
Intermediate