Mobbin-Grounded UI Reference
Have Claude Code query the Mobbin MCP for 600K real screens, flows, and sections before designing or redesigning any UI.
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
name: mobbin-reference-grounded-ui description: Have Claude Code query the Mobbin MCP for 600K real screens, flows, and sections before designing or redesigning any UI. Use when working on mobbin-grounded ui reference.
Mobbin-Grounded UI Reference
A design-workflow skill that orchestrates Mobbin MCP calls: search screens, flows, and sections. Produces a research report with hyperlinked references and only then builds. Excels at redesigning generic screens against best-in-class patterns (Mercury for finance, Notion for settings, Vercel for dev tools) and staying visually consistent with your existing app. Use when a UI feels generic and you want it grounded in real shipped patterns.
What you get
- Mobbin MCP setup
- Research-report prompt
- Per-section pattern synthesis
- Redesign plan with links to source screens
- Per-competitor gallery
- Continuity check against existing app
Customize your output
- Product category: fintech, dev tools, consumer, health, edtech
- Competitor set to reference: Mercury, Notion, Vercel, Linear, custom
- App style to preserve: strict, loose
- Scope: one screen, flow, whole product
- Include mobile: yes, no
- Screens per section: 3, 5, 10
Example output
'A profile page redesigned with an identity card, live password-rule checklist, sessions/API-keys section, and a danger zone with links to Campsite, Mercury, Vercel refs.'
Best for
Product designers, design engineers.
Note: Requires Mobbin subscription. High confidence.
SKILL.md preview
---
name: mobbin-reference-grounded-ui
description: Use this skill when a UI feels generic and needs to be grounded in real shipped design patterns from Mobbin before designing or redesigning it.
version: 1.0.0
category: Design
author: AgentVolt
license: proprietary
tags:
- design
- p4
---
# Mobbin-Grounded UI Reference
Queries the Mobbin MCP for real shipped screens and flows before designing, so UI decisions are grounded in proven patterns rather than invented from scratch.
## When to use
… (sign up to view the full skill)