Soffi for designers
Design on one version, on your real product, together
What changes for you
| Today | With Soffi |
|---|---|
| You have no live design system of record | One system of record, read from your code |
| Drift is invisible and fixed one screen at a time | See every gap, then fix it once, apply everywhere |
| You create a mock or a ticket to edit one screen | You edit the screen that's already live |
| Your prototyping tools are single-player | Cursors, comments and video, in the same running app |
| Nobody can edit or ship your prototype | It's a branch in your repo, ready to review |
| You test a dummy prototype | They test your real product |
| To review, you pull a branch or set up local dev | You send a link, no seat or install or local dev setup |
“We're all very AI-native, but we still can't collaborate as a team on one source of truth.”
“What we mock to test is still a dummy prototype. It doesn't feel like an actual product.”
What designers do with Soffi
- 01
Prototype together on one live version
Open your app from any branch and edit it with your whole team in the same workspace, change history visible. Every change is attributed, and you can revert the workspace to a point in time.
- 02
Fix UI bugs and QA on the live screen
Pick up the ticket, click the element that's wrong, and push the fix as a PR. Console logs and JavaScript errors are right there, so you're not reproducing the bug from a screenshot.
- 03
Share it, review it, keep the feedback in one place
Send a link anyone can open with comment-only access, no seat and no install. Threads pin to the component they're about, and any comment can become a change on the spot.
- 04
Change your design system once, see it everywhere
Edit a token or a component and it applies across every screen that uses it. Batch-deprecate what you're moving off and Soffi stops offering it, even when someone prompts for it.
What you get
Design system from code
Tokens, components and variants from your repo. One system, not two.
Visual editor
Spacing, type, color and variants from your own tokens. Layers and CSS underneath.
Live workspaces
Your product in the browser, one click, any branch. One per direction to compare.
Multiplayer
Everyone in the same running product, every change attributed.
Collaboration
Comment or record videos on each component. Keep every thread in one place.
Review links
A link on the running product, comment-only. No seat, no install, no login.
One-click pull requests
A pull request with a summary and visual diffs into your existing eng review.
Works with what you already use
- GitHub
- An engineer connects it once. You never touch it, and your work exits as a normal pull request.
- Your design system
- Read from your codebase in real time, so it matches production.
- Your product's context
- Architecture, standards, patterns and design system, kept current.
- Figma or design tools
- Attach files as context whenever you want them.
- Linear or Jira
- Pick up a UI ticket, fix it, push the PR. Work stays where it's tracked.
- Cursor, Claude Code and Codex
- Your engineers keep them. Same branch, same PR.
Common questions
01Isn't this another source of truth?
It's the opposite. Soffi holds no copy of anything. Your components, tokens and variants are read from where they already live, so every change is built from your own design system, not an approximation of it.
02Where does the design system come from?
Your codebase, so it's what's actually in production. Change a token there and it applies everywhere that uses it, with no second copy and no mapping layer to keep current.
03Does this replace Figma or design tools?
No, and we're not trying to. Figma is great for what doesn't exist yet: zero to one, brand, redesigns.
Most of your work is on features that already ship, and drawing those again in a canvas just to hand them off is the long way round. Bring your files in as context.
04What about the last 20% a prompt never gets right?
That's the style editor. Drag, resize, retype, swap a variant, and go into the CSS and the layers when you need to.
05Our engineers use different tools. Doesn't this add fragmentation?
They keep Cursor, Claude Code, and Codex, and your changes arrive as ordinary pull requests on the same branch. What converges is the artifact, not the tooling.
06Early on I don't want fidelity, I want to explore. How do I do that with Soffi?
It's faster, not more constrained. Opening a workspace takes about two minutes and you can throw out the whole layout.
Standing up a low-fidelity prototype costs more time, and then costs it again when you translate the result into your system.
07Can I see two versions side by side?
Open a workspace per direction and compare them before you commit to either.
08Do I need to know how to code?
No. Click an element and change it, or describe what you want. An IDE is an intimidating place to design and nobody should need a local environment to edit their own product.
09We're mid-migration with two design kits. Does that break it?
No, and it's a common reason teams start. Batch-deprecate what you're moving off and set which pattern to prefer.
Older, messier codebases extract less cleanly, so expect some time with us getting it right.
See it running on your own app
Start in a free sandbox on a demo app, or connect your repo and we'll handle the rest: the infrastructure, the setup, and your security review.