Who Is nib For?

nib serves two types of people. Each has two ways to use it: hand the work to an AI coding agent (recommended), or run the CLI yourself.

• The Solo Product Builder — a software engineer, founder, or indie hacker building and designing without a dedicated designer
• The UX Designer at a Product Team — a designer who needs tokens, prototypes, and handoff specs that developers can actually use

---

The Solo Product Builder

You're building a product alone — no dedicated designer. You're a software engineer, indie hacker, solo founder, or product person shipping UI yourself. You want consistent, professional-looking screens without hiring a designer or drowning in CSS.

New to design?

Read the Design for Builders guide first — it covers the concepts, vocabulary, and step-by-step process for creating UX flows and UI screens that work. No design background needed.

Without nib:

• You guess at color scales and spacing values
• Every AI-generated component uses hardcoded hex values that don't match anything else
• Your "prototype" is a Loom video of you clicking through Pencil
• Accessibility is an afterthought — if it happens at all

Prerequisites

• Pencil.app must be installed and running before any command that reads or writes a .pen file. Run nib pencil status to confirm.
• No .pen file needed upfront — nib brand push creates docs/design/system/design-system.pen automatically on first run.
• An AI API key is optional — --no-ai gives you 77+ tokens with no key required.

Open any AI coding agent in your project — Claude Code, Cursor, Windsurf, or any agent that supports MCP. The nib MCP server connects automatically when configured.

Step 1 — Let the agent interview you and set up your brand system.

"Set up a nib brand system for my project. I don't have brand guidelines yet — interview me."

Claude asks one question at a time (name, primary color, font, personality, audience), writes brand.md, then runs nib_brand_init → nib_brand_validate → nib_brand_audit in sequence.

Step 2 — Push tokens into Pencil.

"Push the brand tokens into my Pencil file."

Claude calls nib_brand_push. If design-system.pen doesn't exist yet, nib creates it automatically and opens it in Pencil — just hit Cmd+S to save.

Step 3 — Scaffold the component kit.

"Scaffold the nib component kit in my Pencil file."

Claude calls nib_kit, which returns a recipe of branded component frames (Button, TextInput, Dialog, Checkbox, etc.) with brand token variables pre-wired. Claude then draws them into your Pencil file using the recipe. You now have a reusable component library inside design-system.pen.

Step 4 — Design your screens.

Open Pencil and create UX flow files under docs/design/screens/. Use the component kit frames and token variables (e.g. {var.color-interactive-default}) to build each screen. See the Project Structure guide for how to organise your files.

Step 5 — Export a clickable prototype.

"Build a prototype from my onboarding flow."

Claude calls nib_capture on your screen file, asks which elements link to which screens, then calls nib_build_prototype with hotspots wired.

What you get: a shareable prototype/index.html — no deploy, no server. Every AI-generated component reads brand.md and stays on-brand automatically.

---

The UX Designer at a Product Team

You're a designer at a startup or scale-up. You have an existing Pencil design system — tokens already in the file, components already designed. The problem isn't creating a system, it's connecting it to code and getting a prototype into stakeholders' hands without a deploy.

Without nib:

• Your tokens exist in Pencil but nowhere else — no single source of truth
• Developers implement components with the wrong values because there's no spec
• Sharing a prototype means recording a Loom or handing over a Figma link
• WCAG checks are manual, done in a separate tool, and usually skipped at deadline

Prerequisites

• Pencil.app must be running with your .pen file open before import or capture commands. Run nib pencil status to confirm the connection.
• Your existing Pencil file path — typically docs/design/system/design-system.pen.

Open any AI coding agent in your project — Claude Code, Cursor, Windsurf, or any agent that supports MCP. The nib MCP server reads your Pencil file live.

Step 1 — Import your existing Pencil tokens.

"Import my Pencil design system tokens from docs/design/system/design-system.pen"

Claude calls nib_brand_import. This reads all your live Pencil variables, creates DTCG token files under docs/design/system/tokens/, and writes .nib/brand.config.json.

Step 2 — Scaffold component contracts.

"Create component contracts for Button, Dialog, and TextInput."

Claude calls nib_component_init for each — wiring token slots, interactive states, and ARIA keyboard patterns into .nib/components/*.contract.json.

Step 3 — Use the kit recipe as a reference.

"Show me the nib component kit recipe for my design system."

Claude calls nib_kit, returning token bindings and placement hints for each component. Use this as a reference when designing new screens.

Step 4 — Audit before every handoff.

"Run a WCAG contrast audit on my brand tokens."

Claude calls nib_brand_audit and reports every failing color pair with a concrete fix suggestion — AA ratio, which tokens are involved, suggested adjustments.

Step 5 — Build a clickable prototype.

"Build a prototype from ux-flow.pen and wire up the navigation between screens."

Claude calls nib_capture (Pencil must be open with the file), lists all canvases, asks which elements link to which screens, then calls nib_build_prototype with all hotspots wired.

What you get: DTCG token files developers consume directly, component specs with exact token slots and ARIA states, a WCAG report for every handoff, and a clickable prototype anyone opens in a browser.

---

Which commands matter for you?

Command	Solo builder	UX designer
nib brand init	✅ Start here	—
nib brand import	—	✅ Start here
nib brand build	✅	✅
nib brand push	✅	✅
nib kit	✅	✅ reference
nib brand audit	✅	✅
nib brand validate	—	✅
nib component init	—	✅
nib capture	✅	✅
nib build	✅	✅
nib pencil open	✅ first run	✅
nib pencil status	✅ check connection	✅ check connection
nib doctor	✅ troubleshoot	✅

AI agent equivalents: nib_brand_init, nib_brand_import, nib_brand_push, nib_brand_audit, nib_brand_validate, nib_kit, nib_component_init, nib_capture, nib_build_prototype — all available as MCP tools in any MCP-compatible agent (Claude Code, Cursor, Windsurf, and more).