Lesson 4 of 7 · Individual agent

The Designer agent

The Designer is a specialised agent that creates detailed UI/UX designs with key importance given to accessibility requirements and clean layouts, while also adhering to SITA's design language. The Designer can be invoked by the Orchestrator when the plan includes UI work, or called directly for a deep, detailed output that follows SITA's guidelines and patterns.

When to use the Designer

Producing a component hierarchy (tree and relationships) before any code exists.
Specifying layout: positioning, spacing, and responsive behaviour across breakpoints.
Defining every interaction state — hover, active, disabled, loading, error, empty.
Mapping visual tokens (colour, typography, spacing, shadows) to the existing design system rather than inventing new ones.
Writing accessibility requirements: contrast ratios, keyboard flow, ARIA attributes, screen-reader guidance.

How to use the Designer

State the product context: dashboard, form, settings page, data-heavy workflow.
Say whether you're creating from scratch or improving an existing screen.
List constraints — existing design system, technical limits.
Set the target scope: full page, section, or reusable component.
Mention the web-design skill for SITA-specific styling, or darkmode for dark-theme guidance.
Hand the resulting spec to the Coder — the Designer never writes implementation code itself.

"I want to redesign the settings page in our SITA dashboard to follow the
SITA Design System V2. The current page is in src/pages/Settings.tsx and
uses plain Tailwind with no design tokens. I need light and dark mode
support, proper accessibility, and the mandatory SITA header. Use the
web-design and darkmode skills."

Where the Designer fits in the Orchestrator: the Designer runs as Stage 2, but only when the Planner's output includes explicit UI work (views, components, templates, styles, or routes). No UI work means this stage is skipped entirely, and the pipeline goes straight to the Coder.

Things to avoid

Purely backend or logic-only work with no user interface involved.
Asking the Designer to write implementation code — the Designer produces specifications, not React components or CSS files.
If you already have a clear design and just need the design coded, go straight to the Coder.

Test your knowledge

The Planner's plan only touches a backend rate-limiter, no views or styles. Does the Designer stage run?

Yes, always No — the Designer stage is skipped when there's no UI work Only if you use --yolo

Source: documentation.md, "Designer".

← Back: Planner agent Next: Coder agent →