Claude Code Image Integration - Visual-Driven Development¶

# Drag and drop design file
claude
> Please implement this design mockup in HTML/CSS

# Or specify file path
claude
> Create a React component based on /path/to/mockup.png

claude
> Please implement this mockup with the following requirements:

Requirements:
- React + TypeScript
- Material-UI components
- Responsive design
- Accessibility compliance
- Dark mode support

Technical specifications:
- CSS-in-JS (emotion)
- Grid Layout
- Flexbox
- CSS Variables

# Phase 1: Layout structure
claude
> First, create the basic layout for this mockup

# Phase 2: Styling
claude
> Apply styles to the previously created layout to match the mockup

# Phase 3: Interaction
claude
> Add button and form interactions

// Generated component example
import React from 'react';
import { Box, Typography, Button, Container, Grid, Card, CardContent } from '@mui/material';
import { styled } from '@mui/material/styles';

const HeroSection = styled(Box)(({ theme }) => ({
  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  color: 'white',
  padding: theme.spacing(8, 0),
  textAlign: 'center',
  minHeight: '60vh',
  display: 'flex',
  alignItems: 'center',
}));

const FeatureCard = styled(Card)(({ theme }) => ({
  height: '100%',
  display: 'flex',
  flexDirection: 'column',
  transition: 'transform 0.3s ease-in-out',
  '&:hover': {
    transform: 'translateY(-5px)',
  },
}));

const LandingPage: React.FC = () => {
  return (
    <Box>
      {/* Hero Section */}
      <HeroSection>
        <Container maxWidth="lg">
          <Typography variant="h2" component="h1" gutterBottom>
            Innovative Solutions
          </Typography>
          <Typography variant="h5" component="p" gutterBottom>
            Take your business to the next level
          </Typography>
          <Button
            variant="contained"
            size="large"
            sx={{
              mt: 3,
              px: 4,
              py: 1.5,
              backgroundColor: 'rgba(255, 255, 255, 0.2)',
              backdropFilter: 'blur(10px)',
              '&:hover': {
                backgroundColor: 'rgba(255, 255, 255, 0.3)',
              },
            }}
          >
            Get Started Now
          </Button>
        </Container>
      </HeroSection>

      {/* Features Section */}
      <Container maxWidth="lg" sx={{ py: 8 }}>
        <Typography variant="h3" component="h2" textAlign="center" gutterBottom>
          Key Features
        </Typography>
        <Grid container spacing={4} sx={{ mt: 2 }}>
          {[
            { title: 'High Performance', description: 'Lightning-fast processing with cutting-edge technology' },
            { title: 'Easy to Use', description: 'Intuitive user interface for seamless experience' },
            { title: 'Secure', description: 'Enterprise-level security features' },
          ].map((feature, index) => (
            <Grid item xs={12} md={4} key={index}>
              <FeatureCard>
                <CardContent sx={{ flexGrow: 1 }}>
                  <Typography variant="h5" component="h3" gutterBottom>
                    {feature.title}
                  </Typography>
                  <Typography variant="body1" color="text.secondary">
                    {feature.description}
                  </Typography>
                </CardContent>
              </FeatureCard>
            </Grid>
          ))}
        </Grid>
      </Container>
    </Box>
  );
};

export default LandingPage;

// Form generated from image
import React, { useState } from 'react';
import {
  Box,
  TextField,
  Button,
  Typography,
  Paper,
  Grid,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  FormHelperText,
} from '@mui/material';
import { styled } from '@mui/material/styles';

const FormContainer = styled(Paper)(({ theme }) => ({
  padding: theme.spacing(4),
  maxWidth: 600,
  margin: '0 auto',
  borderRadius: theme.spacing(2),
  boxShadow: '0 10px 30px rgba(0, 0, 0, 0.1)',
}));

