What is the redesign-screen skill?
The redesign-screen skill takes a screenshot, your code or a design file and redesigns it using screens from real apps on Mobbin as evidence. It keeps your design system, copy and data, and returns a before and after image with a short report.
The redesign-screen skill is a design lead workflow for someone who has a screen that exists and wants a better version. It redesigns a screen, section or component from a screenshot, code or a design file.
Every decision is backed by a real product. The references decide what to build and are the evidence for it, while your own design decides how it looks, so the result is not a copy of one product.
Two modes
- Explore, set with --explore: up to three variations, each built whole from one direction, as mockups beside the baseline. Nothing is applied until you pick one.
- Targeted, set with --targeted: the problems you tick are fixed in one design applied to the source.
The eight steps
The skill scopes the target, freezes the baseline, searches and locks references, plans the moves, applies them, checks the render against the job, renders a before and after image and writes a report. It plans at most five problems and moves.
What it keeps
A preserve list is written before any change. It keeps the product's domain, its design system and theme, and its own copy and data, and leaves everything outside the target alone. A new label is written in the product's terms.
Who the redesign-screen skill is for
Best for
- Anyone who points at a screen, section or component they have and asks to redesign, improve, restyle or rebuild it.
- People who want to see a few directions for a screen before one is applied.
- Teams with a Mobbin Pro, Team or Enterprise plan, which the skill needs for its references.
How to install Redesign Screen Skill: Redesign From Real App References
claude plugin marketplace add mobbin/skills
claude plugin install mobbin@mobbinPick the plugin for your agent
The plugin installs both the Mobbin skills and the Mobbin MCP server. Codex uses
codex plugin marketplace add mobbin/skillsthencodex plugin add mobbin@mobbin.Install the skills only, if you prefer
Run
npx skills add mobbin/skills. This installs only the skills, so add the MCP server to your agent's MCP config yourself with the url https://api.mobbin.com/mcp under mcpServers.Sign in to Mobbin
On first use your agent opens a browser to sign in to Mobbin. You need a Pro, Team or Enterprise plan.
Redesign something
Point your agent at a screen and ask to redesign it. Add --explore for variations or --targeted to fix specific problems.
Check that it loaded
A redesign request returns a before and after image and a report. If Mobbin is not connected, the skill says so in one line and stops.
Key features
- Reference-backed movesEach move fixes one ticked problem with a decision that screens on the chosen side show, and a move with no screen behind it is cut.
- Three kinds of evidenceA claim rests on the source screen, the user's own words, or a Mobbin screen that was looked at and linked by its mobbin_url.
- Job walkThe path is walked as the person using it, through six checks: the path leads, decisions have their information beside them, nothing needed is missing, labels and values are true, every state works and platform minimums hold.
- Explore and targeted modes--explore builds up to three variations as mockups beside the baseline, and --targeted fixes the ticked problems in one design.
- Preserve listThe product's domain, design system and theme, and copy and data are written down before any change and kept.
- Output in the source's formA codebase gets edits to the source, a design file gets a new frame beside the original, and an image gets a PNG.
- Render checkThe render is walked again through the job checks, with at most three rounds of fixes, and anything outside the design system is fixed or named.
- Before and after imageThe reply leads with a before and after image when the render can be captured, followed by a report that explains each change against the screens that informed it.
- Mobbin search toolsReferences come from the Mobbin MCP tools search_screens, search_sections and search_flows.
Frequently asked questions
What does the redesign-screen skill do?
It redesigns a screen, section or component from a screenshot, code or a design file, grounded in how real apps on Mobbin handle the same screen. You get a before and after image and a short report, and the redesign stays in your own design system with anything that already works kept.
How do I install the redesign-screen skill?
For Claude Code, run claude plugin marketplace add mobbin/skills and then claude plugin install mobbin@mobbin. Codex uses codex plugin marketplace add mobbin/skills and codex plugin add mobbin@mobbin. Agents that only support the Agent Skills standard can run npx skills add mobbin/skills and add the MCP server themselves.
What do I need besides the skill?
You need a Mobbin Pro, Team or Enterprise plan, and your agent opens a browser on first use to sign in. The skill gets its references through Mobbin's search_screens, search_sections and search_flows tools. When they are not connected, it says so in one line and stops.
What is the difference between explore and targeted mode?
Explore, set with --explore, builds up to three variations as mockups beside the baseline, each from one direction, and applies nothing until you pick one. Targeted, set with --targeted, fixes the problems you tick in one design applied to the source. If you give neither, the mode is asked as the first scoping question.
What form does the redesign come back in?
It goes back in the form the source came in. A codebase gets edits to the source, a design file gets a new frame beside the original so the baseline survives, and an image gets a PNG. In explore mode every source renders as mockups first, and the choice applies to the variation you pick.
What does the skill keep unchanged?
It writes a preserve list before changing anything: the product's domain, its design system and theme, and its own copy and data. Everything outside the target stays as it is when the target is one component or section. It also keeps whatever you asked to keep and any part of the target that already works.
How many changes does it make?
At most five. The problem list holds the problems you ticked, each tied to the step of the job it breaks and each getting one move. Every other candidate goes to a deferred record that feeds the closing menu, so nothing it saw is lost between passes.