Skip to main content

Design-to-Code Workflow: Screenshot → CSS → WordPress

The core vibe-coding workflow: you receive a design reference (Figma file, screenshot, URL, or verbal description) and need to produce production-ready CSS for WordPress. This guide documents the full process from visual input to deployed code.

1. The Workflow Overview​

Input (any of these)          →   AI Processing    →   Output
──────────────────────────────────────────────────────────────
Figma file / Figma URL        →   Token extraction →   :root + components
Client screenshot             →   Visual → CSS     →   HTML + CSS block
Reference website URL         →   Style analysis   →   Recreated CSS
Verbal description            →   Design → CSS     →   HTML + CSS block
Existing page (needs refresh) →   Refactor + update→   Modern CSS version
Brand guideline PDF           →   Token mapping    →   Design token system

2. Input Type 1: Screenshot to CSS​

When a client sends a screenshot or image of what they want:

Step 1: Prepare the Screenshot Prompt​

I'm attaching a screenshot of a [COMPONENT NAME] design.

Convert this to production CSS matching this design as closely as possible.

Extract from the image:
1. Color palette (list all colors you can identify as HEX)
2. Typography (font sizes, weights, line heights you can estimate)
3. Spacing (padding, gaps, margins you can estimate in px)
4. Border radius values
5. Shadow treatment

My token system: [PASTE :root BLOCK]
Map any extracted colors to my closest token, or add new tokens if needed.

Architecture rules:
- BEM naming: .c-[component]__[element]--[modifier]
- No hardcoded values — CSS variables only
- No inline styles

Output:
1. Updated :root additions (any new tokens needed)
2. HTML structure
3. CSS block (BEM-structured)
4. Notes on what you estimated vs extracted precisely

Step 2: Review AI Color Extraction​

AI may misread colors from screenshots. Always verify:

/* Paste AI-suggested colors into DevTools color picker */
/* Use eyedropper tool on the original image to verify */
/* For client's existing site: DevTools → Inspect → computed styles */

/* Color mapping workflow: */
/* AI extracts: #3B82F6 → Your system: closest is --color-primary (hsl 245) */
/* Decision: use existing token, or add --color-link: #3B82F6 */

3. Input Type 2: Figma to CSS​

Method A: Figma Dev Mode (If You Have Access)​

Figma Dev Mode shows CSS values for any selected element:

In Figma Dev Mode:
1. Select a frame/component
2. Right panel → "Code" tab → CSS
3. Copy the CSS properties
4. Paste into AI for BEM conversion and token mapping

Method B: Manual Figma Inspection​

For each component, note:
1. Frame dimensions (width, if fixed)
2. Auto-layout settings → maps to flex/grid
3. Fill color → background
4. Stroke → border
5. Corner radius → border-radius
6. Effects → box-shadow / filter
7. Text styles → font family, size, weight, line height, letter spacing
8. Spacing → padding, gap values

Figma Design Tokens Export Prompt​

I have these Figma variables exported:

Colors:
  Primary/500: #6C63FF
  Primary/700: #5048D4
  Neutral/100: #F8F8F8
  Neutral/900: #1A1A1A
  [... full list]

Typography:
  Heading/Font: Playfair Display
  Body/Font: Inter
  Size/XS: 12px
  Size/SM: 14px
  Size/Base: 16px
  Size/LG: 18px
  Size/XL: 24px
  [... full list]

Spacing:
  Space/1: 4px
  Space/2: 8px
  Space/4: 16px
  Space/6: 24px
  [... full list]

Convert to a complete CSS :root { } token system.
Naming convention: --[category]-[semantic-name] (e.g. --color-primary, --text-sm)
Use rem for typography and spacing (base: 16px).
Use hsl() or oklch() for colors where possible.

4. Input Type 3: Reference URL to CSS​

When a client says "I want it to look like this website":

Step 1: DevTools Inspection​

1. Open the reference URL in Chrome
2. F12 → DevTools → Inspect
3. For each component you want to replicate:
   a. Select element → Computed tab: shows all final CSS values
   b. Elements tab: see the HTML structure used
   c. Styles tab: see which CSS rules apply
4. Screenshot + write down: colors, fonts, spacing, effects

Step 2: Extract the Design System​

DevTools → Sources → (find the main CSS file)
Search for:
  :root — extract all CSS variables if they use a token system
  @font-face — identify custom fonts
  font-family — identify font stack

OR: DevTools → Network → CSS files → view source

Reference Site Analysis Prompt​

I want to recreate the [COMPONENT] from [URL] in my own CSS.
Here's what I found by inspecting it:

Component HTML structure:
[PASTE HTML]

Computed CSS values:
[PASTE COMPUTED CSS OR DESCRIBE VISUALLY]

Colors I identified: [LIST]
Font: [NAME, SIZE, WEIGHT]
Spacing: [PADDING/GAP VALUES]

Recreate this as my own component using:
- BEM naming (my convention: .c-[component]__[element]--[modifier])
- My tokens: [PASTE :root]
- No copying original CSS — write fresh, clean code
- Add any improvements you'd make for accessibility or modern CSS

5. Input Type 4: Verbal Description to CSS​

When a client describes what they want in words:

The Description-to-Spec Process​

Client says:
"I want a card that has the image on top, then the title and description below.
When you hover it, the card should lift up slightly. There should be a 'Read More'
button at the bottom. The cards should be in a grid of 3."

Your internal translation:
- Component: .c-card (standard blog card)
- Layout: flex-column (image top, body below)
- Hover: translateY(-4px) + box-shadow
- CTA: .c-card__btn (.c-btn--outline inside)
- Grid: .o-grid--3 (3 columns, auto-fill at smaller sizes)

