Blog

Introducing Jig

October 8, 2026

Jig is a design system for the interfaces coding agents build: the pages, screens, forms and buttons people see and use. It gives your agent rules to follow when it builds an interface, and it gives you a tool to check what the agent built.

Why your agent needs one

Ask a coding agent for a settings page, and you get a settings page. You also get its guesses about spacing, colour, empty screens and keyboard focus. It makes the same guesses every time, and many of them are wrong. It types a colour straight into the code. It sets grey text too faint to read. It shows an empty list with nothing to say.

Jig writes those choices down once, as rules your agent reads before it builds anything. You keep asking for what you want, the way you do now. You no longer need to add “use our colours” or “show something while it loads”.

When the agent makes a choice, it names the rule behind it. Say you ask for a page that lists your team, with a button on each person to edit their details, and one button at the top to invite someone new. The agent might tell you: “Following the Button rule, Invite is a solid button, because it is the one main action of the page. Each Edit button has an outline instead. A solid button on every row would make every row look like the most important thing on the screen.” You can see why the page looks the way it does.

Who it is for

Jig is for anyone who builds an interface with a coding agent. It works with what you already use:

• any framework, from React, Vue, Svelte and Astro to Rails, Laravel, Django or plain HTML;
• any way of styling: plain CSS, SCSS or Less, CSS modules, Tailwind or CSS-in-JS;
• pages built ahead of time, or pages your server builds on request;
• Claude Code, Codex, Cursor, opencode, Gemini CLI, or any agent that reads a skill file.

How to start

Run three commands in your project:

npx jig-ui@latest install --agent claude
npx jig-ui@latest init
npx jig-ui@latest check --all

The first puts Jig where your agent looks for it. Use your own agent’s name in place of claude. The second sets your project up: its colours, its sizes and a settings file called jig.config.json. The third checks your project and shows where it stands today. It finds what a program can find on its own, such as a colour typed straight into the code, or text too faint to read.

Then ask your agent to build something. It reads the rules and tells you which ones it applied.

For a whole page or feature

Jig also gives your agent a set of steps, each one a command you type to your agent:

1. 1.
   /jig decide records the choices that hold across your whole project. You run it once.
2. 2.
   /jig spec writes down exactly what one page or feature must do.
3. 3.
   /jig mockup draws a rough version for you to approve. You can skip it.
4. 4.
   /jig make builds the page.
5. 5.
   /jig critique opens the built page in a browser and checks it against the rules, the spec and your choices.
6. 6.
   /jig tweak makes a small change to a page that is already built.
7. 7.
   /jig ship tells you whether everything Jig checks is done.

You make the decisions at each step. The agent does the work. In Claude Code you can also turn on a check that stops the agent from finishing while its work is incomplete.

What Jig does not check

Jig checks the interface and nothing else. It knows nothing about logins, passwords, secret keys or your servers. Passing jig check says nothing about security. Use a security tool for that.

Where to go next

The Guide takes you through a new project and an existing one, step by step. The Reference lists every rule: what it forbids, and what to do instead.