# UI Design

> Invoke when the user asks about changing the look of the UI — colors, theme, layout, fonts, component styles, or page composition. Spawns or guides a ui-designer agent. Use when: "change colors", "redesign", "make it dark", "update the theme", "design", "style the page", "fix the layout".

- Skill: `webiny/ui-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add webiny/ui-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/webiny/ui-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: webiny (https://skillmd.com/u/webiny)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/webiny/ui-design

---


# UI Design — How to Change the Visual Layer

This project's UI is built for design changes. React is a dumb display layer — all business logic
lives in TypeScript classes (presenters, use cases, repositories). Designers can freely change
any visual file without breaking business logic.

## Quick Reference

| Want to change... | Edit this file |
|---|---|
| Colors (entire app) | `src/ui/theme/tokens.ts` → `colors` |
| Font / sizes | `src/ui/theme/tokens.ts` → `typography` |
| Spacing / radius | `src/ui/theme/tokens.ts` → `spacing` / `radii` |
| Shadows | `src/ui/theme/tokens.ts` → `shadows` |
| Header / nav colors | `src/ui/theme/tokens.ts` → `defaultShell` |
| Layout dimensions | `src/ui/theme/tokens.ts` → `layout` |
| Component defaults | `src/ui/theme/theme.ts` → `DEFAULT_COMPONENTS` |
| Button/Card/Badge look | `src/ui/components/wrappers/{Component}.tsx` |
| Navigation structure | `src/ui/AppShell.tsx` |
| Page layout | `src/ui/presentation/{Domain}/{Page}/components/*.tsx` |

## For Agents

When spawning a design agent, use `agentType: "ui-designer"`. The agent has built-in instructions
for what to change and what not to touch.

```
Agent({ subagent_type: "ui-designer", prompt: "Change the primary color to teal..." })
```

## Architecture

```
tokens.ts (source of truth)
  ↓
theme.ts (builds component theme)
  ↓
wrappers/*.tsx (design system — Button, Card, etc.)
  ↓
presentation/*/components/*.tsx (pages — just renders vm data)
```