How does the UX expert agent assist in the design process?

The agent researches real-world design references and proposes multiple directions with rationales, reference URLs, and ASCII mockups to guide your project's aesthetic.

Can I use existing Figma files as input for my code?

Yes, Workflow D allows you to extract design context, screenshots, and metadata from Figma URLs to generate technical specs, implementation plans, or direct code.

What is the Figma UI Designer skill?

It is a specialized capability for Claude Code that automates UI design tasks, ranging from initial UX research to the generation of Figma-native mockups.

Does it support responsive and dark mode designs?

Yes, the skill includes built-in tasks for capturing multiple variants including Desktop, Mobile, Light Mode, and Dark Mode to ensure complete design coverage.

How do I capture a running application into Figma?

Workflow A allows you to apply temporary code changes, serve your app locally, and use the Figma MCP tool to capture the rendered UI directly into a Figma file.

Figma UI Designer

Name: Figma UI Designer
Author: abhattacherjee

byabhattacherjee

•

Herramientas de Diseño

Orchestrates end-to-end UI/UX design workflows by brainstorming with specialized UX agents and generating or extracting Figma-native mockups.

Figma UI Designer is a comprehensive Claude Code skill designed to bridge the gap between conceptual design and production code. It leverages a specialized UX expert agent to research real-world references and propose data-driven design directions before generating Figma-native mockups. Whether you are starting a greenfield project, enhancing an existing feature, or translating existing Figma designs into actionable implementation plans, this skill automates the process of capturing app states, managing design variants, and extracting design tokens for seamless developer handoff.

Características Principales

01Bidirectional workflow for extracting existing Figma designs into implementation specs and code.

02Automated Figma mockup generation from running applications or standalone HTML prototypes.

03Specialized UX research agent for real-world design benchmarking and reference gathering.

04Multi-variant support for desktop/mobile and light/dark mode captures with progress tracking.

051 GitHub stars

06Integrated design-to-token extraction for maintaining visual consistency across CSS and Figma.

Casos de Uso

01Generating high-fidelity Figma mockups for new features within an existing codebase.

02Converting shared Figma URLs into technical story specs, implementation plans, and production code.

03Creating interactive design prototypes for greenfield projects using HTML-to-Figma capture workflows.

Características Principales

01Bidirectional workflow for extracting existing Figma designs into implementation specs and code.

02Automated Figma mockup generation from running applications or standalone HTML prototypes.

03Specialized UX research agent for real-world design benchmarking and reference gathering.

04Multi-variant support for desktop/mobile and light/dark mode captures with progress tracking.

051 GitHub stars

06Integrated design-to-token extraction for maintaining visual consistency across CSS and Figma.

Casos de Uso

01Generating high-fidelity Figma mockups for new features within an existing codebase.

02Converting shared Figma URLs into technical story specs, implementation plans, and production code.

03Creating interactive design prototypes for greenfield projects using HTML-to-Figma capture workflows.