Best for
- Product designers who need one source of truth before the next five pages get designed.
- Founders whose apps drifted apart and need every one of them on the same look.
Connectors
Before you start
Gather everything that defines your brand, wherever it lives today: brand files, a design you already like, your website, or a Figma file. Connect Drive if your logo, colors, or type are stored there. Have a Figma URL, a site URL, or an existingDESIGN.md ready if you have
one.
Prompt the agent
What to expect
Agent turns the source you gave it into a living style guide: your colors with a role for each one, a type scale, the tokens the rest of the system references, two or three example components, and the brand assets you provided. Review it, then select Save design system to keep it in your workspace. From then on, new work generates on brand from the first frame. To bring an app you already built under the system, select the target and apply the system.Make it work for you
Troubleshooting
The system doesn't look like your brand
The system doesn't look like your brand
Point at a source instead of describing it. A Drive brand folder, a Figma
URL, a live site, or a
DESIGN.md all work as input.Applying it is slower than you expected
Applying it is slower than you expected
Applying a system to existing work re-generates the styling layer rather
than swapping a stylesheet. The time and credits warning before it starts is
normal.
New edits drift back to the old styling
New edits drift back to the old styling
Continued edits should keep using the system. When you spot drift, say so in
the chat and name the screen.
You can't reuse the system in another project
You can't reuse the system in another project
Save it first. An unsaved style guide stays in the project where it was
generated.
Related
Design a landing page
Put the saved system to work on a waitlist or launch page.
Redesign your existing website
Extract the system from the site you already have.