From a URL to a design you can edit.
Trunk reads your running product and turns it into pages, components, variants, icons and tokens. This page walks the whole path, from setup to your first edit.
Setup · four steps.
You land in Trunk after signup. Setup is four short screens.
- Name your company. Once. Every product you capture lives under it.
- Name the product. A product name and its address in Trunk.
- Capture. Pick screen sizes and paste your live URL.
- Pick a plan. Everyone starts with a free month, no card. Move to Team when you want AI, Verify and the full Analysis.
People are added later in Settings.
Capture · Trunk reads the running product.
Capture opens your product in a real browser at each screen size you picked, so it sees what your users see: the final layout and the computed styles. Nothing is installed and nothing is connected to your code.
Trunk starts at your URL and follows the links it finds, page by page. A page that asks for a password is never read this way.
You use your own product in a live frame, and every page you open is captured. This reaches pages behind a sign-in.
Pages appear as each one is read. Components, tokens and icons are worked out when the walk ends.
What it finds.
A capture is not a screenshot. Each page is read for the parts a design system is made of.
Colour, type, spacing, radius and shadow, read from the real styles and grouped into tokens.
Every inline SVG, once.
Structure that repeats within and across pages, with every place it is used.
Saved as real HTML and CSS, at each screen size you picked.
Variants. When the same component shows up with a different look, Trunk files it as a variant, not a second component.
The journey · derived, not drawn.
Every real link between two captured pages becomes an edge.
The result is a graph of the pages and the links between them. Nobody draws it. Capture again and it is redrawn.
Design on it.
Select an element on a page and change its properties, such as colour, spacing, radius and type. The captured page is never changed. Edits are kept beside it.
- Change one element, or every use of a component.
- Change a colour or radius token and every element using it follows.
- Ask Trunk in words for a new variant of a component you name. It is drawn from the product's own tokens and components. You keep it or discard it.
- Preview the product at 1440, 768 and 390 wide.
There is no save button. Edits save as you make them. History lists every change, and any entry can be restored.
Principles.
Common questions.
No. Capture needs a URL and nothing else.
Yes, when you walk it yourself. What you type to sign in goes to your product only. Trunk does not keep it, and the session's browser is thrown away when the capture ends.
Capture again.
Each person is Owner, Can merge, Can edit or Can view. A product is open to everyone, or to chosen people. People who only view are free.