design-to-drupal-paragraph

name	design-to-drupal-paragraph
description	Create Drupal paragraph types from Figma designs or screenshots using the design-specialist agent. Auto-activates when user provides a design reference and asks to create a Drupal paragraph type, content component, or layout section. Invoke when user says "create a Drupal paragraph from this design", "convert this mockup to a paragraph type", or provides a design with Drupal context.

Design to Drupal Paragraph

Create production-ready Drupal paragraph types from Figma designs or screenshots using the design-specialist agent.

Usage

• "Create a Drupal paragraph type from this design: [screenshot path]"
• "Build a slideshow paragraph from this Figma: [URL]"
• "Convert this mockup to a Drupal paragraph type called testimonial"

Arguments: [design-source] [paragraph-name] [module-name]

Environment Detection

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

When Task() is unavailable:

1. Analyze design — If screenshot provided, use Read to view image and extract:
   • Colors, typography, spacing, layout structure
   • Content areas → map to Drupal field types
2. Generate configuration files directly using Write:
   • paragraphs.paragraph_type.{paragraph_name}.yml
   • field.storage.paragraph.field_*.yml (per field)
   • field.field.paragraph.{paragraph_name}.field_*.yml (per field)
   • All saved to modules/custom/{module}/config/install/
3. Generate Twig template — modules/custom/{module}/templates/paragraph--{paragraph_name}.html.twig
   • Semantic HTML with BEM classes
   • Proper Drupal template variables