| name | figma-analyze |
| description | Analyze a Figma design file and extract design tokens, component structure, and layout hierarchy for WordPress theme generation |
| argument-hint | <figma-file-url-or-path> |
| allowed-tools | Read, Glob, Grep, Bash, WebFetch |
Figma Design Analysis
Analyze the provided Figma design and extract a structured specification for WordPress theme generation.
Input
$ARGUMENTS
Analysis Steps
-
Design Tokens — Extract:
- Color palette (primary, secondary, accent, neutrals) with hex values
- Typography scale (font families, sizes, weights, line heights)
- Spacing scale (padding, margins, gaps)
- Border radii, shadows, and other effects
-
Component Inventory — Identify:
- Header/navigation patterns
- Footer layout
- Content sections (hero, features, testimonials, CTA, etc.)
- Card/grid patterns
- Button styles and states
- Form elements
-
Layout Structure — Map:
- Page templates (home, about, contact, blog, single post)
- Content width and breakpoints
- Grid/column structures
- Section ordering and hierarchy
-
Asset Requirements — List:
- Images (hero backgrounds, logos, icons)
- Custom fonts (Google Fonts or local)
- SVG icons or icon sets
Output Format
Write the analysis to docs/design-spec.json as a structured JSON document with sections for tokens, components, templates, and assets. Also write a human-readable summary to docs/design-spec.md.