Guide · Agent skill
How to use the UI Mockup Designer agent skill (ui-mockup)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The ui-mockup skill is an agent skill that turns a product manager's request into UI mockups at three fidelity levels: text wireframes, standalone HTML files and live prototypes. It is written for product managers and developers working from a spec-driven feature folder in a codebase. After this guide you will know what the skill does, how to install it, how to trigger it with plain requests, and what to check before you rely on its output.
UI Mockup Designermvschwarz/openrig · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Download the ui-mockup skill ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. Go to Settings → Capabilities → Skills and upload the skill there.
- 4Point the agent at your feature folder. Name the feature or provide its folder so the agent can read SPEC.md, validation.md and background.md.
- 5Choose a fidelity level. Ask for an ASCII wireframe, a standalone HTML mockup or a live prototype, and name the screens you need.
- 6Review what is real versus mocked. Read the agent's note on real and mocked parts, then check styling and data against your app before sharing.
What an agent skill is and what ui-mockup makes the agent do
An agent skill is a folder containing a SKILL.md file that gives an AI agent specific instructions for one kind of task. This skill's SKILL.md tells the agent to act as a UI prototyping assistant for product managers.
The skill works at three fidelity levels. Level 1 is an ASCII wireframe saved to supporting/mockup-ascii.md, used during requirements writing. Level 2 is a self-contained HTML file saved as supporting/mockup-{feature}.html, meant for delivery alongside requirements. Level 3 is a live prototype built from real framework pages using the project's existing component library and run in the dev server.
- Level 1, ASCII wireframes: box-drawing layout, real data, annotated interactive elements, key behaviors noted under each wireframe.
- Level 2, standalone HTML: matches the app's existing styling, uses real data from the codebase, one file under 1,000 lines, with a screen switcher toggled by JavaScript.
- Level 3, live prototypes: uses only existing components, hardcoded mock data with no API calls, and matches existing page styling.
Install the ui-mockup skill
Download the ZIP for the ui-mockup skill from this page. Unzip it so the skill folder (containing SKILL.md) is placed either in your personal skills folder at ~/.claude/skills/ or in a project's .claude/skills/ folder, so it applies only to that project.
You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the skill
Trigger the skill with natural requests
The skill reads its description to decide when it applies, so you do not need a special command. Ask for a mockup the way you would ask a colleague, and name the fidelity level and the screens you need. The skill's process is to read the feature folder docs first (SPEC.md, validation.md, background.md) and then ask you about fidelity level and specific screens.
Give the agent the feature folder or name the feature so it can find SPEC.md. Without that context, the skill has little to base the mockup on.
- "Make an ASCII wireframe of the onboarding screens for the billing-alerts feature."
- "Build a standalone HTML mockup of the settings page from its SPEC.md so I can attach it to the requirements."
- "Create a live prototype of the invite-teammates flow using our existing components so I can test the interactions."
What the agent does with your feature docs
Before drawing anything, the skill reads SPEC.md acceptance criteria to decide which screens are needed, uses validation.md to find the narrowest wedge so the most important screen is shown, and uses background.md for customer drivers and competitive context that shape emphasis.
It then reads existing codebase components to match styling and pulls real data from seed files or config. Once the mockup is saved to supporting/, the skill says to reference it from background.md under "Visual References" and to note in the requirements if the mockup informed acceptance criteria.
- Shows only what SPEC.md requires; it is told not to add features beyond the requirement.
- Prefers fewer screens: 3-5 screens rather than 10.
- Tells you which parts are real and which are mocked.
Review the output and check what is real
The skill instructs the agent to tell you what is real and what is mocked. Read that note before sharing a mockup, because the agent may fill gaps with reasoned guesses if your codebase or seed data is thin.
Check that the styling matches your app, that data values come from your seed files or config, and that the screens match your acceptance criteria. Adjust the request and run the skill again if something is off.
- Compare HTML mockups against the running app's styling.
- Confirm that each screen traces back to an acceptance criterion in SPEC.md.
- Remember that live prototypes are for testing, not for shipping.
Safety notes: scripts and network
The skill's listing states that it runs no scripts and uses no network access. It lists no required tools or packages. Live prototypes run in your own dev server, and the skill asks for hardcoded mock data with no API calls.
Production UI changes are outside this skill's purpose. Review any live prototype before it goes near production code.
- Runs scripts: no
- Uses network: no
- Requires: nothing listed
What people use it for
- Sketching the screens of a feature in ASCII during requirements writing, saved to supporting/mockup-ascii.md.
- Producing a single HTML file that matches the app's look to attach to a spec for review.
- Building a live prototype from existing components to test how a flow feels before development.
- Adding a Visual References entry to background.md that points to a saved mockup.
Frequently asked questions
How do I install the ui-mockup agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
What do I need to use the ui-mockup skill?
The listing states no required tools, and the skill runs no scripts and uses no network. In practice it works best in a codebase with a spec-driven feature folder containing SPEC.md, validation.md and background.md, because it relies on those files and the existing styling.
Does the ui-mockup skill run scripts or access the network?
According to the listing, it runs no scripts and uses no network. Its SKILL.md asks for hardcoded mock data with no API calls in live prototypes.
What are the three fidelity levels?
Level 1 is an ASCII wireframe for quick iteration, Level 2 is a standalone HTML mockup for delivery with requirements, and Level 3 is a live prototype using existing components for interaction testing.
Can the skill create new UI components?
Its live prototype rules say to use only existing components and not create new ones. Standalone HTML is a single self-contained file that matches the app's existing styling.
Is ui-mockup free and what is its licence?
The listing gives the licence as Apache-2.0. The source does not state pricing, so check the project's repository for any terms beyond the licence.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use ui-mockup if you are a product manager or developer working from a spec-driven feature folder in a codebase, and you want mockups grounded in real styling and data. Pick something else if you have no codebase or feature docs to base the mockups on, or if you need production UI changes, since live prototypes are meant for testing only.
Download the skill