Verbal → Spec Prompt​

Convert this client description into a CSS specification and then implement it.

Client description: "[PASTE EXACT CLIENT WORDS]"

Step 1: List what you understood:
- Component type and name
- Layout approach (flex/grid)
- Interactive states
- Variants needed
- Content elements

Step 2: Ask 2-3 clarifying questions if critical information is missing.

Step 3: Implement using:
- My tokens: [PASTE :root]
- BEM naming + SMACSS states
- Mobile-first responsive

Output: spec list + HTML + CSS

6. Color Extraction Workflow​

Identifying and standardizing colors from any source:

Method 1: DevTools Eyedropper
→ F12 → Elements → click any color swatch → eyedropper tool
→ Hover over any pixel on page → get HEX/HSL

Method 2: Browser Extensions
→ ColorZilla (Chrome): hover any element → instant hex copy
→ Eye Dropper: pick color from anywhere on screen

Method 3: CSS Variables Extraction (for token-based sites)
→ DevTools → Console → paste:
   Object.fromEntries([...document.styleSheets]
     .flatMap(s => [...s.cssRules])
     .filter(r => r.selectorText === ':root')
     .flatMap(r => [...r.style])
     .filter(p => p.startsWith('--'))
     .map(p => [p, document.documentElement.style.getPropertyValue(p) ||
                getComputedStyle(document.documentElement).getPropertyValue(p)]))

Method 4: Screenshot color picker
→ Upload to AI: "List all unique colors in this image as hex codes"

Color Mapping Prompt​

I've extracted these colors from a design reference:
[LIST OF HEX CODES]

My current token system:
[PASTE :root]

For each extracted color:
1. Find the closest token match in my system (name + similarity %)
2. Suggest whether to: (a) map to existing token, (b) add new token, (c) skip
3. If adding new tokens, suggest the semantic name

Group by: primary, secondary, neutral, semantic (danger/success/warning)

7. Font Identification Workflow​

Method 1: WhatFont browser extension
→ Install WhatFont → hover any text → font name shown instantly

Method 2: DevTools
→ Inspect text element → Computed → font-family property

Method 3: Fontanello extension
→ Right-click any text → "Fontanello" → full font CSS shown

Method 4: AI font identification
→ Screenshot text → "What font is used in this text? List 3 similar Google Fonts."

Method 5: font-face extraction from network
→ DevTools → Network → filter "font" → see font files loaded
→ Font filename often reveals the font family name

Font Integration Prompt​

The client's design uses [FONT NAME].

1. Is this available on Google Fonts? If yes, give me the @import URL.
2. If not, suggest 2 Google Fonts that closely match.
3. Update my token system to use this font:
   My current: --font-heading: 'Playfair Display', Georgia, serif;
   Target: the new font for [headings/body/both]
4. Generate the <link> tag for the HTML <head>
5. Show me the CSS font-display: swap optimization

8. The Spacing Estimation System​

When you can't measure exact spacing from a screenshot:

Reference: Apple uses 8px base grid. Most modern SaaS uses 4px or 8px.

Estimation rules for screenshots:
- Component padding: usually 16px, 24px, or 32px (1rem, 1.5rem, 2rem)
- Gap between elements: usually 8px, 12px, or 16px
- Section vertical spacing: usually 48px, 64px, 80px, or 96px
- Nav height: usually 60–80px
- Border radius: usually 4px, 8px, 12px, 16px (small, medium, large, xl)

Ask AI: "Estimate the spacing values in this screenshot in multiples of 8."

9. The Complete Design-to-Code Sprint​

A 60-minute workflow for a complete section:

Minute 0–5: Analyze the design
  - Screenshot or inspect the reference
  - Identify: colors, fonts, spacing, layout, interactions
  - Write a 5-bullet description of what you see

Minute 5–10: Extract or map to tokens
  - Map colors to your :root (or add new ones)
  - Confirm font — already in system or need to add?
  - Note any gaps in your token system

Minute 10–15: Generate HTML structure with AI
  Prompt: "Generate semantic HTML for this design: [5-bullet description].
           Use ARIA roles. BEM class names. My tokens: [paste :root]"

Minute 15–35: Generate and refine CSS
  Prompt: "Write CSS for the HTML above. Rules: [paste context block]"
  Then: Review + fix any non-compliant output

Minute 35–45: Add responsive behavior
  Prompt: "Make this component mobile-first responsive.
           Mobile (<768px): [describe], Desktop: [describe]"

Minute 45–55: WordPress conversion
  Prompt: "Convert this HTML+CSS for use in Bricks Builder / GenerateBlocks.
           What block types to use? Where does the custom CSS go?"

Minute 55–60: Final review
  - Validate in browser
  - Check focus states
  - Clear any hardcoded values
  - Add to your component library

10. AI Prompt: Full Design Replication​

The master prompt when you have a clear visual reference:

Replicate this design as production CSS.

[ATTACH IMAGE or paste URL or describe the design]

What I need replicated:
- Section: [hero / card grid / pricing / testimonials / etc.]
- Key visual details: [gradient, glass effect, hover animation, etc.]
- Responsive behavior: [stacked on mobile, grid on desktop]

My constraints:
- Must use my token system: [PASTE :root]
- BEM naming: .c-[component]__[element]--[modifier]
- WordPress-compatible (no build step — vanilla CSS)
- No inline styles, no !important except utilities
- Include hover + focus states
- Include prefers-reduced-motion override for animations

Match the visual as closely as possible, then improve:
1. Accessibility (focus rings, ARIA attributes, contrast)
2. Performance (efficient selectors, minimal specificity)
3. Maintainability (token usage, no magic numbers)

Output: HTML + CSS (separated). Add a comment header to the CSS block.