Dev Mode.
Everything, measured.
Select anything and read what it is: the measurements, the variables behind them, its code — and what is ready to build.
From a selection
to a build.
- Select
A screen, a component, a single layer. The inspector follows the selection, and so does everything below.
- Measure
Sizes, spacing and distances to what is around it, read off the real thing rather than estimated from a picture.
- Read the values
Not a hex code: the variable the colour is bound to, the size, the text style — the names your design system already uses.
- Take the code
The selection as code in CSS, SwiftUI or Compose, with the values as the variables they are. Copy it, or let your agent fetch it.
The code for what
is selected.
Dev Mode writes the selection out in CSS, SwiftUI or Compose, with every bound value written as the variable it is — never as a number somebody has to trace back later. Your coding agent can ask for React or HTML too.
- Five targets, one selection
- Tokens, not hex codes and pixel counts
- The same context a connected agent fetches
.dish-cell { display: flex; gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius-md); background: var(--surface-raised);}.dish-cell .price { color: var(--text-accent); font-size: 17px;}What the file tells you
before you ask.
- Ready for development.
A designer flags a screen as ready and it joins an index across the whole file — what can be built now, what is still moving, and what changed since you last looked.
- Notes pinned to the layer.
Behaviour, accessibility, content, motion — annotations with categories and presets, attached to the exact element they describe rather than to a document beside it.
- A component, linked to its code.
Connect a component on the canvas to the component in your codebase, and Dev Mode shows the real one — its name, its props, how you call it — instead of a generated stand-in.
Inspecting a picture,
and inspecting the thing.
A redline
Measured off a pictureDev Mode
Read off the designStart coding while you design.
Lindi is free for its early users. Tell us about your team and we answer within 48 hours — yes or no.
- 1You connect your project
- 2We open your screens with you, on a call
- 3Your first push lands in your code