ONBOARDING
THE PROBLEM
Network ingestion was buried in settings. The core of our product is aggregating networks and surfacing the connections already available to you — but users had to dig through settings and edit profile to find it.
We needed onboarding front and center. Get users to import their networks, then immediately run a search. That's the magic moment.
APPROACH
I experimented with Claude Code as my design-first approach. We already have a design system in code — why not prototype directly in it? So I vibecoded through the entire flow.
The video below is a working prototype, not a Figma mock. This gives a much richer review — it's easier to feel out the problem and move faster. I'm passing this prototype directly to my front-end engineer to build from.
ON VIBECODING DESIGN
This would have taken twice as long in Figma. I built both the Network module and the Command Palette in the time it would've taken to mock just one. Better result, half the time. I think this is where design is headed.
MY ROLE
STATUS
THE DESIGN
Prototype walkthrough — built with Claude Code, not Figma
States and flow documented from the Claude Code prototype
New user — first thing they see when landing in the app
Networks loaded — connections imported and visible
Hover state — showing details for a single network
Command palette — Linear-inspired quick search, soon with AI