skills.rest
mvschwarz
mvschwarzCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-mockup

...

60|9|Updated Apr 1, 2026
Search Tags:#prototyping#wireframes#product-management#ui-mockup#design-process#html-mockup
One-click install
npx skills add https://github.com/mvschwarz/openrig --skill ui-mockup-mvschwarz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-mockup
Source: https://github.com/mvschwarz/openrig/tree/main/packages/daemon/specs/agents/shared/skills/pm/ui-mockup
Command: npx skills add https://github.com/mvschwarz/openrig --skill ui-mockup-mvschwarz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured approach to producing UI mockups at three fidelity levels (ASCII wireframes, standalone HTML mockups, and live prototypes) to help product teams rapidly iterate and validate UI concepts with real data.

Core Features & Use Cases

  • Level 1: ASCII wireframes for quick requirements exploration and layout planning.
  • Level 2: Standalone HTML mockups for delivery-ready visuals that match the real app styling.
  • Level 3: Live prototypes to test interactions using existing component libraries and real data.
  • Real data emphasis: Uses data from the codebase and avoids placeholders.
  • Guideline-driven workflow: Follow the three fidelity steps and connect mockups to requirements.

Quick Start

Begin with the three fidelity levels template and generate a working set of mockups for your feature.

Frequently Asked Questions about ui-mockup

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

FAQPage Schema
How do I create UI mockups at different fidelity levels for product validation?▼

You create UI mockups across three fidelity levels—ASCII wireframes, standalone HTML mockups, and live prototypes—to validate requirements using real codebase data without placeholders.

What is the best way to generate HTML mockups that match my existing app styling?▼

Generate standalone HTML mockups as delivery-ready visuals that match your real app styling by pulling actual data from the codebase and requirements documents.

Can I use ASCII wireframes for quick layout planning during product discovery?▼

Yes, ASCII wireframes support quick requirements exploration and layout planning, providing a fast, structured method to iterate on UI concepts before building live prototypes.

How do live prototypes test interactions using existing component libraries?▼

Live prototypes test interactions by leveraging existing component libraries and real data from your codebase, enabling stakeholder reviews and early delivery planning.

Does the UI mockup process require real data from the codebase?▼

Yes, the UI mockup process requires real data from the codebase and requirements documents, explicitly avoiding placeholders to ensure accurate requirements validation and delivery planning.

What is the difference between ASCII wireframes and standalone HTML mockups for requirements refinement?▼

ASCII wireframes offer quick layout exploration, while standalone HTML mockups provide delivery-ready visuals matching real app styling, together supporting progressive requirements refinement.

Related Skills

Explore More Design & Creative Skills→
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate
applewaveapplewave
1

phase-3-mockup

Create HTML/CSS/JS UI mockups with JSON data for Next.js readiness.

Community
Intermediate
vinhnxvvinhnxv
6

design-prototype

Convert Figma designs into React prototypes with Storybook stories.

Community
Advanced
partme-aipartme-ai
610

axure

Guide Axure RP prototyping for wireframes, interactions, and dynamic panels.

Official
Basic