const ContactForm: React.FC = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    company: '',
    category: '',
    message: '',
  });

  const [errors, setErrors] = useState<Record<string, string>>({});

  const handleChange = (field: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
    setFormData(prev => ({
      ...prev,
      [field]: event.target.value,
    }));

    // Real-time validation
    if (errors[field]) {
      setErrors(prev => ({
        ...prev,
        [field]: '',
      }));
    }
  };

  const validateForm = () => {
    const newErrors: Record<string, string> = {};

    if (!formData.name.trim()) {
      newErrors.name = 'Name is required';
    }

    if (!formData.email.trim()) {
      newErrors.email = 'Email is required';
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = 'Please enter a valid email address';
    }

    if (!formData.message.trim()) {
      newErrors.message = 'Message is required';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();

    if (validateForm()) {
      console.log('Form submitted:', formData);
      // API submission logic
    }
  };

  return (
    <FormContainer>
      <Typography variant="h4" component="h1" gutterBottom textAlign="center">
        Contact Us
      </Typography>
      <Typography variant="body1" color="text.secondary" gutterBottom textAlign="center">
        We'd love to hear from you
      </Typography>

      <Box component="form" onSubmit={handleSubmit} sx={{ mt: 3 }}>
        <Grid container spacing={3}>
          <Grid item xs={12} sm={6}>
            <TextField
              fullWidth
              label="Name"
              value={formData.name}
              onChange={handleChange('name')}
              error={!!errors.name}
              helperText={errors.name}
              required
            />
          </Grid>

          <Grid item xs={12} sm={6}>
            <TextField
              fullWidth
              label="Email Address"
              type="email"
              value={formData.email}
              onChange={handleChange('email')}
              error={!!errors.email}
              helperText={errors.email}
              required
            />
          </Grid>

          <Grid item xs={12} sm={6}>
            <TextField
              fullWidth
              label="Company"
              value={formData.company}
              onChange={handleChange('company')}
            />
          </Grid>

          <Grid item xs={12} sm={6}>
            <FormControl fullWidth>
              <InputLabel>Inquiry Type</InputLabel>
              <Select
                value={formData.category}
                onChange={handleChange('category')}
                label="Inquiry Type"
              >
                <MenuItem value="general">General Inquiry</MenuItem>
                <MenuItem value="support">Support</MenuItem>
                <MenuItem value="sales">Sales</MenuItem>
                <MenuItem value="partnership">Partnership</MenuItem>
              </Select>
            </FormControl>
          </Grid>

          <Grid item xs={12}>
            <TextField
              fullWidth
              label="Message"
              multiline
              rows={4}
              value={formData.message}
              onChange={handleChange('message')}
              error={!!errors.message}
              helperText={errors.message}
              required
            />
          </Grid>

          <Grid item xs={12}>
            <Button
              type="submit"
              fullWidth
              variant="contained"
              size="large"
              sx={{
                py: 1.5,
                background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
                '&:hover': {
                  background: 'linear-gradient(45deg, #FE6B8B 60%, #FF8E53 100%)',
                },
              }}
            >
              Send Message
            </Button>
          </Grid>
        </Grid>
      </Box>
    </FormContainer>
  );
};

export default ContactForm;

claude
> Make this design responsive for multiple devices

Device requirements:
- Desktop: 1200px and above
- Tablet: 768px-1199px
- Smartphone: 767px and below

Adjustments needed:
- Convert navigation menu to hamburger menu
- Change card layout to vertical arrangement
- Adjust font sizes
- Optimize spacing

// Auto-generated responsive image component
import React from 'react';
import { Box, useTheme, useMediaQuery } from '@mui/material';

interface ResponsiveImageProps {
  src: string;
  alt: string;
  priority?: boolean;
}

const ResponsiveImage: React.FC<ResponsiveImageProps> = ({ src, alt, priority = false }) => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));

  return (
    <Box
      component="img"
      src={src}
      alt={alt}
      loading={priority ? 'eager' : 'lazy'}
      sx={{
        width: '100%',
        height: 'auto',
        maxWidth: {
          xs: '100%',
          sm: '500px',
          md: '700px',
          lg: '900px',
        },
        borderRadius: 2,
        objectFit: 'cover',
        transition: 'transform 0.3s ease-in-out',
        '&:hover': {
          transform: 'scale(1.02)',
        },
      }}
    />
  );
};

export default ResponsiveImage;

claude
> Analyze this UI screenshot and detect accessibility issues

Check items:
- Color contrast
- Font size
- Button click areas
- Keyboard navigation
- Screen reader compatibility

claude
> Evaluate the usability of this UI design

Evaluation criteria:
- Information hierarchy
- Visual flow
- CTA button placement
- Form usability
- Error message display

// Chart component generated from image
import React from 'react';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  BarChart,
  Bar,
  PieChart,
  Pie,
  Cell,
} from 'recharts';
import { Box, Typography, Paper, Grid } from '@mui/material';

