designer-skill: cleaner UI from your agent.

Get it
Niblet
Niblet × Claude Code

Claude Code UI design with real references

Ground Claude Code’s frontend work in real screens before it writes a line.

Claude Code writes frontend fast, but generic output usually means it is inventing patterns from priors. The fix is evidence: give it real screens that show what the surface should do. Niblet supplies those screens — searchable by what an interface does — over MCP, so Claude Code can pull references mid-task without you leaving the terminal.

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. Ask for references inside the task

    Phrase frontend tasks so the agent must ground first: “build a settings page; pull 3 references from niblet for iOS settings screens and follow their structure.” The skill’s workflow makes this the default.

The workflow

Brief
State the surface’s job, not just “make a page”. What must the user accomplish?
Reference
find_ui_references returns 1–3 real screens with thumb + inspect URLs and why each is relevant.
Implement
Claude Code follows the reference structure — hierarchy and states, not pixels.
Inspect
Render narrow + wide, exercise loading/empty/error states before calling it done.

Setup details, token management, and the full tool schema live in the docs.

Read the docs

Questions? Contact the project. Legal: Terms · Privacy