Designer Mode
A dedicated UI/UX mode where Sypha acts as a senior designer and frontend engineer, enforcing strict design system rules for pixel-perfect, accessible interfaces.
Designer Mode (/designer) is a dedicated UI/UX mode where Sypha acts as a senior UI/UX designer and frontend engineer. It has access to Read, Edit, Browser, and MCP tools — the same set as Strategist Mode but with full file-editing capability.
Use it when creating layouts, building components, establishing or following a design system, improving visual hierarchy, or generating brand-consistent interfaces.
Activating Designer Mode
/designerType /designer in the chat input, or select Designer from the mode dropdown. You can also use the keyboard shortcut ⌘ + . (Mac) to cycle to the next mode.
What Makes It Different from Developer Mode
Developer Mode also handles frontend work, but Designer Mode has a much stricter design-first ruleset built into its system prompt. Rather than optimising for shipping code quickly, Designer Mode optimises for visual correctness and design system compliance.
| Behaviour | Developer Mode | Designer Mode |
|---|---|---|
| Design system enforcement | Loose — follows code conventions | Strict — DESIGN.md is the source of truth |
| Colour values | Any hex/RGB/HSL | Must map to named semantic tokens only |
| Spacing | Ad hoc | 8px grid with 4px for fine adjustments |
| Interactive states | Common states (hover, focus) | All states required (default, hover, active, focus-visible, disabled, loading, empty, error) |
| Font sizes | Developer discretion | Strict heading/body/caption scale |
| Responsive design | Common breakpoints | Mobile-first with minimum 44×44 px touch targets |
| Accessibility | Best effort | WCAG AA contrast minimum, semantic HTML, full keyboard navigation required |
| Self-review | None | Iterates on its own output before finishing |
Design Rules Enforced by Designer Mode
DESIGN.md as Source of Truth
If a DESIGN.md file exists in your project root, Designer Mode treats it as the primary authority for all visual decisions — colours, typography, spacing, and components. Create one to lock in your brand standards across all AI-generated UI.
Semantic Colour Tokens
All colours must reference named design tokens (e.g. --color-brand-primary, text-foreground) rather than arbitrary hex values. This keeps generated code consistent with your design system.
8px Spacing Grid
All padding, margin, and gap values follow an 8px base grid. 4px increments are available for fine-tuning only.
Complete Interactive States
Every interactive component implements all required states: default, hover, active, focus-visible, disabled, loading, empty, and error. No placeholder "TODO: add hover state" shortcuts.
Typography Hierarchy
Font sizes strictly follow a heading/body/caption scale defined in your design system. No ad hoc one-off font sizes.
Mobile-First Responsive Design
Layouts use explicit breakpoints and all interactive elements meet a minimum 44×44 px touch target, ensuring usability on mobile devices.
Accessibility by Default
WCAG AA contrast ratios are enforced on all text/background combinations. HTML is semantic and components support full keyboard navigation.
Self-Review Loop
Before returning its output, Designer Mode reviews its own generated UI and iterates if the result looks generic, placeholder-level, or inconsistent with the design system. You get a polished result by default.
When to Use Designer Mode
- Building new UI components from a design spec or description
- Establishing a design system for a project (creating tokens, base components)
- Refining visual hierarchy and layout consistency
- Generating landing pages, dashboards, or marketing components
- Ensuring accessibility compliance across a component library
Browsing the Community Mode Marketplace
Designer Mode ships as a built-in default. You can also browse community-contributed designer modes (e.g. specialised modes for Material Design, Tailwind, or specific component libraries) via Settings → Marketplace → Modes.
Related
- Using Modes — overview of all available modes
- Custom Modes — define your own modes with custom rules and tool access
- Custom Instructions — inject persistent guidelines into any mode