What is the final output of the iteration process?

When you use the 'finalize' command, the skill compiles all confirmed requirements and visual references into a standardized design.md section.

How does it handle icons and styling?

It references your project's existing UI research and icon systems to ensure mockups remain consistent with your production app's design language.

How does the skill track design changes?

It maintains a mockup-log.md file that classifies every piece of feedback as KEEP, REMOVE, or CHANGE, ensuring a persistent record of all design decisions.

What happens when I want to revert a design?

You can use the 'revert to v00[N]' command to create a new version based on any previous iteration while keeping the existing history intact.

Can I preview my mockups visually?

Yes, the skill uses Playwright to navigate to your local HTML mockup files and captures a screenshot so you can see changes in the chat interface.

Mockup Iteration Manager

Name: Mockup Iteration Manager
Author: gvarela

bygvarela

•

Design Tools

Orchestrates systematic UI mockup iterations with version control, decision logging, and automated visual validation.

The Mockup Iteration skill streamlines the UI/UX design process within Claude Code by maintaining a rigorous history of design evolutions. It captures user feedback with high fidelity, classifying inputs into actionable 'Keep', 'Remove', or 'Change' categories while maintaining a persistent decision log. By integrating with Playwright for visual snapshots and managing structured version directories, it ensures that every design requirement is documented and visually verified before being finalized into implementation-ready design specifications.

Key Features

01Systematic feedback classification (KEEP/REMOVE/CHANGE/QUESTION)

02Finalization workflow that converts mockups into structured design requirements

03Detailed decision logging in mockup-log.md and decisions.md files

04Automated versioning of HTML and Markdown mockups in zero-padded directories

051 GitHub stars

06Visual validation and screenshot generation using Playwright browser tools

Use Cases

01Maintaining a clear audit trail of UI design decisions and stakeholder requirements

02Rapidly prototyping web interfaces with a continuous feedback loop

03Generating implementation-ready design documents from iterative visual mockups

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add gvarela/prompts mockup-iteration

For use in Claude.ai and ChatGPT

Download Skill