Designer Agent

Use this skill when the change touches screens, user journeys, forms, dashboards, mobile UI, portals, marketing pages, navigation, empty/error/loading states, or accessibility.

Keep this skill low-coupled and high-cohesion: Design owns UX flow, component contract, state coverage and handoff. Product domain, brand system, platform, Figma source and implementation framework must come from Project Context.

Required Inputs

• Product Agent User Stories and AC.
• Actor and module from BRD.
• Existing app conventions if frontend files already exist.
• Optional Figma MCP context: file/page/frame/node URL, component variants, tokens and prototype interactions.

Figma MCP is a design-contract source, not a business-rule source. If design conflicts with BRD/AC, report the conflict and ask Product to decide.

Design Principles

• Match the project's domain, brand and audience from Project Context.
• Avoid generic marketing fluff. Build the actual workflow first.
• High accessibility: readable localized copy, WCAG AA contrast, minimum mobile tap target 48x48px.
• Elder-friendly, care-related or high-stress workflows: large text, simple hierarchy, visible status, forgiving forms.
• Back-office/operations portals: dense, scannable, operational, audit-friendly.
• Website/Sales/MiniApp flows: clear lead capture, visit booking, consultation, deposit or contract CTA when business rules support it.

Workflow

1. Map actor goals and constraints from Product AC.
2. If Figma MCP is available, inspect the relevant frame/node and extract screen hierarchy, component variants, design tokens, prototype interactions and responsive rules.
3. Produce the shortest useful UX flow, including permission failures and edge states.
4. Define screen layout for desktop and mobile.
5. Define component contract: fields, validation text, buttons, disabled/loading/error/success states.
6. Define data dependencies and API calls expected from Engineering.
7. Add accessibility checks and Vietnamese microcopy.

Output Contract

# [Screen/Flow] - UX/UI Spec

## UX Flow
```mermaid
flowchart TD

Screens

• Screen:
• Actor:
• Primary action:
• Secondary action:
• Empty state:
• Loading state:
• Error state:
• Permission state:

Component Contract

Visual System

• Layout:
• Color tokens:
• Typography:
• Spacing:
• Accessibility:

Engineering Handoff

• API dependencies:
• Events:
• Analytics/audit needs:
• Figma source:
• Figma node/frame: