kanopi/design-to-drupal-paragraph

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
   • Accessibility attributes
4. Generate SCSS — modules/custom/{module}/scss/_{paragraph_name}.scss
   • Mobile-first (base → 768px → 1024px)
   • Drupal class: .paragraph--type--{paragraph_name} as root
   • WCAG AA compliant
5. Provide manual import instructions — Step-by-step Drush commands

Tier 2 — Claude Code Enhanced

When running in Claude Code with Task() available:

Step 2: Spawn design-specialist for code generation:

Agent(subagent_type="cms-cultivator:design-specialist:design-specialist",
      prompt="Create a Drupal paragraph type from the provided design.

## Design Reference
{design source - Figma URL or screenshot path}

## Paragraph Details
- Paragraph name: {paragraph-name} (machine name: lowercase, underscores)
- Module: {module-name or 'custom_paragraphs'}

## Process
1. Analyze design using design-analyzer skill
   - Extract colors, typography, spacing, layout
   - Map to Drupal field types
2. Check Drupal MCP availability
   - If available: create paragraph type via MCP
   - If not: generate YAML configuration files
3. Generate Twig template (semantic HTML, BEM classes)
4. Create test node (if MCP available) or provide manual instructions

## Output Required
Return the structured report including:
- YAML and template file paths
- SCSS path section (component name, root class, file path)
- Design specifications section (colors, typography, spacing)
- Test node URL (or instructions) and screenshots directory")

Step 3: Spawn responsive-styling-specialist using the SCSS path and design specs from Step 2 output:

Agent(subagent_type="cms-cultivator:responsive-styling-specialist:responsive-styling-specialist",
      prompt="Generate mobile-first responsive SCSS for the {paragraph_name} Drupal paragraph.

Component: {component from design-specialist output}
Root class: {root class from design-specialist output}
File path: {SCSS file path from design-specialist output}

Design specifications:
{colors, typography, spacing from design-specialist output}

Requirements:
- Mobile-first (base → 768px → 1024px)
- WCAG AA color contrast (4.5:1 normal text, 3:1 large text)
- Touch-friendly targets (44px minimum)
- Proper focus indicators (2px outline)
- Reduced motion support
- Use root class as BEM parent")

Step 4: Spawn browser-validator-specialist using the test node URL from Step 2 output:

Agent(subagent_type="cms-cultivator:browser-validator-specialist:browser-validator-specialist",
      prompt="Validate the Drupal paragraph type implementation.

Test URL: {test node URL from design-specialist output, or skip if manual creation required}
Design reference: {original design source}

Validation requirements:
- Test responsive breakpoints: 320px, 768px, 1024px+
- Capture screenshots at each breakpoint
- Check WCAG AA accessibility
- Validate interactions
- Check JavaScript console
- Compare with original design
- Generate detailed technical report

Save screenshots to: {screenshots dir from design-specialist output}")

Step 5: Report — present the paragraph type file paths, SCSS path, and browser validation results to the user.

Field Types

| Design Element | Drupal Field Type | |----------------|-------------------| | Short text, headings | Text (plain) | | Body content, descriptions | Text (formatted, long) | | CTAs, buttons, URLs | Link | | Images, videos | Entity reference (Media) | | Toggle features | Boolean | | Select dropdowns | List (text) | | Categories, tags | Entity reference (Taxonomy) |

What Gets Created

With Drupal MCP (Automated)

• Paragraph type created via MCP API
• Fields configured automatically
• Test node created
• YAML config files generated as reference

Without Drupal MCP (Manual)

• YAML configuration files in modules/custom/{module}/config/install/
• Module info file {module}.info.yml
• Twig template
• SCSS stylesheet
• Detailed step-by-step import instructions

Manual Import Instructions

# Enable module
drush en {module} -y

# Import configuration
drush config:import --partial --source=modules/custom/{module}/config/install

# Clear cache
drush cr

# Verify
drush cget paragraphs.paragraphs_type.{paragraph_name}

Generated YAML Example

# paragraphs.paragraph_type.slideshow.yml
langcode: en
status: true
id: slideshow
label: 'Slideshow'
description: 'Image slideshow with captions'

Kanopi Projects

ddev drush en {module} -y
ddev drush cim --partial --source=modules/custom/{module}/config/install
ddev drush cr
ddev theme-build

Related Skills

• design-analyzer — Extracts technical specs from designs
• responsive-styling — Generates mobile-first CSS/SCSS
• browser-validator — Validates implementation in browser
• design-to-wp-block — WordPress equivalent