designer-skill: cleaner UI from your agent.

Get it
Niblet
Niblet × Codex

Codex UI design with real references

Give OpenAI Codex a catalogue of real screens to design against.

Codex is at its best with a precise, checkable contract. Niblet turns “design a better X screen” into exactly that: real screens define the structure, states, and vocabulary, and the agent implements against them instead of improvising a generic layout.

Set up

  1. Connect the remote MCP server

    Add the Niblet MCP endpoint to ~/.codex/config.toml with your key, then restart Codex — it reads the file once, at startup. The find_ui_references, find_ui_materials, get_design_reference, and get_ui_component tools appear alongside Codex’s built-ins.

    # ~/.codex/config.toml
[mcp_servers.niblet]
url = "https://niblet-api.pymodel.com/mcp"
http_headers = { "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. Make references part of the task definition

    In the task brief: “first search niblet for the pattern, cite the screens you followed”. Checkable, and it stops the first draft from being a guess.

The workflow

Brief
Describe the job the surface performs and its primary action.
Reference
Search the catalogue; keep only screens that answer the design question.
Implement
Codex implements hierarchy and states from the evidence.
Verify
Render at phone and desktop widths; check every reachable state.

The docs cover configuration for every HTTP MCP client.

Read the docs

Questions? Contact the project. Legal: Terms · Privacy