> ## Documentation Index
> Fetch the complete documentation index at: https://productos.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Design System Agent

> A senior visual designer that builds your design tokens, component system, and DESIGN.md, with real dark and light HTML previews.

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. Its system prompt captures the sensibility: "Restraint over flourish. Personality you can name."

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. This is why shipped ProductOS products look designed rather than generated.

## Tools

| Tool                                       | What it does                                                  |
| ------------------------------------------ | ------------------------------------------------------------- |
| `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 |

## What it reads and produces

**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.

## Where it sits in the pipeline

The Design System Agent works in Stage 4, Design, alongside the [Design Agent](/agents/design). The division of labor: the Design Agent owns user flows and screen specifications, this agent owns the visual system underneath them, and the Design Agent hands token and component work over via `ask_agent`. Downstream, the [Fullstack Builder](/agents/fullstack-builder) implements every screen on the tokens locked in DESIGN.md, so what this agent decides is what your shipped product looks like.

## Working with it

Its inputs are entirely visual and brand-side: locked brand guidelines, uploaded assets, the mood board, the vibe report, and any personality notes in the PRD. The more real material it has, the less generic the system.

<Tip>
  Review the dark and light previews before moving to Develop. They are real rendered HTML, not mockups, and they exist precisely so you can judge the system before any product code depends on it. Requesting token changes at this point means a surgical `patch_design_brief` edit; requesting them after the Fullstack Builder has implemented twenty screens on those tokens means rework.
</Tip>