Workflow-003: Visual Development (Screenshot-driven)

Document Control

Workflow ID: 003
Version: 1.0
Status: Active
Complexity: Low-Medium
Duration: 1-3 hours
Team Size: 1-2 developers

Overview

Visual Development with Claude leverages screenshot analysis to create pixel-perfect implementations of designs, mockups, or existing interfaces. This workflow is ideal for frontend development, UI components, and design-to-code conversion.

┌─────────────────────────────────────────────────────────────────────┐
│                    VISUAL DEVELOPMENT FLOW                          │
├─────────────────────────────────────────────────────────────────────┤
│                                                                      │
│   [1] ANALYZE                [2] STRUCTURE                          │
│   ┌──────────────┐           ┌──────────────┐                      │
│   │ Screenshot   │           │ HTML/JSX     │                      │
│   │ Analysis     │ ────────► │ Structure    │                      │
│   │ UI Breakdown │           │ Components   │                      │
│   └──────────────┘           └──────────────┘                      │
│          │                           │                               │
│          └─────────┬─────────────────┘                              │
│                    ▼                                                 │
│   [3] STYLE                  [4] INTERACT                           │
│   ┌──────────────┐           ┌──────────────┐                      │
│   │ CSS/Styles   │           │ Behavior     │                      │
│   │ Layout       │ ────────► │ Events       │                      │
│   │ Responsive   │           │ State Mgmt   │                      │
│   └──────────────┘           └──────────────┘                      │
│          │                           │                               │
│          └───────────────────────────┴─── [5] VERIFY               │
│                                                                      │
└─────────────────────────────────────────────────────────────────────┘

Prerequisites

Required SOPs

Environment Setup

Frontend framework configured (React, Vue, Angular, etc.)
CSS framework or styling solution
Development server running
Screenshot tools available
Browser dev tools accessible

Phase 1: ANALYZE - Screenshot Analysis

Objective

Understand the visual design through detailed screenshot analysis.

Steps

1.1 Upload and Initial Analysis

bash

# Upload screenshot to Claude
claude-code "Analyze this screenshot and describe the UI components"

# Get detailed breakdown
claude-code "Break down this interface into individual components and sections"

# Identify design patterns
claude-code "What design patterns and UI elements do you see?"

1.2 Layout Analysis

bash

# Understand the layout structure
claude-code "Describe the layout grid and spacing of this design"

# Identify responsive considerations
claude-code "How should this layout adapt to different screen sizes?"

# Analyze visual hierarchy
claude-code "What's the visual hierarchy and information architecture?"

1.3 Component Identification

bash

# List all UI components
claude-code "Create a comprehensive list of all UI components in this design"

# Example output:
"""
UI Components Analysis:

Navigation:
- Header with logo and nav links
- Search bar with autocomplete
- User profile dropdown

Content Areas:
- Hero section with CTA button
- Card grid layout (3 columns)
- Sidebar with filters
- Footer with links and social icons

Interactive Elements:
- Primary button (blue, rounded)
- Secondary button (outline)
- Input fields with labels
- Toggle switches
- Rating stars
"""

1.4 Design System Extraction

bash

# Extract colors and typography
claude-code "What are the colors, fonts, and sizing used in this design?"

# Identify spacing patterns
claude-code "What spacing and padding patterns do you see?"

# Document design tokens
claude-code "Create a design tokens list from this screenshot"

Quality Gate 1: Analysis Complete

[ ] All components identified
[ ] Layout structure understood
[ ] Design system extracted
[ ] Responsive considerations noted
[ ] Visual hierarchy documented

Phase 2: STRUCTURE - HTML/Component Structure

Objective

Create the semantic HTML structure or component hierarchy.

Steps

2.1 Create Semantic HTML Structure

bash

# Generate semantic HTML
claude-code "Create semantic HTML structure for this design"

# Example for a product card:
"""
<article class="product-card">
  <header class="product-header">
    <img src="product.jpg" alt="Product name" class="product-image">
    <div class="product-badge">Sale</div>
  </header>
  
  <div class="product-content">
    <h3 class="product-title">Product Name</h3>
    <p class="product-description">Brief description</p>
    
    <div class="product-rating">
      <span class="stars" aria-label="4 out of 5 stars">★★★★☆</span>
      <span class="rating-count">(24 reviews)</span>
    </div>
    
    <div class="product-footer">
      <span class="price">$29.99</span>
      <button class="add-to-cart">Add to Cart</button>
    </div>
  </div>
</article>
"""

2.2 Component-Based Structure (React/Vue/Angular)

bash

# Create component structure
claude-code "Create React/Vue/Angular components for this design"

# Example React structure:
claude-code "Break this into reusable React components with props"

