Design System
Left to its own devices, an agent will invent a fresh look for every screen it builds. So before the real build begins, we settle on a visual direction and write it down. This lesson takes an existing design as inspiration, has the agent turn it into a design system, then tests it on a throwaway page before a single feature exists.
What you'll walk away with:
- Using a reference design to set the visual direction, which is far easier than describing a look from scratch
- Filling out a design.md file with the agent, so the design lives in the project rather than in your head
- Testing the system on a simple HTML and CSS page, which is much quicker than checking it inside the app
- Reviewing and refining the look before the build starts, while changing it is still cheap
Get this settled now and every screen the agent builds later starts from the same foundation.