Mobbin-Grounded UI Reference

Have Claude Code query the Mobbin MCP for 600K real screens, flows, and sections before designing or redesigning any UI.

Designp4
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

PromptRedesign our settings page — it looks generic.
Beforegeneric AI agent
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?
Afterwith Mobbin-Grounded UI Reference
"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

SKILL.md
---
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)
Sign up to view, copy, and install the full skill