# Generate component hierarchy
"""
App
├── Header
│   ├── Logo
│   ├── Navigation
│   └── UserMenu
├── Main
│   ├── HeroSection
│   ├── ProductGrid
│   │   └── ProductCard (reusable)
│   └── Sidebar
│       ├── FilterSection
│       └── CategoryList
└── Footer
"""

2.3 Accessibility Considerations

bash

# Add accessibility attributes
claude-code "Add ARIA labels and accessibility attributes to this structure"

# Ensure semantic markup
claude-code "Review the structure for semantic HTML best practices"

# Add keyboard navigation support
claude-code "Ensure this structure supports keyboard navigation"

Quality Gate 2: Structure Complete

[ ] Semantic HTML created
[ ] Component hierarchy defined
[ ] Accessibility attributes added
[ ] Structure matches design
[ ] Reusable components identified

Phase 3: STYLE - CSS Implementation

Objective

Implement pixel-perfect styling to match the visual design.

Steps

3.1 Setup CSS Framework/System

bash

# Choose styling approach
claude-code "What CSS approach should we use for this design?"

# Setup CSS variables/design tokens
claude-code "Create CSS custom properties from the design tokens"

# Example:
"""
:root {
  /* Colors */
  --primary-color: #3b82f6;
  --secondary-color: #64748b;
  --accent-color: #f59e0b;
  --background: #ffffff;
  --surface: #f8fafc;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  
  /* Typography */
  --font-family: 'Inter', sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}
"""

3.2 Layout Implementation

bash

# Implement grid/flexbox layout
claude-code "Create CSS Grid/Flexbox layout for the main structure"

# Add responsive breakpoints
claude-code "Implement responsive design with mobile-first approach"

# Example responsive grid:
"""
.product-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr; /* Mobile first */
}

@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
"""

3.3 Component Styling

bash

# Style individual components
claude-code "Style the product card component to match the screenshot exactly"

# Add hover states and transitions
claude-code "Add smooth hover effects and micro-interactions"

# Implement button styles
claude-code "Create button variants (primary, secondary, outline) from the design"

3.4 Fine-tuning and Polish

bash

# Compare with original screenshot
claude-code "Compare our implementation with the original screenshot"

# Adjust spacing and alignment
claude-code "Fine-tune spacing to match the design precisely"

# Add subtle animations
claude-code "Add subtle animations and transitions for better UX"

Quality Gate 3: Styling Complete

[ ] Pixel-perfect match to design
[ ] Responsive behavior implemented
[ ] Hover states and transitions added
[ ] Design system consistency maintained
[ ] Cross-browser compatibility verified

Phase 4: INTERACT - Behavior Implementation

Objective

Add interactive functionality and state management.

Steps

4.1 Basic Interactions

bash

# Add click handlers
claude-code "Add click handlers for buttons and interactive elements"

# Implement form interactions
claude-code "Add form validation and submission handling"

# Add keyboard navigation
claude-code "Implement keyboard navigation for accessibility"

4.2 Dynamic Behavior

bash

# Add state management
claude-code "Implement component state for interactive features"

# Example React state:
"""
const [products, setProducts] = useState([]);
const [filters, setFilters] = useState({});
const [loading, setLoading] = useState(false);

const handleFilterChange = (newFilters) => {
  setFilters(newFilters);
  // Trigger product filtering
};

const handleAddToCart = (productId) => {
  // Add to cart logic
};
"""

4.3 API Integration

bash

# Connect to backend APIs
claude-code "Integrate with product API to fetch real data"

# Add loading states
claude-code "Implement loading spinners and skeleton screens"

# Handle error states
claude-code "Add error handling and user feedback"

4.4 Advanced Interactions

bash

# Add drag and drop (if needed)
claude-code "Implement drag and drop functionality"

# Add animations and transitions
claude-code "Create smooth page transitions and element animations"

# Implement search and filtering
claude-code "Add real-time search and filtering functionality"

Quality Gate 4: Interactions Complete

[ ] All interactive elements functional
[ ] State management implemented
[ ] API integration working
[ ] Error handling in place
[ ] Loading states implemented

Phase 5: VERIFY - Testing and Validation

Objective

Ensure the implementation matches the design and functions correctly.

Steps

5.1 Visual Comparison

bash

# Take screenshot of implementation
claude-code "Take a screenshot of our implementation"

# Compare with original design
claude-code "Compare our implementation with the original screenshot"

# Document differences
claude-code "List any differences between original and implementation"

5.2 Responsive Testing

bash

# Test mobile responsiveness
claude-code "Test the design on mobile viewport (375px width)"

# Test tablet responsiveness
claude-code "Test the design on tablet viewport (768px width)"

# Test desktop responsiveness
claude-code "Test the design on desktop viewport (1200px width)"

5.3 Interaction Testing

bash

