Ignaru

install

ignaru is a design canvas that lives in your repo. the canvas is the.ignaru folder: every node is a folder with an index.html, so git, your editor and any agent can open it.

the mac app is the canvas. you can also run the canvas tools headless, with no app open, from any project:

terminal, in your project

npx -y ignarucli mcp --root .

that serves the ignaru-studio mcp server over stdio from ignarucli on npm. it reads and writes.ignaru in the folder you pass as --root.

connect your agent

your agent keeps running on the subscription you already pay for. connecting adds the ignaru-studio mcp server, and for claude code and codex the ignaru plugin with its design skills.

in the app, connect your agent is on home and in the account menu: one click for claude code, codex, cursor or gemini. or add the server by hand:

claude code

claude mcp add ignaru-studio \
  -- npx -y ignarucli mcp --root .

codex

codex mcp add ignaru-studio \
  -- npx -y ignarucli mcp --root .

cursor,.cursor/mcp.json

{
  "mcpServers": {
    "ignaru-studio": {
      "command": "npx",
      "args": ["-y", "ignarucli", "mcp", "--root", "."]
    }
  }
}

any other agent works with no integration at all: reading and writing the.ignaru folder is enough. mcp makes it faster, never required.

canvas basics

everything on the canvas is a node: a frame you draw, a page an agent makes, an image, a terminal. each one is.ignaru/nodes/<id>/ with node.json and index.html. where nodes sit, their links and pages live in.ignaru/canvas.json.

you do	what happens
double-click a node	you enter it and select the elements inside; the inspector edits their styles
pin a comment	it is saved to comments.json and becomes a turn for the agent, which marks it working, edits, then resolves it
draw on a node (D)	each stroke goes into annotations.svg with its box and the elements under it, so "make this bigger" has a target
play (Shift-P)	the page goes live in place: clicks, hovers, animation and scroll. Esc stops
delete a node	soft: the folder moves to.ignaru/.trash and Cmd-Z brings it back
versions	a node's inspector lists the git commits that changed its page; click one to see it, restore to bring it back
export	copy a node as png, react or a prompt, or save it as png, svg or a react file
deploy	a preview link through your own vercel or cloudflare login; production asks once more

shortcuts

press? in the app for the full sheet. it reads the same table as the keys, so it is always right.

keys	does
Cmd-C, Cmd-X, Cmd-V	copy, cut, paste nodes or elements
Cmd-D	duplicate, placed in the first clear gap
Delete	delete, undoably
Cmd-Z, Shift-Cmd-Z	undo, redo
Cmd-A	select every node on the page
Cmd-G, Shift-Cmd-G	group, ungroup
Cmd-], Cmd-[	forward, backward; with Shift, front and back
Shift-Cmd-L, Shift-Cmd-H	lock, hide
F2	rename
Option-Cmd-V	paste style: radius and opacity
arrows	nudge 1px, with Shift 10px
Shift-1, Shift-2, Shift-0	fit all, fit selection, 100%
F, T, R, O, N, I	frame, text, rectangle, ellipse, line, image
P, D	vector pen, draw for the agent
Shift-P	play the node
Cmd-F	find nodes, element names and words

the design check

every page your agent makes gets checked. ignaru opens it at desktop, tablet and phone sizes and looks for the habits that make ai pages look generated, like small labels over headings or rows of same-size boxes. it tells your agent what it found, where, and how to fix it, and your agent fixes it.

what your agent reads

tells: 2 found at 1440x900 in .ignaru/nodes/hero-v2

eyebrow-label  main > p.eyebrow
  measured: fontPx=12, trackingEm=0.14, gapPx=12
  fix: Delete the label, or fold it into the headline.

habit	found when
cream-wash	a warm light fill covers more than 15% of the screen
eyebrow-label	small tracked capitals sit just above a heading
two-tone-headline	an h1 or h2 paints in two colours
uniform-boxes	three or more same-size bordered or filled boxes, or pill chips
button-row	three or more bordered buttons in one row
all-grey	nothing on the page has any colour
left-border-selected	a selected row is marked with a coloured left border
too-many-ctas	more than two filled buttons in the first screen
neon-on-black	lime text or fills on a black page
nested-cards	a card inside a card
offset-shadow	a hard, unblurred offset shadow
lucide-icons	three or more lucide icons
glow-and-gradient	blurred orbs, coloured glows, or a gradient under 30% of the page
border-and-shadow	cards with both a border and a shadow
default-fonts	almost every letter is a system face or inter
title-case-headings	most long headings in title case

the last five come from measuring 252 well-made and 250 ai-made sites, and none of them fires on the library's pieces.

mcp tools

anything you can do in the app, an agent can do without it. the ignaru-studio server serves the canvas tools over the same.ignaru files; these are the ones agents use most.

tool	does
canvas	a summary of the board: pages, nodes, links
get_node	one node's html, comments, drawing and links
create_node	a new node, with html, a page, a size or a preset (phone 390, tablet 820, desktop 1440)
update_node	edit a node's html, brief, title or status
move_node	place, size, radius, opacity and stacking
link_nodes	join two nodes
group_nodes, ungroup_nodes	group and dissolve
delete_node	soft delete into.ignaru/.trash
list_pages, create_page	the canvas pages
comment, resolve	pin and close comments
annotate	draw on a node
approve	approve or reject a direction
get_selection	what the person has selected, and where they are looking
list_elements, select_element	the elements inside a node, and selecting them
get_styles, update_styles	read and write an element's styles
list_versions, restore_version	a page's git history
screenshot_node	a still of a node
export	png, svg, react or a prompt
deploy_node	a preview with your own vercel or cloudflare login
get_usage	your claude plan usage

pricing and questions

the canvas is free. pro pays for design runs: the library and a taste check on every page. see pricing.

what is ignaru?

a design tool where your own coding agent designs with you. you and claude code or codex work on one canvas, and every page is real html in your repo.

which agents work with it?

claude code and codex today. cursor, gemini cli and any agent that speaks mcp can use the canvas too.

do i pay for ai credits?

no. your agent runs on the plan you already have. pro is $20 a month and pays for design runs and the library of finished pieces.

does the app have to be open?

no. your agent can work on the canvas from the terminal with the app closed: npx -y ignarucli mcp --root.

where do my files live?

in your repo. every page is an index.html in a.ignaru folder, with your notes and drawings beside it.

can i start from my live site?

yes. bring any live page onto the canvas as html that you and your agent can change.

can my team use one canvas?

yes. people and agents work on the same canvas, and each page says who made it.

what do i get at the end?

html, a react component or a pull request on your repository.