QA Automation

Awesome Figma Skills

Build, redesign, and QA real Figma screens with AI coding agents.

Awesome Figma Skills packages a live Figma MCP backend, production design workflows, reusable agent prompts, and implementation-fidelity QA into one public plugin distribution for AI coding agents.

Use it when you want an agent to do more than call raw Figma tools:

• inspect and edit a live Figma file through figma-mcp-express
• redesign an existing screen into a target design-system library
• turn a PRD into high-fidelity Figma product screens
• keep reusable design memory across libraries and projects
• compare a running app route against a mapped Figma frame

Why This Exists

Raw Figma MCP tools are powerful, but production design work needs a workflow: bounded reads, component discovery, token binding, visual references, reviewer gates, and safe local artifacts. This repository turns those practices into installable plugins and skills.

The default backend is figma-mcp-express. Development-only server names such as figma-mcp-express-dev are not required for normal users.

Quick Start: Codex

Clone the repository, then run one installer:

git clone https://github.com/Wondermove-Inc/awsome-figima-skills.git
cd awsome-figima-skills
./scripts/install.sh

The installer adds this repository as a Codex plugin marketplace, installs the Figma MCP, Figma automation, and design-QA plugins, and activates the reusable Codex subagents used by those workflows.

Start a new Codex thread after installation so the skills, MCP server config, and agents are loaded.

Quick Start: Claude Code

This repository also includes Claude Code plugin manifests. From Claude Code, add the marketplace and install the same three plugins:

/plugin marketplace add Wondermove-Inc/awsome-figima-skills
/plugin install figma-mcp-express@awesome-figma-skills
/plugin install figma-automation@awesome-figma-skills
/plugin install qa-automation@awesome-figma-skills

For non-interactive setup, Claude Code also exposes equivalent CLI marketplace commands:

claude plugin marketplace add Wondermove-Inc/awsome-figima-skills
claude plugin install figma-mcp-express@awesome-figma-skills
claude plugin install figma-automation@awesome-figma-skills
claude plugin install qa-automation@awesome-figma-skills

Figma MCP Setup

Install and run the Figma backend from the Figma MCP Express repository. Keep the Figma Desktop plugin open while an agent is working. Most live Figma workflows require the target file to be open in Figma Desktop with the plugin running.

Figma MCP Express talks directly to the local Figma Desktop file, avoiding official MCP service quotas and keeping high-volume automation responsive.

Other AI Coding Agents

Agents without Codex or Claude Code plugin support can use this repository as a skill-file distribution. Import the relevant SKILL.md files into the agent's own skill or instruction system, keeping each skill's sibling references/, scripts/, assets/, and agents/ folders with it.

Start with the router skill for broad Figma work, then add the workflow skills you need:

• Figma router
• Figma redesign
• Figma product pipeline
• Figma playbook memory
• Figma visual researcher
• Design QA

Core Workflows

Workflow	Use it for	What makes it production-oriented
figma-redesign	Rebuild one existing Figma screen into a target library.	Inventory-first rebuild, component-key checks, mechanical pre-gate, two-verifier review.
figma-product	Turn a PRD into a high-fidelity Figma product.	PRD parsing, direction, foundation, spec, canon screen, gated build fan-out.
figma-playbook	Load, apply, reflect, and consolidate design memory.	Library/project/global memory stores with proposal-based writes.
figma-visual-researcher	Fetch current UI references and assets.	Structured request validation, source-year constraints, ranked candidates.
design-qa	Compare a live app route against Figma.	Screen mapping, Playwright snapshots, bounded Figma reads, structured reports.

Codex example prompts: