skills.rest
EmeaAppGbb
EmeaAppGbbOFFICIAL
Explore all skills by this author →
GitHub

ui-ux-design

Generate interactive HTML wireframe prototypes from approved FRDs.

Updated Mar 30, 2026
Search Tags:#html#prototyping#interactive design#wireframe#ui-ux design
One-click install
npx skills add https://github.com/EmeaAppGbb/spec2cloud-microhack-greenfield --skill ui-ux-design-emeaappgbb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-design
Source: https://github.com/EmeaAppGbb/spec2cloud-microhack-greenfield/tree/main/.github/skills/ui-ux-design
Command: npx skills add https://github.com/EmeaAppGbb/spec2cloud-microhack-greenfield --skill ui-ux-design-emeaappgbb

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation of interactive HTML wireframe prototypes from approved FRDs, streamlining the UI/UX design process and enabling real-time collaboration.

Core Features & Use Cases

  • Generate HTML Prototypes: Automatically produce interactive HTML/CSS/JS wireframes from approved FRDs.
  • Design System Bootstrap: Create a minimal design system for consistency across components.
  • Component Inventory: Extract and document reusable UI components for downstream use.
  • Serve & Browse Prototypes: Host prototypes via HTTP server for human review.
  • Walkthrough Script: Generate replayable walkthroughs for design validation.
  • Human Review Loop: Incorporate feedback into the design iteratively.

Quick Start

Run the 'ui-ux-design' skill with the 'generate-prototypes' command.

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 wireframes from a functional requirements document?▼

Generating HTML wireframes from an FRD involves automating interactive HTML/CSS/JS prototype creation directly from the approved document, producing screen maps and component inventories for immediate review.

What is the best way to create a design system and component inventory for UI prototyping?▼

Creating a design system and component inventory for UI prototyping involves extracting reusable UI components from approved FRDs to bootstrap a minimal design system, ensuring consistency across all generated interactive HTML wireframes.

Can I serve and review HTML prototypes locally for design validation?▼

Yes, you can serve and review HTML prototypes locally by hosting the generated wireframes via an HTTP server, enabling human review and iterative design feedback directly within the browser environment.

Does this UI/UX design approach support generating replayable walkthroughs for stakeholder feedback?▼

Yes, this UI/UX design approach supports generating replayable walkthroughs by creating scripts from the approved FRD, allowing stakeholders to validate design iterations and incorporate feedback into the prototyping loop.

What do I need to start automating UI/UX design and interactive prototyping from approved FRDs?▼

To start automating UI/UX design from approved FRDs, you need an approved functional requirements document as input, which the tool processes to automatically output interactive HTML/CSS/JS wireframes, design systems, and component inventories.

Related Skills

Explore More Design & Creative Skills→
Productfculty-aipmProductfculty-aipm
70

figma-to-prototype

Convert Figma designs into interactive screen-by-screen prototypes.

Community
Advanced
crgarcia12crgarcia12

ui-ux-design

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

Community
Advanced
stephanjstephanj
9

design-system-starter

Create design systems with design tokens, atomic components, and WCAG 2.1 AA compliance.

Community
Advanced
heximaoheximao

sketch

Generate disposable HTML mockups with interactive variants for design exploration.

Community
Basic