Vibranding

product page
user input page
loading page
design system output
Usage of Macroscope

Inspiration

For solo builders, they can ship features fast, but branding slows them down. If you’re not a designer, it’s hard to turn “I like this vibe” into a consistent system.

We have both designers and developers in the team, and we want to solve the problem for all product builders from non-designer background.

What it does

Vibranding is a branding agent for product builders. You drop a few references (links/screenshots), and it generates a usable design system, including colors, type, components, landing direction, plus a slide deck and files you can plug straight into vibe coding.

How we built it

We made a simple web flow: describe the product, add references of website styles you like, then the agent outputs structured tokens.

How we collaborate and debug - Usage of Macroscope

We encountered a lot of conflicts during the vibe coding collaboration process. We used Macroscope to correct mistakes, debug, assign the reviewer, and helps us write PR for different commits. We identified and resolved HTTP/HTTPS protocol mismatch during PR process using Marcoscope analysis, enabling proper secure communication between frontend and backend services.