niblet

A coding agent building UI gets two things here: a design skill that keeps it working from your product rather than a generic template, and real screen references from the Niblet catalogue when a specific visual question is still open.

The skill settles the screen's job, its real states, and what counts as done before writing anything; it builds from the tokens and components already in your codebase; and it finishes by rendering the surface and exercising it, so a green build alone is not a pass.

The skill works alone. The server is optional and needs a token.

Install the skill

npx skills add PyModel/niblet-skill-mcp --skill niblet -y

Or copy it yourself, keeping references/, agents/, LICENSE, and NOTICE alongside it:

cp -r skill/niblet ~/.claude/skills/niblet   # Claude Code
cp -r skill/niblet ~/.pi/agent/skills/niblet # Pi (its skills CLI has no -g for this target yet)
cp -r skill/niblet ~/.agents/skills/niblet   # agents that read ~/.agents/skills

Then ask for it by name:

Use Niblet to design the checkout empty and error states.

The workflow settles the screen's job, primary action, hierarchy, existing tokens, real states, and acceptance criteria before writing anything. It finishes by rendering the surface and exercising it, so a green build on its own does not count as a pass.

Connect the server

Pick one. For public catalogue access, use hosted MCP with the niblet_at_… account key created at niblet.pymodel.com/account:

claude mcp add --transport http niblet https://niblet-api.pymodel.com/mcp \
  --header "Authorization: Bearer $NIBLET_ACCOUNT_KEY"

For Claude Desktop, claude.ai, or Claude mobile, which cannot send a key header, add hosted MCP as a custom connector and sign in instead: Settings → Connectors → Add custom connector → https://niblet-api.pymodel.com/mcp, then sign in to Niblet and allow access. No key is involved; revoke the grant any time under Connected apps at niblet.pymodel.com/account. Step-by-step screenshots: niblet.pymodel.com/docs#claude.

For the token-free bundled skill resources, niblet_help, and niblet_status, run the local stdio adapter:

claude mcp add niblet -- npx -y @pymodel/niblet

Or use the equivalent host configuration:

{
  "mcpServers": {
    "niblet": {
      "command": "npx",
      "args": ["-y", "@pymodel/niblet"]
    }
  }
}

The local adapter's three catalogue tools call REST /v1, not hosted MCP. Public niblet_at_… account keys created at niblet.pymodel.com/account authorize both /v1 and /mcp. Set NIBLET_TOKEN to that key, plus NIBLET_API_ORIGIN and NIBLET_MEDIA_ORIGIN only when targeting a self-hosted deployment. Skill resources, niblet_help, and niblet_status configuration remain available with no token.

Ownership decision: keep public, account-key catalogue access in the hosted HTTP MCP. Keep bundled resources, playbook prompts, local diagnostics, and the optional REST bridge in this stdio adapter. Do not proxy hosted MCP through this package or add its local-only surfaces to the hosted service; keep only the three shared catalogue contracts in lockstep.

Node.js 24.15+; npx fetches the package on first launch. Keep every token in the host's secret/environment facility, never in a committed file or chat message.

Saving the config does not register the server, so confirm it worked. niblet_status reports the configured origins, whether a usable token is present, and whether the API answers:

Token:        present (44 characters, not shown).
Documents:    5/5 readable (niblet://skill, …).
API check:    OK

Tools

The three catalogue tools match the hosted service exactly. niblet_help and niblet_status are local-only.

Each catalogue result keeps its human-readable text and images in MCP content and also returns validated structuredContent: typed references, typed materials, or a typed design reference. Calls made from the bundled skill identify its metadata.version through clientSkillVersion.

Only web screens carry a design reference, and a web result says so in its own text, so an agent that finds a screen worth borrowing from can read the system behind it in one follow-up call.

Resources

The bundled documents, served without a token. Cross-links between them are rewritten to these URIs, so an agent reading one can follow every reference.