design-analyzer

Design Analyzer Skill

Purpose

Fetch and extract technical requirements from design references (Figma URLs, screenshots, mockups) for CMS component implementation.

CRITICAL FIRST STEP: This skill MUST actively fetch design data using available tools (Figma MCP, Read tool) before performing any analysis. Never guess or infer design specifications - always fetch the actual design first.

Philosophy

Accurate design-to-code translation requires systematic extraction of technical specifications.

Core Beliefs

1. Precision Over Interpretation: Extract exact values, don't guess or estimate
2. Accessibility from the Start: Check contrast and touch targets during analysis
3. Responsive by Default: Design for mobile first, enhance for desktop
4. Document Technical Decisions: Record exact colors, spacing, typography for reproducibility

Why Design Analysis Matters

• Pixel-Perfect Implementation: Faithful translation of designer intent
• Consistent Experiences: Same colors, spacing, typography across components
• Accessibility Compliance: Catch contrast and touch target issues early
• Developer Efficiency: Clear specs eliminate guesswork

When This Skill Activates

This skill automatically activates when:

• User mentions Figma URL or Figma design
• User uploads an image file (.png, .jpg, .jpeg, .webp, .svg)
• User says phrases like:
• "implement this design"
• "create a component from this mockup"
• "build this layout"
• "convert this design to [WordPress/Drupal]"
• User asks to analyze visual design elements
• User references a "screenshot" or "wireframe"

Decision Framework

Before analyzing a design, determine:

What's the Design Source?

1. Figma URL → Extract artboard structure, exact values from design tokens
2. Screenshot/Image → Visual analysis, estimate values, measure ratios
3. Wireframe → Structure only, minimal styling details
4. Partial mockup → Analyze what's visible, note missing context

What's the Target Platform?

WordPress:

• Map to native blocks (Group, Heading, Paragraph, Buttons, Image, Columns)
• Output: Block pattern PHP file + SCSS
• Focus: Block composition and responsive classes

Drupal:

• Map to paragraph fields (text, image, link, entity reference)
• Output: Paragraph type YAML + Twig + SCSS
• Focus: Field structure and view modes

What Components Are Visible?

Layout patterns:

• Hero sections → Full-width container with content overlay
• Card grids → Repeating cards with consistent spacing
• Feature lists → Icon + heading + text patterns
• Navigation → Header with menu items

Interactive elements:

• Buttons → Identify all button states (default, hover, focus, active)
• Forms → Note input types, labels, validation states
• Links → Check text links vs. button styles

What Technical Specs Are Needed?

Always extract:

• ✅ Colors - Hex values, opacity, contrast ratios
• ✅ Typography - Font families, sizes, weights, line heights
• ✅ Spacing - Margins, padding, gaps (in px or rem)
• ✅ Layout - Grid columns, flex direction, alignment

Check for accessibility:

• ✅ Contrast ratios - Calculate for all text (4.5:1 minimum)
• ✅ Touch targets - Verify buttons ≥ 44x44px on mobile
• ✅ Focus indicators - Note if visible focus states exist

What Responsive Behavior?

Analyze breakpoints:

• Mobile (< 768px) - Stacked layout, larger touch targets
• Tablet (768-1023px) - Mixed layout, medium spacing
• Desktop (1024px+) - Full layout, smaller relative spacing

Common responsive patterns:

• Columns → Stack on mobile, side-by-side on desktop
• Font sizes → Smaller base on mobile, larger on desktop
• Images → Full width on mobile, constrained on desktop

Decision Tree

User provides design reference
    ↓
Identify source type (Figma/image/wireframe)
    ↓
Determine target platform (WordPress/Drupal)
    ↓
Extract visual specs (colors/typography/spacing)
    ↓
Check accessibility (contrast/touch targets)
    ↓
Map to CMS components (blocks/paragraphs)
    ↓
Document responsive behavior
    ↓
Output structured technical spec

