---
title: "Design System Agent: Tokens and Components | ProductOS"
description: "The ProductOS Design System Agent builds design tokens, components, and DESIGN.md briefs benchmarked against Linear, Stripe, and Vercel, with real dark and light previews."
url: https://productos.dev/agents/design-system-agent
---

Stage 4 · Design

# Design System Agent

A senior visual designer for tokens, components, and previews

[All agents](https://productos.dev/agents)

## What does the Design System Agent do?

> “Restraint over flourish. Personality you can name.”From the agent's actual system prompt

The Design System Agent is a senior visual designer that crafts cohesive, production-ready design systems benchmarked against Linear, Vercel, Stripe, Notion, and Apple's Human Interface Guidelines. From your locked brand it builds the canonical design tokens, the component system, and a DESIGN.md brief.

It renders real dark and light HTML previews of the system before any product code exists, and its output is the token source every downstream build agent works from, which is why shipped ProductOS products look designed rather than generated.

## What tools does the Design System Agent use?

- `write_design_preview`
Renders dark and light HTML previews of the design system
- `write_design_brief`
Writes DESIGN.md, the canonical token and component brief
- `grep_design_brief / patch_design_brief`
Searches and surgically edits the brief as the system evolves

Reads
- Locked brand guidelines and uploaded assets
- The mood board and vibe report
- PRD personality notes

Produces
- DESIGN.md and a compact design brief
- Dark and light preview pages
- The token source for every build agent

In the pipeline

[Before: Design Agent](https://productos.dev/agents/design-agent) [After: Fullstack Builder](https://productos.dev/agents/develop-agent)

## Put the Design System Agent to work.

Every agent works from the same shared context. Describe your idea once and the whole team builds on it.

[Start on Free](https://beta.productos.dev/sign-up?utm%5Fsource=productos.dev/agents/design-system-agent) [Meet the whole team](https://productos.dev/agents)