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