Design systems

Documentation Index

Fetch the complete documentation index at: https://canvas-docs.vibeflow.ai/llms.txt

Use this file to discover all available pages before exploring further.

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: 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

​

Next