Capabilities

Design Input Fetching & Processing

CRITICAL: This skill actively FETCHES design data before analysis:

• Figma URLs:
• ✅ Use Figma MCP to fetch design context and code
• ✅ Use Figma MCP to capture screenshots
• ✅ Extract exact values from Figma design tokens
• ✅ Download image assets locally
• Extract node IDs, artboard names, frame structure

• Screenshots:
• ✅ Read image files using Read tool
• Analyze visual hierarchy, layout patterns, UI components

• Mockups: Identify design system elements, spacing, typography
• Wireframes: Extract structure and content relationships

Component Identification

• Recognize common patterns: heroes, CTAs, cards, galleries, slideshows
• Map sections to CMS components (WordPress blocks, Drupal paragraphs)
• Identify reusable patterns vs. unique implementations
• Detect interactive elements requiring JavaScript

Technical Extraction

• Colors: Extract hex codes, identify primary/secondary/accent colors
• Typography: Font families, sizes, weights, line-heights
• Spacing: Margins, padding, gaps (in px, rem, or relative units)
• Layout: Grid systems, flexbox patterns, column structures
• Breakpoints: Responsive design requirements
• Interactions: Hover states, animations, transitions

Analysis Process

0. Fetch Design Data (CRITICAL FIRST STEP)

Before any analysis, you MUST fetch the actual design data:

For Figma URLs:

STEP 1: Load Figma MCP Tools

Use ToolSearch to load Figma tools FIRST:
ToolSearch(query: "select:mcp__plugin_figma_figma__get_design_context")
ToolSearch(query: "select:mcp__plugin_figma_figma__get_screenshot")

STEP 2: Parse Figma URL

URL format: https://figma.com/design/{fileKey}?node-id={nodeId}
Example: https://figma.com/design/ABC123XYZ?node-id=16981-81661

Extract:
- fileKey: "ABC123XYZ"
- nodeId: "16981:81661" (IMPORTANT: Replace hyphen with colon!)

STEP 3: Fetch Design Context

Call Figma MCP to get design structure and code:
mcp__plugin_figma_figma__get_design_context(
  fileKey: {extracted fileKey},
  nodeId: {extracted nodeId with colon},
  clientLanguages: "html,css,scss",
  clientFrameworks: "wordpress" | "drupal"
)

Returns:
- React/Tailwind code (will need conversion to native WordPress/Drupal)
- Exact CSS values (colors, spacing, typography from Figma)
- Image asset URLs (valid for 7 days)
- Design token information

STEP 4: Get Visual Screenshot

Call Figma MCP to get visual reference:
mcp__plugin_figma_figma__get_screenshot(
  fileKey: {same fileKey},
  nodeId: {same nodeId with colon},
  clientLanguages: "html,css,scss",
  clientFrameworks: "wordpress" | "drupal"
)

Returns: Visual image for analysis

STEP 5: Extract Design Specifications

From the Figma data, extract:

• Colors: Exact hex codes from CSS values in code output
• Typography: Font families, sizes (px), weights, line-heights from code
• Spacing: Margins, padding, gaps from Tailwind classes or CSS
• Layout: Flexbox, grid, positioning from class names
• Images: Download URLs for all assets (imgVariable = "https://...")
• Dimensions: Width, height, border-radius values
• Effects: Shadows, gradients, opacity

STEP 6: Download Image Assets Locally

# Create directory for pattern/paragraph assets
mkdir -p {theme-path}/assets/images/patterns

# Download each image asset
cd {theme-path}/assets/images/patterns
curl -o {descriptive-filename}.png "{figma-asset-url}"
curl -o {descriptive-filename-2}.jpg "{figma-asset-url-2}"

Update code references to use local paths:

OLD: src="https://www.figma.com/api/mcp/asset/..."
NEW: src="<?php echo esc_url( get_template_directory_uri() . '/assets/images/patterns/{filename}.png