skills.rest
abhattacherjee
abhattacherjeeCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

figma-ui-designer

Integrate with Figma to generate design specs, plans, or code.

1|2|Updated Feb 24, 2026
Search Tags:#figma#prototyping#component generation#ui design#design to code#ux research
One-click install
npx skills add https://github.com/abhattacherjee/claude-code-skills --skill figma-ui-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-ui-designer
Source: https://github.com/abhattacherjee/claude-code-skills/tree/main/figma-ui-designer
Command: npx skills add https://github.com/abhattacherjee/claude-code-skills --skill figma-ui-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the UI design process by integrating directly with Figma, enabling interactive design, expert brainstorming, and seamless design-to-code workflows.

Core Features & Use Cases

  • Interactive Design & Brainstorming: Leverages a UX expert agent to research real-world references and propose grounded design directions.
  • Design-to-Code Bridging: Extracts design context from Figma to generate specs, plans, or implementation code.
  • Workflow Automation: Supports capturing running apps, designing new projects, enhancing existing features, and using Figma designs as input.
  • Use Case: You need to design a new user dashboard. This Skill will help you brainstorm aesthetic directions with an AI UX expert, capture the design into Figma, and then generate the necessary code structure.

Quick Start

Use the figma-ui-designer skill to start a new project design by brainstorming aesthetic options with the UX expert agent.

Frequently Asked Questions about figma-ui-designer

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

FAQPage Schema
How do I convert Figma designs to code?▼

To convert Figma designs to code, this Skill extracts design context and tokens from Figma files to generate actionable specifications, implementation plans, or code structure for your UI components.

Can I use AI for UX research and design brainstorming?▼

You can use AI for UX research and design brainstorming by leveraging a specialized UX expert agent that researches real-world references to propose grounded aesthetic directions for your UI.

What is the best way to capture and enhance existing UI features in Figma?▼

The best way to capture and enhance existing UI features in Figma is by using workflow automation to capture running applications, extract design context, and generate modifications or new design components.

Does this Figma integration require any specific dependencies?▼

This Figma integration requires no external dependencies, operating independently with internal scripts and references to perform design token extraction and context retrieval.

How do I extract design tokens from Figma for UI prototyping?▼

To extract design tokens from Figma for UI prototyping, the Skill utilizes specialized scripts and agents to pull context directly from your Figma designs, creating actionable specifications for development.

Related Skills

Explore More Design & Creative Skills→
kireevkit15-syskireevkit15-sys

shape

Run a structured discovery interview and generate a design brief.

Community
Advanced
OpenElementsLabsOpenElementsLabs

implement-design

Translate Figma designs into UI code using design tokens and validation.

Official
Advanced
MaxKlat29MaxKlat29

skills/design-system

Define, validate, and implement design tokens and component styles for web projects.

Community
Advanced
pawan0631pawan0631

figma-implement-design

Convert Figma design specifications into production-ready UI code.

Community
Advanced