barkleesanders

Figma Design Sync — Design agent for Claude Code

Design community

Use this agent when you need to synchronize a web implementation with its Figma design by automatically detecting and fixing visual differences.

How to install Figma Design Sync

Installs to ~/.claude/agents/barkleesanders-claude-code-starter-figma-design-sync.md

Terminal

mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/barkleesanders/claude-code-starter/HEAD/agents/figma-design-sync.md -o ~/.claude/agents/barkleesanders-claude-code-starter-figma-design-sync.md

Restart Claude Code, or start a new session, for it to be picked up.

What Figma Design Sync does

name: figma-design-sync description: "Use this agent when you need to synchronize a web implementation with its Figma design by automatically detecting and fixing visual differences. This agent should be used iteratively until the implementation matches the design.\\n\\n\\nContext: User has just implemented a new component and wants to ensure it matches the Figma design.\\nuser: \\\"I've just finished implementing the hero section component. Can you check if it matches the Figma des

Alternatives in Design

Opcode Web Server Design — This document describes the implementation of Opcode's web server mode, which allows access to Claude Code fro 21k ★
Frontend Designer — Use this agent when you need to convert design mockups, wireframes, or visual concepts into detailed technical 5.5k ★
React Figma UI Engineer 501 ★