const data = [
  { name: 'Jan', value: 4000, growth: 2400 },
  { name: 'Feb', value: 3000, growth: 1398 },
  { name: 'Mar', value: 2000, growth: 9800 },
  { name: 'Apr', value: 2780, growth: 3908 },
  { name: 'May', value: 1890, growth: 4800 },
  { name: 'Jun', value: 2390, growth: 3800 },
];

const pieData = [
  { name: 'Desktop', value: 45, color: '#0088FE' },
  { name: 'Mobile', value: 35, color: '#00C49F' },
  { name: 'Tablet', value: 20, color: '#FFBB28' },
];

const DashboardCharts: React.FC = () => {
  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h4" component="h1" gutterBottom>
        Sales Dashboard
      </Typography>

      <Grid container spacing={3}>
        {/* Sales Trend */}
        <Grid item xs={12} md={8}>
          <Paper sx={{ p: 2, height: 400 }}>
            <Typography variant="h6" gutterBottom>
              Sales Trend
            </Typography>
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={data}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Line 
                  type="monotone" 
                  dataKey="value" 
                  stroke="#8884d8" 
                  strokeWidth={2}
                  dot={{ fill: '#8884d8', strokeWidth: 2, r: 4 }}
                />
                <Line 
                  type="monotone" 
                  dataKey="growth" 
                  stroke="#82ca9d" 
                  strokeWidth={2}
                  dot={{ fill: '#82ca9d', strokeWidth: 2, r: 4 }}
                />
              </LineChart>
            </ResponsiveContainer>
          </Paper>
        </Grid>

        {/* Device Distribution */}
        <Grid item xs={12} md={4}>
          <Paper sx={{ p: 2, height: 400 }}>
            <Typography variant="h6" gutterBottom>
              Device Access Distribution
            </Typography>
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={pieData}
                  cx="50%"
                  cy="50%"
                  labelLine={false}
                  label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                  outerRadius={80}
                  fill="#8884d8"
                  dataKey="value"
                >
                  {pieData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.color} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </Paper>
        </Grid>

        {/* Monthly Comparison */}
        <Grid item xs={12}>
          <Paper sx={{ p: 2, height: 300 }}>
            <Typography variant="h6" gutterBottom>
              Monthly Sales Comparison
            </Typography>
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={data}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Bar dataKey="value" fill="#8884d8" />
              </BarChart>
            </ResponsiveContainer>
          </Paper>
        </Grid>
      </Grid>
    </Box>
  );
};

export default DashboardCharts;

claude
> Create 3 A/B test variants for this existing landing page

Test elements:
- Header catchphrase
- CTA button color and text
- Image placement
- Number of form fields

Metrics to measure:
- Conversion rate
- Bounce rate
- Engagement rate

claude
> Analyze competitor website screenshots and provide improvement suggestions

Analysis criteria:
- Layout characteristics
- Color usage
- Font selection
- Navigation structure
- CTA placement
- Differentiation points

#!/bin/bash
# design_to_code.sh

# Monitor design files
inotifywait -m -e create --format '%w%f' /path/to/design/folder | while read file; do
    if [[ "$file" =~ \.(png|jpg|jpeg)$ ]]; then
        echo "New design file detected: $file"

        # Auto-convert with Claude Code
        claude -p "Convert this design to a React component" < "$file" > "generated/$(basename "$file" .png).tsx"

        echo "Generated component: generated/$(basename "$file" .png).tsx"
    fi
done

// responsive_test.js
const puppeteer = require('puppeteer');

const devices = [
  { name: 'Desktop', width: 1920, height: 1080 },
  { name: 'Tablet', width: 768, height: 1024 },
  { name: 'Mobile', width: 375, height: 667 },
];

async function captureScreenshots(url) {
  const browser = await puppeteer.launch();

  for (const device of devices) {
    const page = await browser.newPage();
    await page.setViewport({ width: device.width, height: device.height });
    await page.goto(url);

    const screenshot = await page.screenshot({
      path: `screenshots/${device.name.toLowerCase()}.png`,
      fullPage: true,
    });

    console.log(`Screenshot captured for ${device.name}`);
    await page.close();
  }

  await browser.close();
}

// Analyze with Claude Code
async function analyzeResponsive() {
  const claude = require('claude-code');

  for (const device of devices) {
    const result = await claude.analyze(`screenshots/${device.name.toLowerCase()}.png`, {
      prompt: `Analyze this ${device.name} screenshot for responsive design issues`,
    });

    console.log(`${device.name} Analysis:`, result);
  }
}

captureScreenshots('http://localhost:3000').then(() => {
  analyzeResponsive();
});