The app-wireframe skill turns any iOS app into editable wireframes on a Whimsical board. Name an app and your AI agent pulls its key screens from Mobbin, or point it at your own screenshots.

That one line gets you a board with up to 15 screens, in the order you'd move through the app, each rebuilt as a lo-fi iPhone wireframe. Cards, tab bars and list rows are grouped, so you can drag them around and start editing right away. Every wireframe links back to its screen on Mobbin.

Browse the 22 free app wireframe templates we made with it.

What you needCopied!Link to this section

• An AI agent that supports skills, remote MCP servers and images, such as Claude Code. Results depend a lot on the model, so use the strongest vision model you have.
• uv, which runs the skill's Python scripts and installs what they need the first time.
• A Whimsical account, connected through the Whimsical MCP.
• A Mobbin Pro, Team or Enterprise plan, connected through the Mobbin MCP. You can skip this if you only use your own screenshots.

The skill only uses Mobbin's Standard Search, so it doesn't spend Mobbin AI credits.

Set it upCopied!Link to this section

In Claude CodeCopied!Link to this section

Run these two commands, then restart Claude Code and run /mcp to sign in to Whimsical and Mobbin:

The plugin adds the skill and both MCP servers for you. If you already had either server set up, you'll see it twice. Disable one of them in /mcp.

In other agentsCopied!Link to this section

1. Copy the skills/app-wireframe folder into the folder your agent loads skills from.
2. Add the Whimsical MCP server: https://mcp.whimsical.com/mcp (setup guide).
3. Add the Mobbin MCP server: https://api.mobbin.com/mcp (setup guides for Codex, Cursor and more).

Wireframe an app from MobbinCopied!Link to this section

This is the fastest way in. Mobbin collects real screens from current iOS apps, and the Mobbin MCP lets your agent search them like you would on mobbin.com. The agent finds the app's sign-up, home, search, checkout and settings screens, picks the ones that show how the app works, and downloads them at full resolution.

Start your agent in the folder where you want the working files, then ask in plain language:

You can wireframe a whole app, a single screen from its Mobbin link or a description, or one of your Mobbin collections, even one that mixes several apps. To use a single screen link, save the screen to your Mobbin account first.

The agent doesn't stop to confirm each step, only when something blocks it. It will probably ask permission for each tool the first time. Allowing the Whimsical and Mobbin tools and uv run for the session keeps long runs moving.

Wireframe your own screenshotsCopied!Link to this section

No Mobbin account? Point the agent at a folder or a single image instead. That can be your own app, your designs, or any app whose screenshots you have the right to use.

Any iPhone screenshot works. Android and tablet screenshots get squeezed into an iPhone frame, so they're not a good fit.

What you getCopied!Link to this section

A new Whimsical board called <App> iOS wireframes, with five wireframes per row and a short credit line above them naming the app and Mobbin. Before moving on to the next screen, the agent compares each wireframe with its screenshot, and a second reviewer checks it again. The final report lists anything it couldn't get right.

One screen takes a few minutes. A 15-screen app takes about an hour and a fair amount of model usage, so try a single screen first.

If a run stops halfway, ask again with the same app and it picks up where it left off. Each run keeps its screenshots, drafts and progress in wireframes/<Name>/.

Add the screenshots next to the wireframesCopied!Link to this section

The Whimsical MCP can't upload images yet, so this step is manual.

1. Open the board.
2. Drop every file from wireframes/<Name>/screenshots/ onto empty canvas in one go.
3. Ask your agent: Arrange the screenshots on the Airbnb board

The agent matches each image to its wireframe, places it alongside at the same size, and moves its Mobbin link underneath.

Free app wireframe templatesCopied!Link to this section

We ran the skill on 20 well-known iOS apps, one per category, and published the boards in the Whimsical template gallery. Each one is free to duplicate and edit, with every wireframe next to its screenshot and linked to the screen on Mobbin.

The apps belong to their makers. Whimsical isn't affiliated with any of them.

FAQCopied!Link to this section

Does it cost anything?Copied!Link to this section

The skill is free and open source under the MIT license. You'll need a Whimsical account and, for the Mobbin route, a Mobbin Pro, Team or Enterprise plan. Your AI agent's own usage applies.

Can I use the Mobbin screens however I like?Copied!Link to this section

No. Screens on Mobbin belong to the companies that make those apps, so use them in line with Mobbin's terms. The skill keeps them on your machine, credits the app on every board and links each wireframe to its screen on Mobbin. If you're working in a git repository, keep the wireframes/ folder out of it.

Does the skill collect my data?Copied!Link to this section

No. Your agent talks to Whimsical and Mobbin through their MCP servers, under their own privacy policies: Whimsical and Mobbin.

Something went wrong. Where do I report it?Copied!Link to this section

The skill is new and has mostly been tested with Claude Code. If something breaks, open an issue on GitHub.