For developers
Developers
Stop re-measuring pictures. Inspect real element properties, copy code in your stack's language, script exports from the CLI — and let AI agents read the design through MCP.
- Dev Mode: spacing, type and variables on every element
- CSS, React, Tailwind, SwiftUI, UIKit, Compose or Android XML
- CLI and MCP for scripting and AI workflows
Why hand-off usually wastes your week
Specs arrive as screenshots with arrows; the real values stay locked inside a designer's tool.
You transcribe colors, spacing and type ramps by hand — and every transcription is a chance to be wrong.
The design tool lives outside your toolchain: nothing to script, nothing to automate, nothing your agents can query.
By the third revision, the code and the design file no longer agree, and nobody knows which one is right.
Numbers that matter at hand-off
- 7
- code formats generated straight from element properties in Dev Mode
- 0
- screenshots to re-measure — click any element and read its real values
- 4
- capabilities over MCP: structure, properties, code generation, PNG rendering
- 3
- ways to work: browser editor, command-line tool and MCP for AI agents
Built for people who ship code
Inspect the source, not a screenshot
A design file is a data structure, and Dev Mode treats it like one. Click an element and you read its actual properties — dimensions, paddings, colors, type styles, and variables with their modes — the same values the design was built with. Generated code follows the same rule: auto-layout frames come out as the flexbox they already behave like, and tokenized values stay tokens instead of collapsing into magic numbers.
The workflow context comes with it. Ready-for-Dev annotations tell you which frames are contracts and which are drafts; comments carry the reasoning; version history answers what changed since you last built against the file. The guessing games that make front-end estimates dishonest simply have fewer places to hide.
Automate it: CLI and MCP
The editor is not the only door. A command-line tool renders documents and exports PNG — a natural fit for docs builds and CI checks — and automated code generation runs in pipelines from the same designs, so generated values always agree with what Dev Mode shows.
For AI-assisted development, MCP is the difference between an agent that guesses from pixels and one that knows: it lists files, walks document structure, reads element properties, generates code and renders reference PNGs. Point your MCP-capable assistant at it and the design file becomes queryable context in your editor.
Frequently asked questions
How accurate is the generated code?
It is derived from the element's real properties — spacing, colors, typography, variables — with auto-layout expressed as flexbox. Treat it as a faithful starting point: it removes transcription errors, and you still adapt it to your component conventions and state handling.
Do I need a paid seat just to inspect designs?
Dev Mode ships with the Professional and Organization plans. Viewing and commenting on shared designs are free on any plan — code-level inspection and generation are what the paid tier adds.
Can I use Tuvi from scripts and CI?
Yes. The command-line tool renders documents and exports PNG for pipelines, and automated code generation covers the core formats — so docs builds and CI checks run without anyone opening the editor.
What can an AI agent actually do with a design?
Through MCP: list design files, read the document tree, inspect element properties, generate code and render elements to PNG. Modifying documents is deliberately not exposed — agents read and generate, they do not silently edit.
Do I have to work in the browser?
The editor is browser-based — zero setup for anyone on the team — but the tooling is not browser-only: the command-line tool covers scripted rendering and export, and MCP brings designs straight into your IDE assistant.