Can this skill capture my running application into Figma?

Yes, Workflow A allows you to apply temporary changes to your running app and capture the rendered state directly into Figma using the Figma MCP tools.

What is the UX Expert sub-agent?

It is a specialized agent that researches real-world design references based on your project context to provide structured design directions, including ASCII mockups and accessibility notes, before you start building.

How does it help with existing Figma files?

By providing a Figma URL, the skill can extract design context, screenshots, and metadata to help you write story specs, create implementation plans, or generate code matching the design.

Does it support responsive design and dark mode?

Absolutely. The skill includes automated task lists for capturing multiple variants, including Desktop Light/Dark and Mobile Light/Dark modes.

Figma UI Designer

Name: Figma UI Designer
Author: abhattacherjee

byabhattacherjee

•

Herramientas de Diseño

Bridges the gap between UI/UX design and development by generating, capturing, and extracting Figma mockups using specialized research agents.

Figma UI Designer is a comprehensive skill for Claude Code designed to automate the design-to-development lifecycle. It leverages a specialized UX sub-agent to research real-world references and propose grounded aesthetic directions before generating Figma-native mockups. Whether you are starting a greenfield project, enhancing an existing feature, or translating complex Figma URLs into technical specifications and implementation plans, this skill provides a structured workflow for capturing snapshots, managing design tokens, and ensuring pixel-perfect alignment between code and design.

Características Principales

01Automated capture of running applications or HTML prototypes directly into Figma files.

021 GitHub stars

03AI-driven UX research agent that proposes 2-4 research-backed design directions.

04Extraction of existing Figma designs to generate technical specs, implementation plans, and code.

05Design token extraction and mapping to ensure consistency with project-specific CSS variables.

06Structured task tracking for multi-variant designs including Mobile, Desktop, Light, and Dark modes.

Casos de Uso

01Converting a shared Figma design URL into actionable implementation plans and component code.

02Generating research-backed UI mockups and design tokens for a brand new project.

03Creating documentation for existing features by capturing the running app state into a Figma file.

Características Principales

01Automated capture of running applications or HTML prototypes directly into Figma files.

021 GitHub stars

03AI-driven UX research agent that proposes 2-4 research-backed design directions.

04Extraction of existing Figma designs to generate technical specs, implementation plans, and code.

05Design token extraction and mapping to ensure consistency with project-specific CSS variables.

06Structured task tracking for multi-variant designs including Mobile, Desktop, Light, and Dark modes.

Casos de Uso

01Converting a shared Figma design URL into actionable implementation plans and component code.

02Generating research-backed UI mockups and design tokens for a brand new project.

03Creating documentation for existing features by capturing the running app state into a Figma file.