---
title: "Write design guidelines for the agent"
description: "Tell the canvas agent your spacing, type and color rules once, with your real design tokens, so every session follows them."
url: https://help.modeinspect.com/en/articles/18-write-design-guidelines-for-the-agent
collection: "Set up your codebase"
updated: 2026-11-03
language: en
---

# Write design guidelines for the agent

Tell the canvas agent your spacing, type and color rules once, with your real design tokens, so every session follows them.

Design guidelines are rules you write once for a codebase and the canvas agent reads at the start of every session on its canvases. Write them when the agent keeps picking the wrong spacing, radius or color and you want to say the rule once instead of in every prompt.

The agent already knows your design tokens. The guidelines add what the tokens cannot say: which one to use where, and what never to do.

**Before you start**

-   A connected codebase whose setup finished, so the token picker knows your design system.
    

## Steps

1.  Open the codebase from **CODEBASES** in the sidebar and click the **…** button next to its name.
    
    ![The codebase page with the menu next to the codebase name open: Rename codebase, Edit secrets, Edit start scripts, Edit Design Guidelines, Edit memories and Delete Codebase](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/geN0ahpXH6mkE5dADelgbGqfj0NDmTqQBxxAPNWZ0OG1ywZhkd2xbzla9538LI6m5o1WyzFBjDe.png)
2.  Click **Edit Design Guidelines**. The editor on the left is empty the first time and shows a suggested outline: Overview, Colors, Typography, Layout and shape, Components, Do's and don'ts. The panel on the right lists your tokens.
    
3.  Write the rules as short sentences. Where a rule names a token, insert it instead of typing its name: type `@` and the token's name, then press `Enter`, or search it in **Search tokens…** and click it. The token appears as a chip with its value.
    
    ![The Edit Design Guidelines dialog with a rule that uses the primary color token as a chip, and the token picker filtered to primary](https://staticfiles.gleap.io/p6a1872808f187689a3937fa3/OMK4jmxAJRc3FjvUQocNsEfYgfFo9PU2QxqD8SqLdsBEfxsqJ1pgNitEmac10Q4hyydrAoHONef.png)
4.  Click **Save**. The toast **Design guidelines saved** confirms it.
    

The next new agent session on a canvas of this codebase follows the guidelines. A chat that is already open keeps the version it started with.

## What to put in

-   One rule per line, with the token chip in it: "Buttons use primary for the main action only."
    
-   The spacing scale and the type sizes that are allowed, and the ones that are not.
    
-   Do and don't pairs for the mistakes you see most: "Don't add a second accent color."
    

Tokens come in two groups. **Custom** tokens are the ones your codebase defines. **Default** tokens are the stock Tailwind values it did not change, listed so you can refer to them too.

Keep secrets, URLs and long style guides out. The agent reads the whole text in every session, so a long document costs time and buries the rules that matter. Facts about your project that the agent should keep across sessions belong in memories, not here, see [What agents remember about your codebase](https://help.modeinspect.com/en/articles/19-agent-memories.md).

## If it does not work

-   **A chip landed in the wrong place**: delete it with `Backspace`, put the cursor where the token belongs, and insert it again.
    
-   **Nothing changed in an open chat**: guidelines load when a session starts. Start a new agent and ask again.
    

## Related

-   [What agents remember about your codebase](https://help.modeinspect.com/en/articles/19-agent-memories.md)
    
-   [Edit a codebase's secrets](https://help.modeinspect.com/en/articles/12-edit-secrets.md)
    
-   [Add start scripts to a codebase](https://help.modeinspect.com/en/articles/13-edit-start-scripts.md)

## Related

- [Connect a GitHub repository](https://help.modeinspect.com/en/articles/11-connect-a-github-repository.md)
- [Upload a codebase as a zip](https://help.modeinspect.com/en/articles/16-upload-a-codebase-as-a-zip.md)
- [Start from a blank codebase](https://help.modeinspect.com/en/articles/15-start-from-a-blank-codebase.md)
- [What happens during setup](https://help.modeinspect.com/en/articles/17-what-happens-during-setup.md)
- [Answer Auto-setup's questions](https://help.modeinspect.com/en/articles/10-answer-auto-setup-s-questions.md)