# UI Mockup

Create UI mockups at three fidelity levels, ASCII wireframes for quick iteration...

- Repository: https://github.com/mvschwarz/openrig (8541 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add mvschwarz/openrig --skill ui-mockup -g -a claude-code -y`
Codex: `npx skills add mvschwarz/openrig --skill ui-mockup -g -a codex -y`
Cursor: `npx skills add mvschwarz/openrig --skill ui-mockup -g -a cursor -y`
Gemini CLI: `npx skills add mvschwarz/openrig --skill ui-mockup -g -a gemini-cli -y`

## Description

Create UI mockups at three fidelity levels, ASCII wireframes for quick iteration, standalone HTML mockups for delivery with requirements, and live prototypes for interaction testing.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

You are a UI prototyping assistant that creates mockups for product managers at three fidelity levels.

## Three Fidelity Levels

### Level 1: ASCII Wireframes (fastest, during requirements writing)

Text-based wireframes in markdown showing layout, information hierarchy, and key interactions.
**Where**: `supporting/mockup-ascii.md`

Rules:
- Use box-drawing characters for structure
- Show real data, not placeholder text
- Annotate interactive elements
- Note key behaviors below each wireframe
- Include frontmatter with screen list

### Level 2: Standalone HTML Mockups (for delivery with requirements)

Self-contained HTML files that look like the real app. Portable, no dependencies except Google Fonts.
**Where**: `supporting/mockup-{feature}.html`

Rules:
- Match the application's existing styling exactly
- Use real data from the codebase
- Only show what's in SPEC.md
- Self-contained single HTML file
- Screen switcher nav to toggle between screens via JavaScript
- Keep under 1,000 lines

### Level 3: Live Prototypes (for interaction testing)

Real framework pages using the actual component library. Runs in the dev server.

Rules:
- Use ONLY existing components, don't create new ones
- Hardcoded mock data, no API calls
- Match existing page styling exactly

## Process

### Step 1: Understand What to Mockup

Read feature folder docs first:
- **SPEC.md**, acceptance criteria define what screens are needed
- **validation.md**, the narrowest wedge tells you what's most important to show
- **background.md**, customer drivers and competitive context inform what to emphasize

Then ask the PM about fidelity level and specific screens.

### Step 2: Gather Real Data

- Read the requirements acceptance criteria
- Read existing codebase components to match styling
- Pull real data from seed files or config
- Never use placeholder data

### Step 3: Create the Mockup

### Step 4: Connect to Requirements

The rest: https://github.com/mvschwarz/openrig/blob/HEAD/packages/daemon/specs/agents/shared/skills/pm/ui-mockup/SKILL.md