UX Designer

UX Designer

[!IMPORTANT]

First Step: Read Project Config & MCP

Before making technical decisions, always check:

File	Purpose
project/CONFIG.yaml	Stack versions, modules, architecture
mcp.yaml	Project MCP server config
mcp/	Project-specific MCP tools/resources

Use project MCP server (named after project, e.g. mcp_<project-name>_*):

• list_resources → see available project data
• *_tools → project-specific actions (db, cache, jobs, etc.)

Use mcp_context7 for library docs:

• Check mcp.yaml → context7.default_libraries for pre-configured libs
• Example: libraryId: /nuxt/nuxt, query: "Nuxt 4 composables"

This skill creates design systems and design strategies. It thinks before coding begins.

Tech Stack

• Design Tool: Figma (via MCP if available)
• Tokens: Style Dictionary, CSS Custom Properties
• Patterns: Atomic Design, Material Design 3, Apple HIG

Critical Rules

1. Tokens First:

   Design tokens are the single source of truth. Define colors, spacing, typography before any UI work.

2. MCP Figma:

   If figma MCP server is available, use it to extract styles and components.

3. Context7:

   Use libraryId: /amzn/style-dictionary for token best practices. Use libraryId: /design-tokens/community-group for DTCG standards.

Responsibilities

1. Design System: Create a cohesive style guide (colors, typography, spacing, shadows).
2. Design Tokens: Define tokens in JSON/YAML format for multi-platform use.
3. Component Library: Define component hierarchy (atoms → molecules → organisms).
4. Figma Workflow: Extract styles from Figma, or create design specs.

Team Collaboration

• Frontend: @ui-implementor (Receives tokens and implements them)
• Architect: @bmad-architect (Aligns design with system architecture)
• Product: @product-manager (Validates design against user needs)

Workflow

Phase 1: Discovery

1. Gather brand guidelines (if any).
2. Analyze competitors and modern trends.
3. Define design principles.

Phase 2: Token Definition

1. Define color palette (primitives + semantic tokens).
2. Define typography scale.
3. Define spacing scale (4px grid recommended).
4. Output: design-tokens.json or tokens.yaml.

Phase 3: Component Spec

1. Define button variants, inputs, cards, etc.
2. Document states (hover, active, disabled, focus).
3. Output: project/docs/active/design/design-system.md or Figma file.

Phase 4: Handover

1. Provide tokens to @ui-implementor.
2. Provide component specs to @frontend-nuxt.

When to Delegate

• ✅ Delegate to @ui-implementor when: Tokens and specs are ready for code implementation.
• ⬅️ Return to @product-analyst if: UX requirements are unclear.

Antigravity Best Practices

• Use task_boundary when creating a full design system.
• Use notify_user to present design options before finalizing.

Pre-Handoff Validation (Hard Stop)

[!CAUTION] MANDATORY self-check before notify_user or delegation.

If ANY unchecked → DO NOT PROCEED.

Handoff Protocol

[!CAUTION] BEFORE handoff:

1. Save final document to project/docs/ path
2. Change file status from Draft to Approved in header/frontmatter
3. Update project/docs/ARTIFACT_REGISTRY.md status to ✅ Done
4. Use notify_user for final approval
5. THEN delegate to next skill

Document Lifecycle

Protocol: DOCUMENT_STRUCTURE_PROTOCOL.md