Frontend Designer 🎨

Expert UI/UX designer who creates implementation-ready design specifications for Next.js, Streamlit, React, and CLI applications. Bridges creative vision and technical implementation with pixel-perfect, developer-friendly specifications.

Perfect for: Designing production UIs, creating design systems, and generating implementation specs

Features

🎨 Multiple Frameworks - Next.js, Streamlit, React, Vue, CLI
🧩 Design Systems - shadcn/ui, Material Design, Tailwind, Custom
♿ Accessibility First - WCAG AA/AAA compliance built-in
📱 Responsive Design - Mobile-first with breakpoint specifications
🎯 Implementation Ready - Code examples in target framework
🏗️ Architecture Patterns - Kitchen Cabinet, Dashboard-First, Chat-First

Quick Start

# Next.js dashboard with shadcn/ui
/agent frontend-designer "Design a sports analytics dashboard" --framework nextjs --design-system shadcn
 
# Streamlit data app
/agent frontend-designer "Design a data exploration interface" --framework streamlit
 
# CLI tool
/agent frontend-designer "Design a terminal UI for sports stats" --framework cli

Design Approaches

Kitchen Cabinet Method

Best For: Sidebar-heavy applications, admin panels, complex tools

Metaphor: Organize UI like an efficient kitchen

🏠 Countertop (Primary Work Area)
  → Main content, primary actions, live data

🗄️ Upper Cabinets (Secondary Navigation)
  → User profile, notifications, settings

📦 Drawers (Organized Storage)
  → Sidebar groups, tool organization

🏺 Lower Cabinets (Foundation)
  → Footer, system status, help

Use Cases:

Admin dashboards
Data management tools
Multi-section applications
Team collaboration tools

Framework Support

Next.js + shadcn/ui

Best For: Modern web apps with server components

Features:

App Router patterns
Server/Client component design
Streaming with Suspense
SEO optimization
shadcn/ui components

Generated Output:

design-system.md
├── Design tokens (colors, spacing, typography)
├── Component specifications
├── Layout patterns
└── Responsive behavior

components/
├── ui/ (shadcn components)
├── features/ (business components)
└── layouts/ (page layouts)

implementation-guide.md
└── Setup, usage, and integration

Example Component Spec:

component: DashboardCard
category: molecule
props:
  title: string
  value: number | string
  trend: "up" | "down" | "neutral"
  icon: ReactNode
states:
  default: base styling
  loading: skeleton loader
  error: error state with retry
styling:
  base: "rounded-lg border bg-card p-6"
  variants:
    size:
      sm: "p-4"
      md: "p-6"
      lg: "p-8"

Usage Examples

Example 1: Sports Analytics Dashboard

Design a real-time sports analytics dashboard for league management.

Define Requirements

/agent frontend-designer "Design a sports analytics dashboard with:
 
Views:
- League overview with key metrics
- Team comparison charts
- Player performance tables
- Live game updates
- Betting odds integration
 
Features:
- Real-time data updates
- Interactive charts (filtering, zooming)
- Mobile-responsive layout
- Dark/light mode
- Export to PDF/CSV
 
Design System: shadcn/ui
Approach: Dashboard-First" --framework nextjs

Generated Design System

# Sports Analytics Dashboard Design System
 
## Design Tokens
 
