“Some people don’t like change, but you need to embrace change if the alternative is disaster.” – Elon Musk.
Gui Seiz (designer) and Alex Kern (engineer) from Figma show how to pull a live interface from production, staging, or localhost into Figma, turn it into editable design frames, explore variations collaboratively, and push changes back into code using Claude Code and MCPs—creating a continuous design ↔ code loop.
Biggest takeaways :
The design handoff is dead—replaced by continuous sync. Instead of designers creating comprehensive design packages with every state documented, AI enables bidirectional flow between Figma and code. Pull production code into Figma to see what actually exists, make changes in Figma, then push those changes directly back to code. No more version-final-final-v3.
Direct manipulation still beats prompting for precision. While AI can generate designs from prompts, dragging elements around in Figma remains the gold standard for fine-tuning. As Gui notes, “No one wants to prompt for the exact hex code or shade of yellow”—it’s just easier to use the color picker and eyeball it.
Use Figma’s MCP to keep design files current with production. The biggest problem in design-code workflows is drift—production gets ahead of Figma, or Figma contains dreams that never shipped. With MCP, you can programmatically pull any production state into Figma, ensuring that designers always work from what actually exists.
Turn your engineering wiki into executable skills. Every team has that onboarding page : “This is what you do before pushing a PR.” Alex built a /ship skill that automatically runs pre-flight checks, pushes to Git, monitors CI, and even fixes minor lint issues—up to five times with a one-hour timeout. Take every SOP and make it a skill.
Structure your codebase for AI assistance. Alex spends 20% to 30% of his time optimizing code structure so AI can accomplish more with less. This isn’t about writing better code for humans ; it’s about making your codebase more legible to AI agents so each prompt delivers better results.
Detailed workflow walkthroughs from this subject :
How Figma’s Team Syncs Design and Code with Claude Code and Codex : https://www.chatprd.ai/how-i-ai/how-figma-team-syncs-design-and-code-with-claude-code-and-codex
Automate Your Pre-Merge PR Checklist with a Custom AI `/ship` Skill : https://www.chatprd.ai/how-i-ai/workflows/automate-your-pre-merge-pr-checklist-with-a-custom-ai-ship-skill
Automate Design Documentation by Exporting All Component States from Code to Figma : https://www.chatprd.ai/how-i-ai/workflows/automate-design-documentation-by-exporting-all-component-states-from-code-to-figma
Create a Bidirectional Sync Between Production Code and Figma Designs with AI : https://www.chatprd.ai/how-i-ai/workflows/create-a-bidirectional-sync-between-production-code-and-figma-designs-with-ai.
