designer-skill: cleaner UI from your agent.

Get it
Niblet
Niblet × Cursor

Cursor UI design with real references

Cursor already sees your codebase. Niblet shows it everyone else’s best screens.

Cursor composes from the code it can see. When the task is a surface your codebase has no good example of — an onboarding flow, a paywall, an empty state — Niblet is the missing context: real screens from real apps, retrieved by what they do.

Set up

  1. Connect the remote MCP server

    Add the Niblet MCP endpoint to the agent’s user-level MCP configuration with the key itself, not an environment variable. Your dashboard writes this line with your key in place. Four tools are exposed: find_ui_references, find_ui_materials, get_design_reference, and get_ui_component.

    # Claude Code
claude mcp add --transport http --scope user niblet https://niblet-api.pymodel.com/mcp \
  --header "Authorization: Bearer YOUR_NIBLET_KEY"

  2. Or install the free local skill

    The niblet skill is free, local, and works without an account or token. It carries the reference workflow; pointing it at the MCP adds the live catalogue.

  3. Reference before generate

    In Cursor’s agent mode, ask it to pull references first: “find niblet references for this pattern, then propose the layout.” One habit, dramatically less generic output.

The workflow

Frame
Name the surface, its job, and the platform you are targeting.
Reference
Pull screens with find_ui_references; inspect the full-resolution versions.
Implement
Let Cursor map the reference structure onto your components and tokens.
Review
Compare the result against the references — hierarchy first, styling second.

Token setup and MCP client configuration are in the docs.

Read the docs

Questions? Contact the project. Legal: Terms · Privacy