Skip to main content
A design system in VibeFlow is a hard contract, not a suggestion. When you attach one to a canvas, the agent treats your tokens, components, and guidelines as rules. Brand drift becomes a generator bug, not a human error.

​
What’s in one

Internally it compiles to a SKILL.md plus a folder of references, which is what the canvas agent reads on each turn.

​
Where it lives in the canvas

​
Pinning to a canvas

In the chat composer footer:
  • Palette icon opens the style preset picker (visual aesthetic).
  • Layers icon opens the design system picker (your saved systems for this organization).
Pick one. It writes to the canvas (canvas.designSystemIds, canvas.selectedStyle) and stays pinned. Every future generation in this canvas reads it. You can swap or remove the design system at any time. Existing frames don’t change. Future generations follow the new contract.

​
Using it on a single message

Sometimes you want a one-off variation without unpinning the brand. Two ways:
  • Prompt override. “For this frame only, swap primary to teal. Keep typography and spacing locked.”
  • Style preset. Add an aesthetic style on top. The agent treats the design system as the brand and the style as the mood.

​
Building a design system

You don’t build design systems on the canvas. They live in their own product at /design-systems. Three ways to make one:

From a URL

Paste any public website. The agent extracts palette, typography, spacing, components, and logo into a fresh system.

From a brief

Describe the brand in chat. The agent generates a starting system you can refine.

From your codebase

Use the MCP from your editor. The agent reads your real components and tokens. See the MCP overview.
You can also ask the canvas agent to extract a design system on the fly: “Clone yourwebsite.com as a design system and attach it to this canvas.” This runs the clone_website tool in design-system mode (2 credits), saves the new system, and auto-attaches it.

​
How the contract is enforced

When the agent generates a frame, the design system shapes the output at three places:
  1. System prompt. Every turn includes the compiled SKILL.md and a summary of components.
  2. Validation. The agent is told to use only tokens defined in the system. Frames that drift get flagged in chat.
  3. Asset resolution. Asset references (logos, hero photos) resolve to your real files via get_assets.
In practice this means: ask for “a hero with our brand color” and the agent uses the exact hex. Ask for “our button” and you get your PrimaryButton, not a guess.

​
Skills on top of a design system

A design system is the brand. Skills are the playbook. You can stack both. Skills come from two places:
  • Your account’s enabled custom skills (uploaded SKILL.md zips).
  • Skills compiled out of the design system itself.
The agent reads both on every turn. To see what’s loaded for a canvas, ask: “What skills do you have access to right now?” The agent will run get_skills and list them.

​
Best practices

A design system with a clean color and type scale will beat a system with 40 components and vague tokens. Tokens are what the agent locks hardest.
“brand.primary is #0F1413. Use for CTAs and headings on light surfaces.” The agent learns the rule, not just the value.
Your nav. Your footer. Your empty state. Your loading skeleton. The agent will compose layouts from whatever is documented.
Don’t make a “social system” and a “deck system”. Make one Acme Brand and let the agent compose for any surface from a single source of truth.

​
Next

Inline edit

Edit single elements without breaking the rest of the frame.

MCP tools

Manage design systems and frames from your editor.