skills.rest
crgarcia12
crgarcia12COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-ux-design

Generate interactive HTML/CSS/JS wireframe prototypes from approved FRDs.

Updated May 6, 2026
Search Tags:#prototype generation#prototype#UI/UX design#HTML/CSS/JS#wireframe
One-click install
npx skills add https://github.com/crgarcia12/compy --skill ui-ux-design-crgarcia12
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/crgarcia12/compy/tree/main/.github/skills/ui-ux-design
Command: npx skills add https://github.com/crgarcia12/compy --skill ui-ux-design-crgarcia12

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies UI/UX design and prototyping by automating the process of generating interactive wireframe prototypes from approved FRDs, making it easier to iterate and collaborate on design concepts.

Core Features & Use Cases

  • Wireframe Generation: Automatically create HTML wireframe prototypes from FRDs.
  • Screen Map Creation: Extract screen inventory, navigation flows, and user interactions to produce a comprehensive screen map.
  • Design System Bootstrapping: Build a minimal design system with color palettes, typography scales, spacing systems, and component inventories.
  • Component Inventory Extraction: Compile a detailed inventory of reusable UI components used across the prototypes.
  • Prototype Serving: Host prototypes via a local HTTP server for human review.
  • Walkthrough Script Generation: Produce narrative and visual walkthroughs for review and documentation.
  • Feedback Loop: Iterate on the design based on human feedback, updating FRDs, PRDs, and prototypes as needed.
  • Output Artifacts: Generate screen maps, design systems, component inventories, HTML prototypes, flow walkthroughs, and walkthrough scripts.
  • Use Case: Utilize this Skill to transform FRDs into interactive prototypes that can be reviewed and refined by design teams before moving forward with implementation.

Quick Start

Start the Skill by navigating to the 'specs/ui/prototypes' directory and running 'npx serve specs/ui/prototypes --listen 3333'.

Frequently Asked Questions about ui-ux-design

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

FAQPage Schema
How do I generate interactive HTML wireframe prototypes from an FRD?▼

To generate interactive HTML wireframe prototypes from an FRD, this Skill automates screen inventory extraction, design system creation, and component compilation to output HTML/CSS/JS files hosted via a local HTTP server.

What is included in a design system bootstrap for UI/UX prototypes?▼

A design system bootstrap for UI/UX prototypes includes a minimal color palette, typography scales, spacing systems, and a detailed component inventory extracted directly from the approved functional requirements.

Do I need Node.js to serve HTML wireframe prototypes locally?▼

Yes, you need Node.js and the serve CLI to host the HTML wireframe prototypes locally, specifically by navigating to the prototypes directory and running npx serve on port 3333 for human review.

Can I create flow walkthroughs and screen maps from approved functional requirements?▼

Yes, you can create flow walkthroughs and screen maps from approved functional requirements, as the Skill processes navigation flows and user interactions to generate narrative walkthrough scripts and visual maps.

What is the best way to iterate on UI/UX design concepts after hosting a wireframe prototype?▼

The best way to iterate on UI/UX design concepts after hosting a wireframe prototype is to use a feedback loop that updates the FRDs, PRDs, and HTML prototypes based on human review during the local server walkthrough.

Why does wireframe generation require markdown processing libraries?▼

Wireframe generation requires markdown processing libraries to parse the approved FRD markdown files, enabling the automatic extraction of screen inventories and component data needed to build the HTML/CSS/JS prototypes.

Related Skills

Explore More Design & Creative Skills→
edonghyunedonghyun
1

analyze

Write screenshot-backed feature analysis documents from captured product artifacts.

Community
Advanced
EmeaAppGbbEmeaAppGbb

ui-ux-design

Generate interactive HTML wireframe prototypes from approved FRDs.

Official
Advanced
levi-qiaolevi-qiao
6

ingest

Extract and integrate markdown, PDF, and text files into a structured wiki knowledge base.

Community
Intermediate
sinositatosinositato

prd-ui-prototype

Generate interactive HTML/CSS/JS UI prototypes from PRD documents.

Community
Advanced