Using designtoken.md with Gemini CLI

Q: Does Gemini CLI read designtoken.md automatically?

Yes. Gemini CLI reads files in your project context. Place designtoken.md in your project root alongside your code and Gemini CLI will discover it when generating UI.

1 Generate your token file

Generate your token file

Head to the designtoken.md generator and configure your design system:

Pick your brand colors and let the generator build full color scales
Configure typography: font families, sizes, and weights
Set spacing and border-radius values
Switch to the designtoken.md tab in the output panel
Copy the output or download the file

Open the generator →

2 Place it in your project

Place it in your project root

Drop the file at the root of your project so Gemini CLI picks it up as context:

your-project/
├── designtoken.md    ← place it here
├── src/
├── package.json
└── ...

Gemini CLI reads files in your project context. Place designtoken.md in your project root alongside your code and Gemini CLI will discover it when generating UI.

3 Start building with tokens

Start building with tokens

Once designtoken.md is in your project root, Gemini CLI will see it as part of your project context. You can reference it explicitly in your prompts for stronger results:

"Build a dashboard layout using the tokens from designtoken.md for all styling."

"Create a form component. Use the color, spacing, and radius tokens from designtoken.md."

Gemini CLI will read the full file and apply your color scales, typography stack, spacing, radius, elevation, and component tokens consistently across every file it generates.

Before & after

See the difference tokens make in what your agent outputs:

Without tokens (generic)

<button style="
  background: blue;
  color: white;
  padding: 10px 20px;
">
  Click me
</button>

With designtoken.md

<button style="
  background: var(--color-primary-500);
  color: #fff;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
">
  Click me
</button>

With tokens, every component Gemini CLI generates uses your actual design values instead of arbitrary defaults.

Gemini CLI Tip

Gemini CLI reads files in your project context. Place designtoken.md in your project root alongside your code. You can also reference it in a GEMINI.md configuration file for persistent guidance across sessions.

Best practices

Keep your designtoken.md at the project root where Gemini CLI can find it
Regenerate when your design direction changes
Reference the token file in your GEMINI.md for persistent design guidance
The visual reference section helps the agent understand the intended aesthetic
Commit the file to version control so all team members get the same tokens

Beyond static tokens

For runtime token resolution at production scale, explore Designless Studio. It reads the same token vocabulary and makes it available via API, so your design system updates across your app without regenerating files.

Reusable skills

If you find yourself generating the same tokens across multiple projects, turn your tokens into a reusable design skill on skill.design so your agent installs your design preferences as a package.

Frequently asked questions

Does Gemini CLI read designtoken.md automatically?

Yes. Gemini CLI reads files in your project context. Place designtoken.md in your project root alongside your code and Gemini CLI will discover it when generating UI.

Do I need to reference it in every prompt?

No. Gemini CLI picks up project files as context automatically. However, mentioning "use the tokens from designtoken.md" in your prompt helps Gemini prioritize the token file when making styling decisions.

Can I use designtoken.md alongside a GEMINI.md file?

Yes. You can reference designtoken.md in your GEMINI.md configuration file for persistent guidance. For example, add a line like "Always use the tokens defined in designtoken.md for styling" so Gemini CLI applies your design tokens without needing a reminder in each prompt.

Generate your designtoken.md →