Documentation

The methodology, the setup, and every part of the loop — broken down per topic.

Get started in 3 steps

From zero to a compiled design system — rendered in Figma and readable by AI agents — one install command, no manual exports.

1
Install the npm package
In your project root run pnpm add -D inkbridge then pnpm exec inkbridge setup. Setup creates the scanner + token API endpoints and gitignores the scanner output. No package.json scripts are added — your normal pnpm dev serves them.
2
Load the plugin in Figma Desktop
Go to Plugins → Development → Import plugin from manifest and select node_modules/inkbridge/manifest.json from your project. Figma remembers it — you only do this once.
3
Generate your design system
Run pnpm dev to start your dev server, then click Generate Design System Page in the plugin — colour tokens, typography, and every component variant are built on demand.

How the story sits between design and code as the canonical artifact — and how each part of the loop works in practice.

Install Inkbridge and wire it into your Next.js project.

How Inkbridge discovers your components and Storybook stories from inkbridge.config.json.

Extract tokens, themes, and styles from your Tailwind config — and push token edits back as PRs.

Control how components, previews, and states are rendered in Figma.

Expose your design-system model to AI agents over MCP — read components, variants, and tokens with no Figma in the loop.

The active research track — pushing structural component edits from Figma back to your stories as code-edit PRs.