{"id":48521143,"url":"https://github.com/madebysan/claude-figma-skills","last_synced_at":"2026-04-07T21:01:32.631Z","repository":{"id":344076700,"uuid":"1176240705","full_name":"madebysan/claude-figma-skills","owner":"madebysan","description":"Claude Code skills for Figma — review designs, act on comments, sync design tokens and more.","archived":false,"fork":false,"pushed_at":"2026-03-13T00:31:25.000Z","size":31,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-13T07:51:54.650Z","etag":null,"topics":["agent-skill","claude-code","claude-skill","design-tokens","figma"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/madebysan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-08T20:01:20.000Z","updated_at":"2026-03-13T00:31:28.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/madebysan/claude-figma-skills","commit_stats":null,"previous_names":["madebysan/claude-figma-skills"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/madebysan/claude-figma-skills","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madebysan%2Fclaude-figma-skills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madebysan%2Fclaude-figma-skills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madebysan%2Fclaude-figma-skills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madebysan%2Fclaude-figma-skills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/madebysan","download_url":"https://codeload.github.com/madebysan/claude-figma-skills/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madebysan%2Fclaude-figma-skills/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31528751,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent-skill","claude-code","claude-skill","design-tokens","figma"],"created_at":"2026-04-07T21:01:04.160Z","updated_at":"2026-04-07T21:01:32.622Z","avatar_url":"https://github.com/madebysan.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eClaude Figma Skills\u003c/h1\u003e\n\u003cp align=\"center\"\u003eA collection of Claude Code skills for Figma — review designs, act on comments, sync design tokens and more.\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003ccode\u003eclaude-code\u003c/code\u003e · \u003ccode\u003eclaude-skill\u003c/code\u003e · \u003ccode\u003efigma\u003c/code\u003e · \u003ccode\u003edesign-tokens\u003c/code\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003eRequires \u003ca href=\"https://docs.anthropic.com/en/docs/claude-code\"\u003eClaude Code\u003c/a\u003e and \u003ca href=\"https://www.figma.com/downloads/\"\u003eFigma Desktop\u003c/a\u003e (any plan)\u003c/p\u003e\n\n## Skills\n\n| Skill | What it does | How to use |\n|---|---|---|\n| **figma-review** | Claude reviews your design and posts actionable feedback as comments pinned to specific elements in Figma. Analyzes hierarchy, spacing, color, and consistency. | `/figma-review` + Figma URL |\n| **figma-autopilot** | You leave comments in Figma describing what to change, Claude reads them, executes the design changes, replies to each comment, and resolves them when done. | `/figma-autopilot` + Figma URL |\n| **figma-fix** | Runs figma-review then figma-autopilot in sequence — Claude reviews the design, presents a plan, and immediately fixes what it finds. Takes a verification screenshot at the end. | `/figma-fix` + Figma URL |\n| **figma-extract** | Claude exports design tokens (colors, spacing, typography, radius), assets, and component specs from Figma into structured code files (CSS, Tailwind, JSON, or markdown). | `/figma-extract` (select element in Figma first) |\n| **figma-import** | Claude scans your codebase for design tokens (colors, spacing, typography, radius, opacity) and pushes them to Figma as organized variable collections. Can also generate a visual documentation page. | `/figma-import` (run from project directory) |\n| **figma-tickets** | Claude reads all comment threads on a Figma page, categorizes them (feedback, question, resolved), and generates structured design tickets saved as a markdown file to your Desktop. | `/figma-tickets` + Figma URL |\n\n## Install\n\n### 1. Copy the skills\n\n```bash\n# Clone the repo\ngit clone https://github.com/madebysan/claude-figma-skills.git\n\n# Copy all skills\ncp -r claude-figma-skills/skills/* ~/.claude/skills/\n\n# Or copy individual skills\ncp -r claude-figma-skills/skills/figma-review ~/.claude/skills/\ncp -r claude-figma-skills/skills/figma-import ~/.claude/skills/\n```\n\nEach skill is a single `SKILL.md` file inside its own folder. Claude Code picks them up automatically — no restart needed.\n\n### 2. Set up dependencies\n\n| Dependency | Required by |\n|---|---|\n| **figma-console MCP** | figma-fix, figma-autopilot, figma-extract, figma-import, figma-tickets |\n| **Figma REST API token** | figma-review, figma-fix, figma-autopilot |\n| **Python 3** | figma-review, figma-fix, figma-autopilot, figma-tickets |\n\n**figma-console MCP** — gives Claude Code read + write access to your Figma files via `localhost:9222`. Works on any Figma plan (free, Starter, Pro) — no Enterprise required.\n\n1. Install the [Figma Console MCP](https://github.com/southleft/figma-console-mcp) plugin in Figma Desktop\n2. Open the Figma plugin (Plugins \u003e Development \u003e Figma Console MCP)\n3. Add the MCP server to your `~/.claude.json` following the [setup instructions](https://github.com/southleft/figma-console-mcp#setup)\n\n**Figma REST API token** — used for reading/posting comments and fetching screenshots:\n\n```bash\n# Add to your ~/.zshrc or ~/.bashrc\nexport FIGMA_ACCESS_TOKEN=\"your-token-here\"\n```\n\nGenerate a token at: Settings \u003e Security \u003e Personal access tokens in Figma.\n\n**Python 3** — used for batch operations (posting comments, parsing JSON). Standard library only, no pip packages. Included with macOS. On Linux: `sudo apt install python3`.\n\n## License\n\n[MIT](LICENSE)\n\n---\n\nMade by [santiagoalonso.com](https://santiagoalonso.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadebysan%2Fclaude-figma-skills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmadebysan%2Fclaude-figma-skills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadebysan%2Fclaude-figma-skills/lists"}