Skills
.Work. You
Rest

design-analyzer

Official

Extract design specs for CMS implementations.

Design & Creative#typography#accessibility#figma#spacing#design-analysis#wordpress-blocks#drupal-paragraphs
Authorkanopi
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-analyzer
Download link: https://github.com/kanopi/cms-cultivator/archive/main.zip#design-analyzer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.