Scan all vibe coding screen and save them into Figma in an editable format!
I've been doing a lot of vibe coding recently. Most UI changes end up being described in text, but as a designer, I often find myself thinking: it would be much faster if I could just move this 8px, resize that, or see all the screens together and fix them myself.
I think this is actually one of the advantages designers still have in the AI era: we can look at the whole product while also obsessing over tiny visual details. But when everything is controlled through prompts, a lot of the visual tools we're good at using suddenly disappear.
So I vibe Crank.
You drag in a project folder or a packaged .app, Crank scans the app, finds the screens, and lets you import them into Figma as editable layers.
It currently supports React, Electron and HTML.
I'm also working on SwiftUI support. It's still experimental, but it's already working on most of the screens I've tested.
The app itself is pretty messy right now and there are definitely bugs, but the core workflow works.
I'd love some people to try it, break it, and tell me what doesn't work.
GitHub: https://github.com/irrwood/Crank
Fully open source now