Figma to Code Skills

What it does

The Figma-to-code handoff is where design quality disappears. The solution: ten Claude Code skills that turn a Figma design system into a production React + Tailwind repo with typed props, accessibility, and tokens. Tested on a live fintech build.

Contribute to Properly-DEV/figma-to-code-skills development by creating an account on GitHub.

Ten Claude Code skills that turn a Figma design system into production-ready React + Tailwind code. Designer-led, AI-powered. Status: MVP. Shipped to prove the workflow end-to-end on real projects. Names, outputs, and references may change. Expect sharp edges. A workflow, not a plugin. Each skill is a standalone instruction set that Claude Code follows to handle one part of the design-to-code pipeline: setup, component extraction, QA, preview, docs, handoff. Together they replace days of manual frontend work with an afternoon of orchestration. git clone https://github.com/Properly-DEV/figma-to-code-skills.git cp -r figma-to-code-skills/ds- * -tw ~ /.claude/skills/ Restart Claude Code. The…from github.com

• 
  Codejet2023 · codejet.ai · ▲402

  Figma to quality React code

• IV
  I've made a Figma plugin that converts design to HTML with TailwindCSS2021 · figma.com · ▲43
• 
  Figma to Tailwind CSS2023 · figma-to-tailwind-css.com · ▲150

  Convert Figma designs into Tailwind CSS code in 1 click

• 
  Ant Design System for Figma2019 · antforfigma.com · ▲315

  A large library of 2100+ handcrafted UI components

• 
  Superflex 2.02025 · ▲311

  Figma to production-ready code in seconds

• 
  Phase2025 · phase.com · ▲139

  Create interactive Figma prototypes with real code export

• 
  Spira Maxima▲578

  Video model that turns script into viral social media videos

  AI · 17d ago · spira.ai

• 
  Rill Browser▲540

  The browser where Claude Code and Codex work beside you

  AI · 17d ago · rill.love

• 
  Germany's new sovereign AI model Kolibri▲424

  Kolibri is Aleph Alpha

  AI · 19d ago · tej.as

• 
  Giving Opus 5.5 a simulated paint canvas▲392

  Paintings by AI models: programs run through a simulation of oil paint.

  AI · 20d ago · stillwet.art

• 
  Onepin▲384

  AI voiceover with every name, price and date said right

  AI · 30d ago · onepin.ai

• 
  PixVerse R2▲381

  A real-time world model you can explore and change

  AI · 29d ago · world.pixverse.video

• 
  Brew ▲900

  Like Claude design for email marketing

  AI · May 2026 · brew.new

• 
  Kilo Code for VS Code▲896

  Parallel agents, diff reviewer, and multi-model comparisons

  Dev tools · May 2026 · kilo.ai

• 
  StoreClaw▲806

  Grow your store profits with agents that know how to sell

  AI · May 2026 · storeclaw.ai

• 
  PollyReach▲795

  Give your agent a real number and voice to make calls.

  AI · May 2026 · pollyreach.ai

• 
  Needle: We Distilled Gemini Tool Calling into a 26M Model▲776

  Hey HN, Henry here from Cactus. We open-sourced Needle, a 26M parameter function-calling (tool use) model. It runs at 6000 tok/s prefill and 1200 tok/s decode on consumer devices. We were always frustrated by the little effort made towards building agentic models that run on budget phones, so we conducted investigations that led to an observation: agentic experiences are built upon tool calling, and massive models are overkill for it. Tool calling is fundamentally retrieval-and-assembly (match query to tool name, extract argument values, emit JSON), not reasoning. Cross-attention…

  Life & fun · May 2026 · github.com

• 
  Files.md – Open-source alternative to Obsidian▲730

  🌱 Private, quiet space for thinking. Simple app for .md files. - zakirullin/files.md

  Dev tools · May 2026 · github.com