figma-analyze

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

1. 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

2. Component Inventory — Identify:

   • Header/navigation patterns
   • Footer layout
   • Content sections (hero, features, testimonials, CTA, etc.)
   • Card/grid patterns
   • Button styles and states
   • Form elements

3. Layout Structure — Map:

   • Page templates (home, about, contact, blog, single post)
   • Content width and breakpoints
   • Grid/column structures
   • Section ordering and hierarchy

4. 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.