Skip to content
UXClaim
Design Ops

Figma Refine

Context-aware Figma design refinement using Claude Code with async ReviewNote workflows and AI-powered improvements.

View source More in Design Ops

What it does

Figma Refine is a Claude Code skill that intelligently refines Figma designs by understanding your project context (brand, users, competitors, design principles) and processing design review feedback through ReviewNote components.

How it works

The skill operates in six steps:

  1. Context Loading — Reads your designs/ folder to build a Design Personality, or asks you questions if unavailable
  2. Deep Scan — Maps your entire Figma file structure and captures before screenshots
  3. Classification — Categorizes ReviewNotes as Level A (property fixes) or Level B (structural improvements)
  4. Processing — Applies Level A fixes directly via Figma MCP; generates Level B improvements via AIDesigner with your approval
  5. Design Change Report — Analyzes gaps between Figma and your design system, recommends updates
  6. Verification — Compares before/after across 3 screenshot layers (component, frame, page) using 2-axis quality checks

Use cases

  • Async design reviews — Leave ReviewNote comments instead of live feedback
  • Consistency enforcement — Auto-fix deviations from brand guidelines
  • Design-to-system sync — Track how Figma diverges from your design system
  • AI-powered iterations — Explore structural improvements without manual redrawing

Who benefits

Design leads, product designers, and design systems teams who want faster, context-aware design refinement with full traceability.

Frequently asked questions

How do I install figma-refine?
Clone the repository to your Claude skills folder: `git clone https://github.com/fideguch/figma-refine.git ~/.claude/skills/figma-refine`. You'll need Figma MCP connected and optionally AIDesigner MCP for Level B improvements.
What's the difference between Level A and Level B fixes?
Level A handles property changes (colors, text, spacing, opacity) applied directly to Figma. Level B handles structural improvements (layout changes, abstract instructions like 'make it modern') generated by AIDesigner, requiring your approval before applying.
What are ReviewNote components?
ReviewNote is a special component you place near design elements to leave modification instructions. Fill the Content field with your change request and optionally set TargetHint to the element's frame/node name for higher accuracy.
Do I need a designs/ folder to use figma-refine?
No. If you don't have a `designs/` folder from `/requirements_designer`, the skill will ask you questions to manually build your Design Personality, capturing your brand, users, competitors, and design principles.
What modifications can figma-refine apply automatically?
Automatic fixes (M-001 to M-007) include: color changes, text/font modifications, size adjustments, border radius, spacing/padding, visibility toggling, and opacity changes. Node addition/deletion, image swaps, and effects require manual work.
How does Design Change Report work?
After refining designs, the skill analyzes gaps between your updated Figma file and your design system (`designs/`). It reports deviations and recommends updates, but never writes to your design system—you or `/requirements_designer enhance` handle actual updates.
Can figma-refine edit my design system files?
No. The skill only reads `designs/` to understand context and generates recommendations. Writing to your design system is prohibited by design—changes require manual review and `/requirements_designer enhance` or your manual action.
What MCPs do I need for figma-refine?
Required: Figma MCP (for reading/editing designs). Optional: AIDesigner MCP (for Level B structural improvements). Both must be connected in Claude Code before triggering the skill.

Glossary

ReviewNote
A special Figma component used to annotate design elements with modification instructions. Placed near target elements, it contains a Content field with the change request and optional TargetHint for accuracy.
Design Personality
A structured understanding of your project built from the `designs/` folder, capturing brand guidelines, target users, competitors, and domain-specific terminology to inform context-aware refinements.
Level A/B Classification
A categorization system: Level A covers simple property modifications (colors, text, spacing); Level B covers structural improvements requiring AI-powered design generation and user approval.
Design Change Report
An analysis output showing gaps between your refined Figma designs and the design system (`designs/` folder), with recommendations for alignment without writing changes automatically.
3-Layer Verification
Screenshot validation across component, frame, and page levels, evaluated on two axes: design perspective (correctness) and user perspective (usability/aesthetics).

More in Design Ops

All →
Design Ops

AI Atelie

Local-first, open-source design tool. Bring your own AI agent (Claude Code, Kimi, Codex). Generate designs as HTML/JSX/CSS folders with instant tweaks, inspe...

aiatelie
Design Ops

AI Toolbox

Claude Code plugin with 13+ skills for code review, accessibility audits, design systems, and end-to-end feature planning backed by ClickUp.

Matisantillan11
Design Ops

Architect Playbook

Self-improving Claude Code audit skills for TypeScript/React codebases covering architecture, security, accessibility, performance, testing, and more.

BenSheridanEdwards
Design Ops

Chrome DevTools Skill

Browser debugging, automation, performance analysis, accessibility auditing, and LCP optimization for Claude Code without MCP server setup.