Pigment
Connect an agent

Guides / Existing project

Apply a system to an existing project

Your agent restyles what you already have — screen by screen — without touching routes, data flow or business logic. Expect a plan before any file changes.

Before you start

  • Your working tree is clean, so every change can be reviewed and reverted.
  • The project builds and its tests pass today.
  • Your agent is connected over MCP, or you have the spec URL from the system page.

Steps

  1. 01AuditThe agent maps your styling approach, shared components, routes and tests, and lists what the change would touch.
  2. 02Plan, then wait for approvalYou get the affected areas, what will be preserved, and the order of work. Nothing changes until you approve.
  3. 03Bring in the tokensTokens are mapped onto your existing variables and theme, then the first screen is restyled as a sample — and the agent stops again for review.
  4. 04Restyle screen by screenOne commit per screen, so any step can be reverted on its own. Layouts adapt to your information structure — they are never forced to match a reference image.
  5. 05Verify and reportBuild, tests and a visual pass. The report lists changed files, risks and anything left unfinished.

Two approval points

The agent pauses after the plan (step 02) and after the first restyled screen (step 03). After that it works screen by screen without stopping.

The prompt

Apply design system <system> to this project.
Preserve features, routes, business logic, API contracts, tests and accessibility.
Audit styles and components first, then propose a migration plan and wait for my approval.
Restyle one screen as a sample and wait again.
Report build results, visual checks and anything left unimplemented.

Copy it ready-made from any system page.

What lands in your repo

design-system/
├── tokens.css        CSS variables, light and dark
├── tokens.json       machine-readable source
├── components.md     conventions your agent follows
└── VERSION           the system and the date of this copy
AGENTS.md             one line pointing at design-system/
CLAUDE.md             same pointer, for Claude Code

That pointer is what keeps future screens on-system: every new session reads it before building UI.

← New projectOngoing development →