Your agent designs. Your design system decides.
Kiteways Design gives any AI agent a real, shared design system to build with. Screens come out consistent every time, on a real DOM canvas, and export straight to your codebase.
Works with the AI subscriptions you already have · Claude Code, Codex, Cursor, or a local model
Works with your agent
Plug in the agent you already pay for
Kiteways is an MCP server. Any agent that speaks MCP can open a file, read the library, and place components on the canvas. One command to connect, no new subscription.
- Cursor
- Claude Code
- OpenAI Codex
- OpenCode
- VS Code
Not on this list? Anything that implements the Model Context Protocol works: Windsurf, Zed, JetBrains AI, Gemini CLI, or your own agent.
Setup guidesWhy this exists
Agents can draw. They cannot yet stay on-system.
- 1
Renderers that lie
Custom canvases draw a tree that is not the DOM your app ships. The headline fits on the board and overflows in the browser.
- 2
Drift on every prompt
Tokens without components are a suggestion. Eleven prompts later there are four button styles, five greys and three radii.
- 3
Taste depends on the model
A frontier model might get it right. A local 8B picks a new accent. Your product should not depend on whose API key is in the terminal.
How it works
Three steps from a blank page to code in your repo
Which feeling should the brand carry?
Step 1
Bring a design system or build one in minutes
Point a file at an existing library, or answer a few questions and Kiteways writes tokens, foundation, and components from scratch.
“Feature needed a warning tint. None in the system, so I proposed one.”
Step 2
Let any agent design the screens
Screens are assembled from real components, so they cannot drift. When the agent needs something new, it is flagged for review with the reason attached.
export function PricingPage() {return (<Card variant="recommended"><Button>Choose Pro</Button></Card>)}
Step 3
Pull the feature into your codebase
Export the component library to Next.js or Vite, then let the agent pull every artboard in as feature screens built from those same components.
What you get
Five things that make the loop faster
Each one removes a round-trip between you, the agent, and the code.
Inspect
See the spacing, not just the pixels
Hover any node and the canvas paints its padding, margin and gap, with the token behind each value.
- Values shown as tokens, not just numbers
- What you measure is what ships, it is the DOM
Select and ask
Point at the thing, say what is wrong
Select a card, a button, or one token the agent introduced, and send a one-line fix. The agent already knows the node, the library, and why it made the choice.
- Revision lands on that node only
- Off-system choices come with the agent’s reason
Comments and mentions
@mention a node, a teammate, or the agent
Comments live on the canvas. Leave one for a teammate, or address it to the agent and it becomes an edit. Every mention resolves to a real node.
- “This button” always means that button
- Threads resolve when the edit is approved
Can this be the recommended plan?@agentplease
Multiplayer, humans and agents
Humans direct, agents draw, all in one file
Nobody pushes pixels. You select, ask, or comment, and the agents make the change. Follow a teammate and your canvas moves with theirs. Several agents work in parallel on different parts of the screen, never on the same one.
- Follow anyone, your canvas moves with theirs
- Agents work in parallel, never on the same thing
Shared libraries
One library at org, team, or project level
Tokens, foundation and components live once. Publish a version and every file that follows it catches up. Nothing is redrawn, so nothing drifts.
- Teams extend the org library, projects override locally
- Versioned, so a publish is a decision, not an accident
And the rest of the workflow
Bring work in, take code out, keep the org organised.
Paste from Figma
Copy artboards in Figma, paste on the canvas. They land as real DOM and pick up your tokens.
Export the component library
Drop the whole library into a Next.js or Vite project. Screens export as tsx or jsx built from those same parts.
Organizations, teams, projects
Roles at every level, guests free, seats billed per member. Access follows the tree so libraries and files stay where they belong.
Figma export plugin
Coming soonA Figma plugin that exports whole files, tokens and components included, straight into Kiteways. Copy and paste works today.
The loop you actually run
One review instead of forty fix-up prompts
Most of the time you spend with an agent on UI is spent correcting it. Kiteways removes the correction step by making the wrong thing impossible to draw.
Before
- “Use the same button as the other page”
- “That grey is not in our palette”
- “Now redo it in code, it looked different”
With Kiteways
- Describe the feature once
- Review only what the agent added
- Export screens that are already code
No card needed
Pricing
Free to start. Pay per member when it sticks.
Both plans run on the AI subscriptions you already have. We never resell tokens.
Free
For trying Kiteways on a real project.
- 5,000 MCP calls a week
- 1 shared library, at org, team, or project level
- Unlimited pages
- Unlimited members
- Works with your existing AI subscriptions
Pro
For teamsYou pay for each member and nothing else.
- Unlimited MCP calls
- Unlimited libraries, at any level
- Unlimited pages
- Unlimited members
- Works with your existing AI subscriptions
Guests and viewers are always free. Prices in USD, taxes added at checkout. India is billed in INR with 18% GST.
Questions
The short answers
Anything else, the docs are a click away.
- Which agents and models work with it?
- Anything that speaks MCP: Claude Code, Codex, Cursor, and local models through Ollama or similar. The library carries the design judgement, so smaller models produce the same UI.
- What does “never drifts” actually mean?
- Screens are assembled from library components and tokens, not redrawn from a description. If something is not in the library, the agent must introduce it explicitly, and it shows up highlighted for your review with the reason.
- Can I bring what I already have in Figma?
- Yes. Copy artboards from Figma and paste them onto the canvas today. A Figma export plugin is on the way.
- What do I get out at the end?
- Artboards export as tsx, jsx, pdf, png, or jpg. Component libraries export for React now, with Svelte and Vue next, straight into a Next.js or Vite project.
Stop correcting your agent.
Give it a design system. Your first library takes about ten minutes, and every screen after that stays on-system.