Skills
.Work. You
Rest

design-analyst

Community

Generate component briefs from Figma.

Design & Creative#automation#design system#figma#design tokens#component specification#developer handoff
Authorkaelig
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the tedious and error-prone process of translating complex Figma designs into structured, actionable component specifications for development.

Core Features & Use Cases

  • Automated Spec Extraction: Extracts detailed component specifications, including variants, states, design tokens, and responsive behavior, directly from Figma.
  • Completeness Auditing: Validates that all necessary design details are present and flags any gaps for human review.
  • Component Brief Generation: Produces a standardized brief.md file that serves as a single source of truth for developers.
  • Use Case: When a new UI component is designed in Figma, this Skill can be used to automatically generate its technical specification, ensuring consistency and reducing the time spent on documentation.

Quick Start

Use the design analyst skill to process the Figma link https://www.figma.com/design/abc123?node-id=1:42.

Dependency Matrix

Required Modules

None required

Components

scriptsreferencesassets

💻 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-analyst
Download link: https://github.com/kaelig/react-craft/archive/main.zip#design-analyst

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.