UI Designer agent

The UI Designer agent plans user-interface work before any code is written. It produces a concrete UI plan: the layout, the components, the states each one can be in, accessibility, and how the new piece fits the design the project already has.

Where it runs

UI Implementation is a design-led workflow. The UI Designer goes first; then the Builder implements, the Reviewer reviews the code, and the Tester plans behaviour tests.

Inputs

• The session task, for example "add an empty state to the projects list".
• A read-only snapshot of relevant files from the project's repository: existing components, styles and pages. This is how it matches the current design rather than inventing a new one.
• Tools from connected MCP servers, if your workspace policy allows them.

Outputs

A written UI plan. It covers:

• Layout and the components to use or add.
• States: loading, empty, error, success and any permission-dependent views.
• Accessibility: labels, focus order, keyboard use and contrast.
• Where the work fits in the existing pages and styles.

Every later step reads the plan, and so does the code pass that writes the files. The plan is also synced to the workspace plan board, so its items can be tracked after the session ends.

Example run

Illustrative example, not a recorded session. Matt asks for a filter bar on the deployments page. The UI Designer reads the page and the shared form components. It plans a single row with an environment select, a status select and a text search, reusing the existing select component. It specifies that filters live in the URL so a filtered view can be shared, that the empty result shows "No deployments match" with a clear-filters button, and that every control has a visible label. The Builder describes the changes from that plan and the code pass writes them.

Limits

• It works from code, not from screenshots. It cannot see how the page currently renders.
• It does not draw. There are no mockups or design files.
• Accessibility in its plan is a plan. For a check of the result, review the diff and run your own accessibility tests.
• On the Auto tier its step goes to the Economy tier first; pick a higher tier for the session if you want more careful plans. See models.