# Test all interactive elements
claude-code "Test all buttons, forms, and interactive elements"

# Test keyboard navigation
claude-code "Verify keyboard navigation works properly"

# Test accessibility
claude-code "Run accessibility audit and fix any issues"

5.4 Performance Optimization

bash

# Optimize images and assets
claude-code "Optimize images and reduce bundle size"

# Check performance metrics
claude-code "Run Lighthouse audit and improve scores"

# Test loading performance
claude-code "Measure and optimize loading performance"

Quality Gate 5: Ready for Production

[ ] Visual match verified
[ ] Responsive design tested
[ ] All interactions working
[ ] Accessibility audit passed
[ ] Performance optimized

Advanced Techniques

Design System Integration

bash

# Create reusable design tokens
claude-code "Extract this design into a reusable design system"

# Generate component library
claude-code "Create a component library from these components"

# Document component API
claude-code "Document component props and usage patterns"

Animation and Micro-interactions

bash

# Add purposeful animations
claude-code "Add micro-interactions that enhance user experience"

# Example CSS animations:
"""
.product-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.add-to-cart {
  position: relative;
  overflow: hidden;
}

.add-to-cart::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.3s ease, height 0.3s ease;
  transform: translate(-50%, -50%);
}

.add-to-cart:active::before {
  width: 300px;
  height: 300px;
}
"""

Component Variants

bash

# Create component variants
claude-code "Create variants of this component (sizes, themes, states)"

# Example variant system:
"""
// Button variants
.btn {
  /* Base styles */
}

.btn--primary {
  background: var(--primary-color);
  color: white;
}

.btn--secondary {
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.btn--small {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.btn--large {
  padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-lg);
}
"""

Common Visual Development Patterns

Pattern 1: Landing Page Creation

1. Analyze hero section and layout
2. Create responsive grid structure
3. Implement typography and spacing
4. Add animations and scroll effects

Pattern 2: Dashboard Interface

1. Break down data visualization components
2. Create flexible card/widget system
3. Implement responsive sidebar/navigation
4. Add interactive data filtering

Pattern 3: E-commerce Product Page

1. Design product image gallery
2. Create product information layout
3. Implement variant selection (size, color)
4. Add cart functionality and reviews

Tools and Resources

Screenshot Analysis Tools

bash

# Browser screenshot tools
- Chrome DevTools Device Simulation
- Firefox Responsive Design Mode
- Browser Extensions (Full Page Screen Capture)

# Design comparison tools
- Pixel Perfect browser extension
- Overlay comparison techniques
- Design handoff tools (Figma, Zeplin)

CSS Development Tools

bash

# CSS frameworks and utilities
claude-code "Recommend CSS framework for this type of design"

# Common choices:
- Tailwind CSS for utility-first approach
- CSS Modules for component styling
- Styled Components for JS-in-CSS
- SASS/SCSS for enhanced CSS features

Testing and Validation

bash

# Visual regression testing
claude-code "Set up visual regression testing for this component"

# Accessibility testing
claude-code "Run axe-core accessibility tests"

# Performance testing
claude-code "Set up Lighthouse CI for performance monitoring"

Troubleshooting

Issue: Design doesn't match exactly

bash

# Solution: Detailed comparison analysis
claude-code "Compare pixel measurements between design and implementation"

# Use browser dev tools to inspect spacing
claude-code "Use browser inspector to measure exact spacing values"

Issue: Responsive behavior is incorrect

bash

# Solution: Mobile-first approach
claude-code "Redesign using mobile-first responsive approach"

# Test at specific breakpoints
claude-code "Test exact behavior at 320px, 768px, 1024px, 1440px"

Issue: Performance is poor

bash

# Solution: Optimize assets and code
claude-code "Optimize images, CSS, and JavaScript for better performance"

# Use performance profiling
claude-code "Profile rendering performance and identify bottlenecks"

Success Metrics

Visual Accuracy

Metric	Target	Measurement
Pixel Perfect Match	>95%	Visual comparison score
Responsive Accuracy	100%	All breakpoints working
Color Accuracy	100%	Exact color matches
Typography Match	100%	Font, size, spacing match

Performance Metrics

Metric	Target	Tool
Lighthouse Score	>90	Chrome DevTools
First Contentful Paint	<2s	Performance API
Cumulative Layout Shift	<0.1	Core Web Vitals
Bundle Size	<100KB	Webpack Bundle Analyzer

Integration Patterns

With Test-Driven Development

bash

# Write visual regression tests
claude-code "Create visual regression tests for components"

# Test responsive behavior
claude-code "Add tests for responsive breakpoints"

With Multi-Claude Workflow

bash

# Parallel development streams
# Claude 1: Structure and layout
# Claude 2: Styling and theming
# Claude 3: Interactions and behavior

