Mobbin-Grounded UI Redesign
Pull real shipped screens via the Mobbin MCP, get a cited pattern report, then a redesign that fits your app's existing tokens.
Before & after
Same prompt, same agent — the only difference is the skill.
I can help you redesign your settings page. Here are some principles for good settings UX: - Group related settings into clear sections - Use progressive disclosure for advanced options - Provide clear labels and helpful descriptions - Make destructive actions (like account deletion) hard to trigger accidentally - Show the current state clearly (toggles, selected options) - Consider a search function if you have many settings For layout, a sidebar navigation with sections works well for complex settings, while a single scrollable page works for simpler ones. Would you like me to mock up a specific layout?
"Generic" is a research problem, not a taste problem. Before designing,
I'd ground this in real shipped settings patterns via the Mobbin MCP
rather than invent from principles. Here's the workflow:
RESEARCH FIRST — query Mobbin (600K real screens)
search "settings" flows from apps that do this well — Notion for
structure, Linear for density, Vercel for dev-tool settings. Pull the
actual screens and sections, not descriptions of them.
Output: a short research report with hyperlinked references, so every
design choice below traces to a real app that shipped it, not to
"best practices."
WHAT THE REFERENCES SURFACE (and principles don't)
• Notion's settings use a left rail of CATEGORIES, not a long scroll —
and the categories are nouns (Account, Members, Billing), never
verbs. Your generic version probably scrolls.
• Linear puts the most-changed setting first, not the alphabetical
first. Frequency ordering is invisible in a principles list and
obvious in the real screens.
• Vercel's destructive actions live in a visually separate "Danger
Zone" block — a pattern you copy, not reinvent.
THEN BUILD — grounded, and consistent with YOUR app
Match the new settings page to patterns from apps in your category AND
to your existing components, so it doesn't look bolted on. The skill's
strength is exactly this: redesigning a generic screen against
best-in-class references while staying visually native to what you
already ship.
WHY THIS BEATS "here's a good layout"
A layout from principles is a guess. A layout grounded in 600K shipped
screens is a bet on what already works — and the hyperlinked report
means you (and your team) can see the sources, not just trust the
output.
Want me to run the Mobbin queries and produce the reference report
before we design a pixel?About this skill
Your settings page, dashboard, or onboarding works but looks like a template, and asking an AI to "make it better" gets you the same generic cards with a gradient. This skill makes Claude research real shipped screens through the Mobbin MCP first. It separates true conventions from one app's quirks, writes a report that links every pattern to its source screens, and only then builds, using your existing tokens and components.
What it does
- Reads your codebase's tokens and neighboring screens first, so the redesign matches your product instead of the reference app
- Splits a screen into sections by job (identity, credentials, sessions, danger zone) and searches Mobbin per section with specific queries
- Labels each pattern as a convention (seen in 3+ apps) or a signature move (one app), and presents real tradeoffs where strong apps disagree
- Cites only links the Mobbin tools actually returned, and says plainly when Mobbin is not connected instead of faking references
- Covers the states references rarely show: empty, loading, error, permission-denied
- Ends with a continuity check: every new color, radius, and size mapped to an existing token or flagged as a proposal
What you get
A cited research report (patterns per section, with source apps and links, adopted vs rejected), followed by a build plan or code for the redesigned screen or flow.
Best for
Design engineers and product designers working in Claude Code who have a Mobbin subscription and want redesigns grounded in shipped products, not AI defaults.
SKILL.md preview
---
name: mobbin-grounded-ui-redesign
description: Designs or redesigns a UI screen or flow by first pulling real shipped references through the Mobbin MCP, splitting the screen into sections, separating conventions (3+ apps) from one-app quirks, writing a cited research report, then building a version that uses the existing app's tokens and components. Use when the user says "this page looks generic", "redesign our settings screen", "find real examples of X on Mobbin", "how do good apps handle onboarding", "my dashboard looks like a template", "ground this in real apps before you build it", "make this feel like a real product".
---
# Mobbin-Grounded UI Redesign
… (sign up to view the full skill)More design skills
View all Design skills →Rhinestone Clipart Studio
Use when the request is for rhinestone, gemstone, crystal, or jeweled-brooch style character clipart — generating a new faceted-gem characte
Design Critique with Prioritized Fix List
Critiques a UI, landing page, or layout against its goal and returns ranked fixes with exact sizes, spacing, and contrast ratios.
Native iOS and Android Screen Design and Review
Screen specs and mockup reviews for iOS and Android apps that use correct navigation, touch targets, type scales, safe areas and states.
Interactive Concept Explainer (Single HTML File)
A one-file HTML explainer with sliders, steps, and a baseline that teaches one concept, with its math stated and checked by hand.