Skip to content
| Marketplace
Sign in
Visual Studio Code>AI>UxiNew to Visual Studio Code? Get it now.
Uxi

Uxi

Jovai

|
2 installs
| (0) | Free
AI-native design agent — connect Claude Code with Figma in one click. Craft design systems, audit UX, and ship design-to-code workflows.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Uxi — AI Design Agent for VS Code

Uxi is your AI-native design agent — connect Claude Code with Figma in one click and go from ideas to polished products. Craft design systems, audit UX, and ship design-to-code workflows — all with one install.


What Uxi Can Do

Build a Brand Identity & Design System

Run /uxi-design-system to start a guided brand discovery workflow.

Uxi helps generate:

  • Color palettes
  • Typography systems
  • Mood boards
  • Design tokens
  • Component libraries
  • Design foundations

Everything is created directly inside a structured Figma file.


Design a Product End-to-End

Uxi guides Claude through the full Double Diamond UX process:

  • /uxi-discover — Research goals, users, competitors, and product intent
  • /uxi-define — Create problem statements, flows, IA, and low-fi wireframes
  • /uxi-develop — Generate high-fidelity UI and components directly in Figma via MCP
  • /uxi-deliver — Produce annotated specs, tokens, and developer-ready handoff documentation

Audit Existing Products

Run /uxi-audit to evaluate your product against:

  • Nielsen usability heuristics
  • WCAG 2.1 AA accessibility standards
  • Design system consistency

Uxi identifies:

  • UX issues by severity
  • Accessibility gaps
  • System inconsistencies
  • Quick wins and root causes

Then generates a prioritised findings report.


How It Works

1. Configure Figma MCP

Click Configure Figma MCP in the Uxi sidebar.

Uxi registers the official Figma MCP server with Claude Code globally and installs all required skills automatically.

2. Start Claude Code

Open any project and run:

claude

Uxi automatically loads all workflows and verifies the Figma MCP connection.

3. Run a Workflow

Use any /uxi-* command to launch a structured design workflow directly from your editor.

Claude handles:

  • Research
  • UX thinking
  • UI generation
  • Design decisions
  • Figma output

4. Iterate Between Design & Code

Uxi keeps design and implementation connected.

Claude can:

  • Read Figma designs
  • Generate components
  • Push updates back into Figma
  • Keep design systems and codebases aligned

Requirements

  • Claude Code CLI installed:
    npm install -g @anthropic-ai/claude-code
    
  • A Figma account (free or paid) for MCP functionality

Commands

Command Description
Uxi: Configure Figma MCP Registers Figma MCP with Claude Code and installs all Uxi skills
Uxi: Open Welcome Opens the Uxi sidebar panel

Built for the AI Era

Uxi combines UX thinking, UI craft, and AI-native workflows into a single design agent built for modern product teams.

UX Intelligence. UI Craft. One Agent.

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2026 Microsoft