### Colors
\`\`\`yaml
semantic_colors:
  primary: "#0066cc"      # Team branding
  success: "#00aa00"      # Win indicator
  danger: "#cc0000"       # Loss indicator
  warning: "#ff9900"      # Draw/pending
  neutral: "#6b7280"      # Neutral data
 
surface:
  background: "#ffffff"   # Main background
  card: "#f9fafb"        # Card background
  border: "#e5e7eb"      # Card borders
\`\`\`
 
### Typography
\`\`\`yaml
fonts:
  heading: "Inter, sans-serif"
  body: "Inter, sans-serif"
  mono: "JetBrains Mono, monospace"
 
scale:
  xs: "0.75rem"    # 12px - small labels
  sm: "0.875rem"   # 14px - body text
  base: "1rem"     # 16px - default
  lg: "1.125rem"   # 18px - section headers
  xl: "1.25rem"    # 20px - card titles
  2xl: "1.5rem"    # 24px - page titles
  3xl: "1.875rem"  # 30px - hero text
\`\`\`
 
## Component Specifications
 
### MetricCard
\`\`\`yaml
component: MetricCard
category: molecule
description: "Display key metrics with trend indicators"
 
props:
  title: string                    # Metric name
  value: number | string           # Current value
  change: number                   # Change percentage
  trend: "up" | "down" | "neutral" # Trend direction
  timeframe: string                # e.g., "vs last week"
  icon?: ReactNode                 # Optional icon
 
states:
  default:
    styling: "rounded-lg border bg-card p-6 shadow-sm"
    trend_up: "text-green-600 bg-green-50"
    trend_down: "text-red-600 bg-red-50"
 
  loading:
    styling: "animate-pulse"
    content: "Skeleton loader for all elements"
 
  error:
    styling: "border-red-300 bg-red-50"
    content: "Error icon with message"
 
accessibility:
  role: "article"
  aria_label: "{title}: {value}"
  live_region: "polite" # For real-time updates
\`\`\`
 
### LeagueTable
\`\`\`yaml
component: LeagueTable
category: organism
 
props:
  data: Array<TeamStanding>
  sortBy?: string
  sortOrder?: "asc" | "desc"
  highlightTeam?: string
  interactive?: boolean
 
features:
  - Column sorting
  - Row highlighting
  - Mobile responsive (horizontal scroll)
  - Sticky header
  - Pagination
 
styling:
  base: "w-full border-collapse"
  header: "bg-muted sticky top-0"
  row: "border-b hover:bg-muted/50 transition-colors"
  cell: "px-4 py-3 text-sm"
\`\`\`

Implementation Examples

// Example: MetricCard implementation
"use client"
 
import { TrendingUp, TrendingDown, Minus } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
interface MetricCardProps {
  title: string
  value: number | string
  change: number
  trend: "up" | "down" | "neutral"
  timeframe: string
  icon?: React.ReactNode
}
 
export function MetricCard({
  title,
  value,
  change,
  trend,
  timeframe,
  icon
}: MetricCardProps) {
  const TrendIcon = trend === "up" ? TrendingUp
                  : trend === "down" ? TrendingDown
                  : Minus
 
  const trendColor = trend === "up" ? "text-green-600"
                   : trend === "down" ? "text-red-600"
                   : "text-gray-600"
 
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        {icon}
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        <div className="flex items-center mt-1 text-xs text-muted-foreground">
          <TrendIcon className={`h-4 w-4 mr-1 ${trendColor}`} />
          <span className={trendColor}>
            {change > 0 ? "+" : ""}{change}%
          </span>
          <span className="ml-1">{timeframe}</span>
        </div>
      </CardContent>
    </Card>
  )
}

Layout Specification

// Dashboard layout structure
export default function DashboardPage() {
  return (
    <div className="flex min-h-screen">
      {/* Sidebar (Kitchen Cabinet - Drawers) */}
      <aside className="w-64 border-r bg-muted/40 p-6">
        <Navigation />
      </aside>
 
      {/* Main content (Countertop) */}
      <main className="flex-1 p-6">
        {/* Header with key metrics */}
        <div className="grid gap-4 md:grid-cols-4 mb-6">
          <MetricCard
            title="Total Games"
            value="156"
            change={12.5}
            trend="up"
            timeframe="vs last month"
          />
          {/* More metrics... */}
        </div>
 
        {/* Charts */}
        <div className="grid gap-4 md:grid-cols-2 mb-6">
          <Card>
            <CardHeader>
              <CardTitle>Performance Trends</CardTitle>
            </CardHeader>
            <CardContent>
              <LineChart data={performanceData} />
            </CardContent>
          </Card>
          {/* More charts... */}
        </div>
 
        {/* Data table */}
        <Card>
          <CardHeader>
            <CardTitle>League Standings</CardTitle>
          </CardHeader>
          <CardContent>
            <LeagueTable data={standings} />
          </CardContent>
        </Card>
      </main>
    </div>
  )
}

Best Practices

1. Accessibility First

All designs include:

✅ WCAG AA compliance minimum
✅ Keyboard navigation
✅ Screen reader support
✅ Focus management
✅ Color contrast validation

2. Responsive Design

breakpoints:
  mobile: "< 768px"
    - Stack layouts vertically
    - Collapse sidebars
    - Touch-optimized
    - Simplified navigation
 
  tablet: "768px - 1024px"
    - Flexible grids
    - Collapsible sidebars
    - Balanced density
 
  desktop: "> 1024px"
    - Full layouts
    - Persistent sidebars
    - Rich interactions
    - Keyboard shortcuts

3. Performance

✅ Code splitting by route
✅ Lazy loading images
✅ Virtual scrolling for long lists
✅ Optimized animations
✅ Bundle size monitoring

4. Design Tokens

Extract reusable tokens:

:root {
  /* Colors */
  --color-primary: 220 100% 50%;
  --color-success: 120 100% 40%;
 
  /* Spacing (4px base) */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-4: 1rem;     /* 16px */
 
  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
}

Configuration Options

# Framework selection
--framework nextjs      # Next.js App Router
--framework streamlit   # Streamlit data apps
--framework react       # Standalone React
--framework vue         # Vue 3
--framework cli         # Terminal UI
 
# Design system
--design-system shadcn     # shadcn/ui (Next.js)
--design-system material   # Material Design
--design-system tailwind   # Custom Tailwind
--design-system custom     # Fully custom
 
# Design approach
--approach kitchen-cabinet  # Sidebar-heavy
--approach dashboard-first  # Analytics focused
--approach chat-first       # Conversational
--approach canvas-first     # Visual editor
 
# Accessibility level
--wcag-level AA    # WCAG 2.1 AA compliance
--wcag-level AAA   # WCAG 2.1 AAA compliance

Output Artifacts

1. design-system.md

Complete design system documentation:

Design tokens
Component specifications
Layout patterns
Responsive behavior

2. components-spec.yaml

Machine-readable specs:

components:
  - name: MetricCard
    category: molecule
    props: {...}
    states: {...}
    accessibility: {...}

3. implementation-guide.md

Developer handoff:

Setup instructions
Usage examples
Integration patterns
Testing strategies

4. accessibility-checklist.md

WCAG compliance:

Keyboard navigation tests
Screen reader tests
Color contrast validation
Focus management

Next Steps

🔧 Backend Builder - Build API for your UI
🧠 AI Orchestrator - Add AI workflows
🔧 Creating Custom Agents - Build specialized designers

Resources

Backend Builder Agent Framework Generalization