Skip to content
Get packs

UI Mockup Designer

Creates ASCII wireframes, standalone HTML mockups, or live prototypes for product requirements.

Source Download skill
Repository
mvschwarz/openrig
Stars
8,553
Licence
Apache-2.0
Files
1 file

What it does

Once installed, the agent acts as a UI prototyping assistant for product managers. It can sketch quick text-based wireframes, build a single self-contained HTML file that looks like the real app for delivery alongside requirements, or build live prototypes using the project's existing components. It reads the feature's spec, validation and background docs first so it shows only the screens the requirements call for, and it is told to tell the user which parts are real and which are mocked.

Great for

  • Product managers who want screen mockups attached to a feature spec
  • Teams using a spec-driven folder (SPEC.md, validation.md, background.md) in a codebase
  • Developers who need quick, existing-component prototypes for interaction testing

Skip it if

  • Teams without a codebase or feature docs to base the mockups on, since the skill depends on reading real styling and data
  • Production UI changes, because live prototypes are meant for testing and should not be shipped without review

Try asking

  • “Create an ASCII wireframe of the checkout screen from my SPEC.md acceptance criteria”
  • “Build a standalone HTML mockup of the new settings page for the requirements doc”
  • “Make a live prototype of the onboarding flow using our existing components”
Step-by-step guide: how to use UI Mockup DesignerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the Apache-2.0 licence and an attribution note.

    ui-mockup.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip ui-mockup.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip ui-mockup.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at the feature folder first so it reads SPEC.md and validation.md before drawing screens.
  • Ask for three to five screens rather than many, since the skill favours less is more.
  • Check the 'real vs mocked' notes the agent gives before sharing mockups with stakeholders.

What's inside

  • SKILL.md

Redistributed unmodified from mvschwarz/openrig under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.