Automatically extract technical requirements from design references when user mentions Figma, uploads images, or says "implement this design". Analyzes colors, typography, spacing, layout, and maps to WordPress blocks or Drupal paragraph fields. Provides detailed specifications for developers including exact values, responsive behavior, and accessibility requirements.
Automatically extract technical requirements from design references when user mentions Figma, uploads images, or says "implement this design". Analyzes colors, typography, spacing, layout, and maps to WordPress blocks or Drupal paragraph fields. Provides detailed specifications for developers including exact values, responsive behavior, and accessibility requirements.
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
Precision Over Interpretation: Extract exact values, don't guess or estimate
Accessibility from the Start: Check contrast and touch targets during analysis
Responsive by Default: Design for mobile first, enhance for desktop
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
What type of component is this?
- WordPress block pattern?
- Drupal paragraph type?
- Custom theme component?
What's the primary purpose?
- Hero section?
- Content display?
- Interactive element?
- Navigation?
2. Visual Hierarchy Analysis
Examine and document:
Layout Structure:
- Sections and their relationships
- Container widths (full-width, contained, etc.)
- Visual hierarchy (what's most prominent)
Content Elements:
- Headings (identify h1, h2, h3 levels)
- Body text and captions
- Images and media placement
- Buttons and CTAs
- Icons and decorative elements
Semantic Structure:
- Proper heading hierarchy
- Landmark regions
- Form labels
- Button text
ARIA Needs:
- Labels for icon-only buttons
- Descriptions for complex widgets
- Live regions for dynamic content
- Hidden content for screen readers
Contrast:
- Check all text against backgrounds
- Verify minimum 4.5:1 for body text
- Verify minimum 3:1 for large text/UI
7. Interactive Elements
Document behavior:
For each interactive element:
- What triggers it (click, hover, focus)
- What changes (visual, content, navigation)
- Animation/transition details
- Keyboard interaction requirements
- Accessible alternatives
Output Format
When analysis is complete, provide structured output:
component_analysis:type:"block_pattern"|"paragraph_type"|"theme_component"name:"descriptive-name"cms:"wordpress"|"drupal"structure:sections:-name:"hero"elements:-type:"heading"level:"h1"content:"Main Heading Text"-type:"paragraph"content:"Supporting text"-type:"button"style:"primary"text:"Call to Action"wordpress_blocks:-"core/cover"-"core/heading"-"core/paragraph"-"core/buttons"drupal_fields:-name:"field_heading"type:"string"cardinality:1-name:"field_body"type:"text_long"cardinality:1-name:"field_cta"type:"link"cardinality:1styling:colors:primary:"#0073aa"secondary:"#23282d"text:"#1e1e1e"background:"#ffffff"typography:heading_1:mobile:"2rem / 1.2 / 700"tablet:"2.5rem / 1.2 / 700"desktop:"3rem / 1.2 / 700"body:mobile:"1rem / 1.6 / 400"tablet:"1.125rem / 1.6 / 400"desktop:"1.25rem / 1.6 / 400"spacing:section_padding:mobile:"2rem"tablet:"3rem"desktop:"4rem"element_gap:"1.5rem"layout:max_width:"1200px"columns:mobile:1tablet:2desktop:3responsive:breakpoints:mobile:"320px"tablet:"768px"desktop:"1024px"behavior:-"Stack columns on mobile"-"Reduce heading sizes"-"Adjust padding/margins"interactions:-element:"CTA button"trigger:"hover"effect:"background color change"css:"transition: background-color 0.3s ease"-element:"Image"trigger:"click"effect:"Open lightbox"requires:"JavaScript"accessibility:requirements:-"Heading hierarchy: h1 → h2"-"Alt text for hero image"-"Button has descriptive text"-"Color contrast: all text 4.5:1 or better"-"Focus indicators on interactive elements"concerns:-"Icon-only button needs aria-label"-"Decorative image should have empty alt"implementation_notes:-"Use CSS Grid for desktop 3-column layout"-"Background image should be lazy-loaded"-"Consider reduced motion preferences"-"Test with keyboard navigation"
I'll fetch and analyze this Figma design for WordPress implementation.
[Step 1: Load Figma tools with ToolSearch]
[Step 2: Parse URL - fileKey: ABC123, nodeId: 100:200]
[Step 3: Call mcp__plugin_figma_figma__get_design_context]
[Step 4: Call mcp__plugin_figma_figma__get_screenshot]
[Step 5: Extract design specifications from Figma data]
[Step 6: Download image assets locally]
Design Analysis Complete:
- Type: Hero section with overlaid text
- Fetched from Figma: node-id=100:200
- WordPress Blocks Needed: Cover, Heading, Paragraph, Buttons
- Layout: Full-width (1200px max-width), centered content
- Colors (from Figma):
- Background overlay: #000000 (40% opacity)
- Text: #FFFFFF
- Button: #0073AA
- Button hover: #005A87
- Typography (from Figma):
- Heading: Montserrat Bold, 48px/1.2, desktop → 32px mobile
- Body: Inter Regular, 18px/1.6
- Spacing (from Figma):
- Section padding: 120px vertical, 40px horizontal
- Element gap: 24px
- Images (downloaded):
- Hero background: /assets/images/patterns/hero-bg.jpg
- Responsive: Text scales down, padding reduces on mobile
- Accessibility:
- Text contrast 7:1 (exceeds WCAG AA)
- Need alt text for background image
Ready to generate the block pattern with exact Figma specifications.
Example 2: Screenshot
User uploads image and says:
"Create a WordPress block pattern from this hero design"
Skill Response:
I'll analyze this design for WordPress implementation.
[Step 1: Read image file]
[Step 2: Perform visual analysis]
Design Analysis Complete:
- Type: Hero section with overlaid text
- WordPress Blocks Needed: Cover, Heading, Paragraph, Buttons
- Layout: Full-width background image with centered content
- Colors (estimated from screenshot):
- Dark overlay: ~#000000 (40% opacity)
- Text: white
- Typography (estimated):
- Heading: ~3rem on desktop, ~2rem mobile
- Body: ~1.125rem
- Responsive: Text size reduces, padding adjusts
- Accessibility: Need alt text for background image, ensure text contrast
Note: Values estimated from screenshot. For exact specifications, provide Figma URL.
Ready to generate the block pattern. Shall I proceed?
Best Practices
ALWAYS Fetch Design Data First: Never analyze without fetching actual design using Figma MCP or Read tool
Use Exact Values from Figma: When Figma URL provided, use exact px/rem values from Figma data, not estimates
Download Assets Locally: Never reference Figma CDN URLs in production code - download to theme/module
Ask Before Assuming: If design intent is unclear, ask the user
Be Specific: Provide exact values (px, rem, hex codes)
Think Mobile-First: Always consider mobile layout first
Check Accessibility: Flag potential issues early
Document Interactions: Don't overlook hover states and animations
Map to Native Components: Prefer platform-native solutions