Best Practices

Do's ✅

Start with mobile-first design
Use semantic HTML structure
Implement accessibility from the start
Test on real devices
Optimize for performance
Create reusable components

Don'ts ❌

Don't ignore responsive design
Don't skip accessibility testing
Don't hardcode values (use design tokens)
Don't optimize prematurely
Don't ignore browser compatibility
Don't skip performance testing

Workflow-003: Visual Development (Screenshot-driven) ​

Document Control ​

Overview ​

Prerequisites ​

Required SOPs ​

Environment Setup ​

Phase 1: ANALYZE - Screenshot Analysis ​

Objective ​

Steps ​

1.1 Upload and Initial Analysis ​

1.2 Layout Analysis ​

1.3 Component Identification ​

1.4 Design System Extraction ​

Quality Gate 1: Analysis Complete ​

Phase 2: STRUCTURE - HTML/Component Structure ​

Objective ​

Steps ​

2.1 Create Semantic HTML Structure ​

2.2 Component-Based Structure (React/Vue/Angular) ​

2.3 Accessibility Considerations ​

Quality Gate 2: Structure Complete ​

Phase 3: STYLE - CSS Implementation ​

Objective ​

Steps ​

3.1 Setup CSS Framework/System ​

3.2 Layout Implementation ​

3.3 Component Styling ​

3.4 Fine-tuning and Polish ​

Quality Gate 3: Styling Complete ​

Phase 4: INTERACT - Behavior Implementation ​

Objective ​

Steps ​

4.1 Basic Interactions ​

4.2 Dynamic Behavior ​

4.3 API Integration ​

4.4 Advanced Interactions ​

Quality Gate 4: Interactions Complete ​

Phase 5: VERIFY - Testing and Validation ​

Objective ​

Steps ​

5.1 Visual Comparison ​

5.2 Responsive Testing ​

5.3 Interaction Testing ​

5.4 Performance Optimization ​

Quality Gate 5: Ready for Production ​

Advanced Techniques ​

Design System Integration ​

Animation and Micro-interactions ​

Component Variants ​

Common Visual Development Patterns ​

Pattern 1: Landing Page Creation ​

Pattern 2: Dashboard Interface ​

Pattern 3: E-commerce Product Page ​

Tools and Resources ​

Screenshot Analysis Tools ​

CSS Development Tools ​

Testing and Validation ​

Troubleshooting ​

Issue: Design doesn't match exactly ​

Issue: Responsive behavior is incorrect ​

Issue: Performance is poor ​

Success Metrics ​

Visual Accuracy ​

Performance Metrics ​

Integration Patterns ​

With Test-Driven Development ​

With Multi-Claude Workflow ​

Best Practices ​

Do's ✅ ​

Don'ts ❌ ​

See Also ​

Workflow-003: Visual Development (Screenshot-driven)

Document Control

Overview

Prerequisites

Required SOPs

Environment Setup

Phase 1: ANALYZE - Screenshot Analysis

Objective

Steps

1.1 Upload and Initial Analysis

1.2 Layout Analysis

1.3 Component Identification

1.4 Design System Extraction

Quality Gate 1: Analysis Complete

Phase 2: STRUCTURE - HTML/Component Structure

Objective

Steps

2.1 Create Semantic HTML Structure

2.2 Component-Based Structure (React/Vue/Angular)

2.3 Accessibility Considerations

Quality Gate 2: Structure Complete

Phase 3: STYLE - CSS Implementation

Objective

Steps

3.1 Setup CSS Framework/System

3.2 Layout Implementation

3.3 Component Styling

3.4 Fine-tuning and Polish

Quality Gate 3: Styling Complete

Phase 4: INTERACT - Behavior Implementation

Objective

Steps

4.1 Basic Interactions

4.2 Dynamic Behavior

4.3 API Integration

4.4 Advanced Interactions

Quality Gate 4: Interactions Complete

Phase 5: VERIFY - Testing and Validation

Objective

Steps

5.1 Visual Comparison

5.2 Responsive Testing

5.3 Interaction Testing

5.4 Performance Optimization

Quality Gate 5: Ready for Production

Advanced Techniques

Design System Integration

Animation and Micro-interactions

Component Variants

Common Visual Development Patterns

Pattern 1: Landing Page Creation

Pattern 2: Dashboard Interface

Pattern 3: E-commerce Product Page

Tools and Resources

Screenshot Analysis Tools

CSS Development Tools

Testing and Validation

Troubleshooting

Issue: Design doesn't match exactly

Issue: Responsive behavior is incorrect

Issue: Performance is poor

Success Metrics

Visual Accuracy

Performance Metrics

Integration Patterns

With Test-Driven Development

With Multi-Claude Workflow

Best Practices

Do's ✅

Don'ts ❌

See Also