skills.rest
kanopi
kanopiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-analyzer

Extract design specifications from Figma URLs, screenshots, or mockups for WordPress blocks or Drupal paragraphs.

16|4|Updated Oct 13, 2025
Search Tags:#typography#accessibility#figma#spacing#design-analysis#wordpress-blocks#drupal-paragraphs
One-click install
npx skills add https://github.com/kanopi/cms-cultivator --skill design-analyzer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-analyzer
Source: https://github.com/kanopi/cms-cultivator/tree/main/skills/design-analyzer
Command: npx skills add https://github.com/kanopi/cms-cultivator --skill design-analyzer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automatically extract precise design specifications from design references (Figma URLs, screenshots, and mockups) to drive CMS implementation and reduce handoff guesswork.

Core Features & Use Cases

  • Extract design tokens: colors, typography, spacing, layout, and responsive behavior.
  • Map design specs to CMS artifacts: WordPress blocks or Drupal paragraphs, with exact values and accessibility considerations.
  • Real-world scenario: convert a designer mockup into a pixel-accurate WordPress block pattern with token references and responsive rules.

Quick Start

Provide a design reference (Figma URL or image) and I will extract exact colors, typography, spacing, and layout specs for WordPress blocks or Drupal fields.

Frequently Asked Questions about design-analyzer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract design specs from a Figma mockup for WordPress blocks?▼

Extract design specs from a Figma mockup for WordPress blocks by providing the Figma URL to retrieve exact colors, typography, spacing, and accessibility requirements mapped to block patterns.

Can I map Figma design tokens to Drupal paragraphs?▼

Yes, you can map Figma design tokens to Drupal paragraphs by processing screenshots or mockups to generate explicit values and mapping guidance for pixel-perfect CMS implementation.

What design tokens can I extract from design references for CMS implementation?▼

You can extract colors, typography, spacing, layout, responsive breakpoints, and accessibility requirements from design references to drive precise WordPress or Drupal implementations.

How do I get pixel-perfect results when converting mockups to CMS fields?▼

Get pixel-perfect results converting mockups to CMS fields by extracting explicit design values and responsive rules, then applying them directly to WordPress blocks or Drupal paragraphs.

Do I need a Figma URL to extract accessibility requirements and spacing specs?▼

No, you do not need a Figma URL to extract accessibility requirements and spacing specs; providing a screenshot or mockup image is sufficient to generate exact design token values.

What's the best way to reduce design handoff guesswork for Drupal paragraphs?▼

Reduce design handoff guesswork for Drupal paragraphs by automatically extracting precise design specifications and responsive behavior from mockups to output explicit values and mapping guidance.

Related Skills

Explore More Design & Creative Skills→
matteotittamatteotitta
29

figma-to-prototype

Convert Figma design mockups into HTML or React prototypes.

Community
Advanced
TravisLeeeeeeTravisLeeeeee
110

CMS Developer

Plan and execute code-first Drupal and WordPress CMS implementations.

Community
Advanced
shawn-sandyshawn-sandy

figma-design-tokens

Extract design tokens from Figma and generate CSS, SCSS, JSON, TypeScript, and DTCG files.

Community
Advanced
vultisigvultisig
19

figma

Implement React components from Figma designs using MCP inspection.

Official
Advanced