UI Designer Skill

Description

This skill bridges design and development. Given a UI reference image (screenshot, mockup, or design file export), it extracts the visual design system — colors, typography, spacing, component patterns — and generates production-ready React components that match the reference.

Instructions

When the user provides a UI reference image, follow this workflow:

Step 1: Visual Analysis

Read the image and extract the design system:

Copy
## Design System Extracted

### Colors
| Token | Hex | Usage |
|-------|-----|-------|
| primary | #4F46E5 | Buttons, links, active states |
| primary-hover | #4338CA | Button hover |
| background | #FFFFFF | Page background |
| surface | #F9FAFB | Card backgrounds |
| text-primary | #111827 | Headings, body text |
| text-secondary | #6B7280 | Captions, labels |
| border | #E5E7EB | Card borders, dividers |
| success | #10B981 | Success states |
| error | #EF4444 | Error states |

### Typography
| Element | Font | Size | Weight | Line Height |
|---------|------|------|--------|-------------|
| H1 | Inter | 36px | 700 | 1.2 |
| H2 | Inter | 24px | 600 | 1.3 |
| Body | Inter | 16px | 400 | 1.5 |
| Caption | Inter | 14px | 400 | 1.4 |
| Button | Inter | 14px | 500 | 1.0 |

### Spacing Scale
4px — 8px — 12px — 16px — 24px — 32px — 48px — 64px

### Border Radius
Small: 6px | Medium: 8px | Large: 12px | Full: 9999px

Step 2: Component Identification

Break the UI into atomic components:

Copy
## Components Identified
1. **Button** — Primary, secondary, ghost variants
2. **Card** — With header, body, footer sections
3. **Input** — Text, with label, error state
4. **Badge** — Status indicator with dot
5. **Avatar** — Image or initials fallback
6. **Navigation** — Top bar with logo, links, avatar

Step 3: Implementation

Generate components with Tailwind CSS (or CSS modules based on project):

Copy
// components/ui/Button.tsx
import { forwardRef } from 'react';
import { cn } from '@/lib/utils';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'primary', size = 'md', children, ...props }, ref) => {
    return (
      <button
        ref={ref}
        className={cn(
          'inline-flex items-center justify-center rounded-lg font-medium transition-colors',
          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
          'disabled:pointer-events-none disabled:opacity-50',
          {
            'bg-indigo-600 text-white hover:bg-indigo-700': variant === 'primary',
            'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50': variant === 'secondary',
            'text-gray-700 hover:bg-gray-100': variant === 'ghost',
            'h-8 px-3 text-sm': size === 'sm',
            'h-10 px-4 text-sm': size === 'md',
            'h-12 px-6 text-base': size === 'lg',
          },
          className
        )}
        {...props}
      >
        {children}
      </button>
    );
  }
);

Rules

• Always read the reference image before generating any code
• Extract the ACTUAL colors from the image — do not guess or use defaults
• Match spacing and proportions as closely as possible
• Use the project's existing CSS framework (Tailwind, CSS modules, styled-components)
• Generate TypeScript components with proper prop types
• Include all interactive states: hover, focus, active, disabled
• Add aria-* attributes for accessibility
• If the reference is low quality, ask the user to clarify ambiguous details
• Component naming should follow the project's existing conventions
• Include responsive breakpoints if the reference shows mobile/desktop variants

Examples

User: [Uploads screenshot of a dashboard] Action: Extract design system, identify components, implement card, chart container, stat widgets, and navigation

User: Make this login form look like [reference image] Action: Analyze image, extract form styling, implement Login component matching the reference

User: Extract the design tokens from this Figma export Action: Analyze image, output design token JSON file and Tailwind config extension