design-to-wp-block

name	design-to-wp-block
description	Create WordPress block patterns from Figma designs or screenshots using the design-specialist agent. Auto-activates when user provides a Figma URL or design mockup and asks to create a WordPress block pattern, component, or section. Invoke when user says "create a WordPress block from this design", "convert this Figma to a block pattern", or provides a design reference with WordPress context.

Design to WordPress Block

Create production-ready WordPress block patterns from Figma designs or screenshots using the design-specialist agent.

Usage

• "Create a WordPress block pattern from this Figma design: [URL]"
• "Convert this mockup to a WordPress block pattern: [screenshot path]"
• "Build a hero-cta block pattern from this design for the kanopi-base theme"

Arguments: [design-source] [pattern-name] [theme-namespace]

Environment Detection

Tier 1 — Portable (Claude Desktop, Codex, any environment)

When Task() is unavailable but design data can be accessed:

1. Analyze design — If screenshot provided, use Read to view image and extract:
   • Colors (hex codes), typography (fonts, sizes, weights), spacing values
   • Layout structure and component hierarchy
   • Responsive behavior requirements
2. Generate block pattern directly using Write:
   • Create wp-content/themes/{theme}/patterns/{pattern-slug}.php with proper WordPress pattern headers
   • Use native WordPress blocks only (Group, Cover, Heading, Paragraph, Buttons, Image, Columns, etc.)
   • Include i18n functions (esc_html_e(), esc_attr_e())
3. Generate SCSS — Create companion stylesheet at wp-content/themes/{theme}/assets/styles/scss/patterns/_{pattern-slug}.scss