🎨 UI/UX Engineer Agent

A powerful AI-powered UI/UX Engineer agent built with LangChain, LangGraph, and Groq's blazing-fast LLM inference (Llama 3.3 70B). This agent operates as a senior-level UI/UX engineer, capable of design analysis, component generation, accessibility auditing, design system creation, and expert UX review.

⚡ Powered by Groq (Free Tier)

Groq's LPU chips deliver 250+ tokens/second — making multi-step agent workflows feel nearly instant. The free tier includes access to Llama 3.3 70B with generous rate limits.

🏗️ Architecture

Built as a LangGraph directed graph with 7 specialized nodes:

┌─────────────────┐
│  Task Analyzer   │  ← Understands & decomposes the request
└────────┬─────────┘
         │
  ┌──────┴──────┐     ← Conditional routing based on mode
  ▼      ▼      ▼
┌──────┐┌──────┐┌──────┐┌──────┐┌──────┐
│Design││Compo-││A11y  ││Design││ UX   │
│Analy-││nent  ││Audit ││System││Review│
│sis   ││Gen   ││      ││      ││      │
└──┬───┘└──┬───┘└──┬───┘└──┬───┘└──┬───┘
   └───────┴───────┴───────┴───────┘
                   │
            ┌──────┴──────┐
            │ Synthesizer │  ← Combines all outputs
            └─────────────┘

📦 Installation

# Install globally
npm install -g ui-ux-engineer-agent

# Or clone and install locally
cd ui_ux_engineer_agent
npm install
npm link

🔧 Setup

# Interactive setup (stores API key in .env)
ui-ux-engineer setup

Get your free Groq API key at: https://console.groq.com/keys

🚀 Usage

# Full analysis (all nodes)
ui-ux-engineer "Design a modern dashboard with data visualization cards"

# Generate components only
ui-ux-engineer "Create a responsive navigation bar with dropdown menus" --mode generate

# Accessibility audit
ui-ux-engineer "Audit this login form for WCAG 2.2 compliance" --mode audit

# Design system creation
ui-ux-engineer "Create a design system for a fintech application" --mode system

# UX review
ui-ux-engineer "Review the checkout flow for an e-commerce app" --mode review

# Design analysis only
ui-ux-engineer "Analyze the layout for a social media feed" --mode analyze

Options

| Flag | Description | Default | |------|-------------|---------| | --mode | analyze \| generate \| audit \| system \| review \| full | full | | --framework | react \| vue \| svelte \| html | react | | --style | tailwind \| css \| scss \| styled-components | tailwind | | --output <file> | Save output to a file | — | | --model <model> | Groq model to use | llama-3.3-70b-versatile | | --verbose | Show detailed agent reasoning | false |

🧠 Agent Capabilities

1. Design Analysis

• Visual hierarchy evaluation
• Layout strategy (grid, spacing, breakpoints)
• Typography and color recommendations
• Interaction pattern design
• Responsive design strategy
• Edge case handling (empty, error, loading states)

2. Component Generation

• Production-ready code for React, Vue, Svelte, or HTML
• Full accessibility (ARIA, keyboard nav, focus management)
• Responsive mobile-first design
• All interactive states handled
• CSS custom properties for theming
• Comprehensive code comments

3. Accessibility Audit

• WCAG 2.2 AA/AAA compliance check
• Severity-rated findings with fix code
• Screen reader optimization
• Keyboard navigation flow
• Accessibility score (0-100)

4. Design System Architecture

• Complete design token set (colors, typography, spacing, shadows)
• Light/dark theme support
• Component API specifications
• Layout system and typography scale
• Usage guidelines and documentation

5. UX Review

• Nielsen's 10 Usability Heuristics evaluation
• Cognitive load analysis
• Fitts's Law, Hick's Law, Miller's Law assessment
• Prioritized action plan by impact/effort ratio

🔧 Available Models

| Model | Speed | Quality | Best For | |-------|-------|---------|----------| | llama-3.3-70b-versatile | Fast | Highest | Default — best overall | | llama-3.3-70b-specdec | Fastest | High | Quick iterations | | llama-3.1-8b-instant | Instant | Good | Simple tasks | | mixtral-8x7b-32768 | Fast | High | Long context tasks |

📁 Project Structure

ui_ux_engineer_agent/
├── bin/
│   └── cli.js          # CLI entry point
├── src/
│   ├── index.js        # Main agent runner
│   ├── graph.js        # LangGraph definition
│   ├── state.js        # Agent state (Annotation)
│   ├── nodes.js        # Specialist graph nodes
│   ├── prompts.js      # Expert prompt templates
│   ├── llm.js          # Groq LLM configuration
│   └── setup.js        # Interactive setup
├── package.json
└── README.md

🤝 Programmatic Usage

const { runAgent } = require("ui-ux-engineer-agent");

const result = await runAgent("Design a card component for a recipe app", {
  mode: "generate",
  framework: "react",
  style: "tailwind",
  model: "llama-3.3-70b-versatile",
  onProgress: (step, message) => console.log(`[${step}] ${message}`),
});

console.log(result.output);
console.log(`Steps: ${result.stepsCompleted}`);
console.log(`Nodes: ${result.nodesVisited.join(" → ")}`);

📄 License

MIT