Design Copilot Documentation

What is Design Copilot?

Design Copilot is a Chrome extension that gives you live, on-screen, contextual design feedback as you work. It continuously watches your design canvas and provides instant AI-powered suggestions for improving typography, contrast, spacing, accessibility, and visual hierarchy.

Key Features

• Live Passive Feedback: Auto-runs in background, alerts only when issues detected
• 6 Feedback Categories: Visual hierarchy, spacing, color contrast, typography, CTA clarity, accessibility
• AI-Powered Analysis: GPT-4 Vision + CSS inspection for smart design critique
• Snapshot Mode: Deep analysis with keyboard shortcut for detailed feedback
• Zero Context Switching: No workflow disruption, seamless integration

Installation

Quick Start Guide

Get started with ElementSnap in under 2 minutes:

Your First Extraction

const NetflixButton = () => {
  return (
    <button className="netflix-btn">
      Watch Now
    </button>
  );
};

// CSS
.netflix-btn {
  background: #e50914;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.netflix-btn:hover {
  background: #b20710;
  transform: translateY(-1px);
}

Element Picker

ElementSnap's element picker is the core feature that makes extraction effortless. Here's how it works:

Activation

1. Right-click any element on any website
2. Select "Get Code with ElementSnap" from the context menu
3. The element picker activates with visual highlighting

Visual Feedback

• Blue Outline: Shows the currently hovered element
• Tooltip: Displays element type and basic info
• Click Indicator: Confirms which element will be extracted

Code Generation

ElementSnap's AI-powered code generation creates production-ready code that follows best practices:

Framework Support

AI Optimization

• CSS Cleanup: Removes tracking classes and unnecessary styles
• Semantic Naming: Generates meaningful class names and component names
• Accessibility: Adds ARIA labels and semantic HTML
• Performance: Optimizes for production use

Component Library

Organize and manage your extracted components with ElementSnap's built-in library:

Saving Components

After extracting code, click the "Save to Library" button to store components for later use.

Organization

• Categories: Organize by type (Buttons, Cards, Forms, etc.)
• Tags: Add custom tags for better searchability
• Notes: Add context about where you extracted each component

Export & Sharing

Export your entire component library as JSON for team sharing or backup.

{
  "components": [
    {
      "id": "netflix-button",
      "name": "Netflix Button",
      "framework": "react",
      "code": "const NetflixButton = () => { ... }",
      "css": ".netflix-btn { ... }",
      "tags": ["button", "cta", "streaming"],
      "source": "netflix.com",
      "created": "2024-12-20T10:30:00Z"
    }
  ],
  "version": "1.0",
  "exported": "2024-12-20T11:00:00Z"
}

Example: Netflix Button

Let's walk through extracting a button from Netflix's homepage:

Extraction Steps

1. Navigate to netflix.com
2. Right-click the "Watch Now" button
3. Select "Get Code with ElementSnap"
4. Click the highlighted button
5. Choose your preferred framework (React/Vue/HTML)
6. Copy the generated code

Generated React Code

import React from 'react';

const WatchButton = ({ onClick, children = "▶ Watch Now" }) => {
  return (
    <button 
      className="watch-button"
      onClick={onClick}
      aria-label="Start watching content"
    >
      {children}
    </button>
  );
};

export default WatchButton;

Generated CSS

.watch-button {
  background: linear-gradient(135deg, #e50914 0%, #b20710 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.watch-button:hover {
  background: linear-gradient(135deg, #b20710 0%, #8b0000 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.3);
}

.watch-button:active {
  transform: translateY(0);
}

API Reference

Advanced users can interact with ElementSnap programmatically:

Extension Messages

// Trigger element picker programmatically
chrome.runtime.sendMessage({
  action: 'activateElementPicker',
  options: {
    framework: 'react', // 'react' | 'vue' | 'html'
    optimization: true
  }
});

// Extract specific element
chrome.runtime.sendMessage({
  action: 'extractElement',
  selector: '.target-element',
  framework: 'react'
});

Storage API

// Get all saved components
chrome.storage.local.get(['elementsnap_components'], (result) => {
  const components = result.elementsnap_components || [];
  console.log('Saved components:', components);
});

// Save new component
const component = {
  name: 'Custom Button',
  code: '...',
  framework: 'react',
  tags: ['button', 'custom']
};

chrome.storage.local.get(['elementsnap_components'], (result) => {
  const components = result.elementsnap_components || [];
  components.push(component);
  chrome.storage.local.set({ elementsnap_components: components });
});

Troubleshooting

Common Issues

Element Picker Not Working

• Ensure the extension is enabled in Chrome
• Refresh the page and try again
• Check if the website blocks content scripts

Poor Code Quality

• Try extracting a parent element for more context
• Enable AI optimization in settings
• Manually clean up inline styles if needed

Extension Not Appearing

• Check Chrome extensions page (chrome://extensions/)
• Ensure Developer Mode is enabled
• Reload the extension if needed

Frequently Asked Questions

Is ElementSnap free to use?

Yes! ElementSnap is completely free and open-source. We may introduce premium features in the future, but core functionality will always remain free.

Does ElementSnap work on all websites?

ElementSnap works on 99% of websites. Some sites with strict Content Security Policies may block the extension.

How is this different from UDML?

While UDML requires learning XML syntax and manual markup writing, ElementSnap is completely visual. No setup, no learning curve - just right-click and extract code.

Can I extract entire page layouts?

Currently, ElementSnap works best with individual components. Full page extraction is on our roadmap.

Is the generated code production-ready?

Yes! ElementSnap's AI optimization ensures the code follows best practices and is ready for production use.