Skip to main content
Original: Lenny Rachitsky · 16/03/2026

​
Summary

This article discusses the integration of AI in design and development workflows, featuring insights from Figma and LinkedIn experts on enhancing collaboration and productivity.

​
Key Insights

“The design handoff is dead replaced by continuous sync.” — Discussing the evolution of design workflows with AI.
“Create dueling AI agents to build better code.” — Daniel Roth on using AI agents for code generation and review.
“Every time I’m working with Claude, I’m saying, Write it into a file.” — Daniel Roth on the importance of documentation in his workflow.

​
Topics

​
Full Article

From Figma to Claude Code and backBrought to you by OptimizelyYour AI agent orchestration platform for marketing and digital teamsGui 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 MCPscreating a continuous design code loop.Listen now on YouTube | Spotify | Apple PodcastsBiggest takeaways:The design handoff is deadreplaced 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 yellowits just easier to use the color picker and eyeball it.Use Figmas MCP to keep design files current with production. The biggest problem in design-code workflows is driftproduction 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 issuesup 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 isnt about writing better code for humans; its about making your codebase more legible to AI agents so each prompt delivers better results.Detailed workflow walkthroughs from this episode:How Figmas 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-codexAutomate 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-skillAutomate 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-figmaCreate 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-aiFrom journalist to iOS developer: How LinkedIns editor builds with Claude CodeBrought to you by: WorkOSMake your app enterprise-ready todayVantaAutomate compliance and simplify securityDaniel Roth (Editor in Chief and VP of Content Development at LinkedIn) shares how he builds and ships iOS apps to the App Store without writing code. He walks through the workflow he uses with Claude Codeincluding a dual-agent system where one AI writes code and another reviews italong with how he plans features, manages development with branches, and turns ideas into working apps.Listen now on YouTube | Spotify | Apple PodcastsBiggest takeaways:Create dueling AI agents to build better code. Daniel uses Bob the Builder to generate code and Ray the Reviewer to critique it for security and architecture issues. This two-agent system creates checks and balances similar to how engineering teams work, with Bob focusing on implementation and Ray ensuring quality. The friction between copying plans between agents also helps Daniel learn more about the code being generated.Use AI to prevent dropping the ball at work. Daniels most valuable AI workflow isnt for codingits for managing his responsibilities as a leader of 400 people. He ends each day by asking Copilot, What did I drop the ball on? The AI scans his emails, Teams messages, and documents to identify unanswered messages and pending tasks. This 30-minute evening routine helps him wrap up loose ends before leaving work.Build personalized apps that solve your own problems first. Daniel created Commutely to solve his specific problem of knowing whether to run for the New York subway. As he explains, It was a perfect product-market fit because I was the entire product.Keep a running feature tracker with AI-powered prioritization. Daniel maintains a Claude chat that tracks all feature ideas with estimated build time and potential impact. His prompt instructs Claude to keep track of ideas and offer guidance: time estimate to build, estimated back-and-forth hours, potential impact score on 13 scales for customer happiness and growth impact. This creates a prioritized backlog he can pull from whenever he has time to build.Document everything in Markdown files. Daniel saves all AI conversations as Markdown files, explaining, Every time Im working with Claude, Im saying, Write it into a file. Log everything. This solves two problems: Claudes limited context window and his own memory limitations when returning to projects after breaks. This documentation habit creates a knowledge repository he can reference later.Detailed workflow walkthroughs from this episode:How I AI: Daniel Roths Dueling Agent Workflow for Building iOS Apps: https://www.chatprd.ai/how-i-ai/daniel-roth-dueling-agent-workflow-for-building-ios-appsBuild iOS Apps with a Dueling AI Agent Workflow: https://www.chatprd.ai/how-i-ai/workflows/build-ios-apps-with-a-dueling-ai-agent-workflowHow to Use Claude for AI-Powered Feature Prioritization: https://www.chatprd.ai/how-i-ai/workflows/how-to-use-claude-for-ai-powered-feature-prioritizationHow to Use a Simple Copilot Prompt to Never Drop the Ball Again: https://www.chatprd.ai/how-i-ai/workflows/how-to-use-a-simple-copilot-prompt-to-never-drop-the-ball-againIf youre enjoying these episodes, reply and let me know what youd love to learn more about: AI workflows, hiring, growth, product strategyanything.Catch you next week,LennyP.S. Want every new episode delivered the moment it drops? Hit Follow on your favorite podcast app.

From Figma to Claude Code and back | Gui Seiz & Alex Kern (Figma)

Lenny Rachitsky · how-to · 86% similar

🎙️ This week on How I AI: How Notion’s design team uses Claude Code to design

Lenny Rachitsky · how-to · 86% similar

“I haven’t written a single line of front-end code in 3 months”: How Notion’s design team uses Claude Code to prototype

Lenny Rachitsky · how-to · 82% similar
Originally published at https://www.lennysnewsletter.com/p/this-week-on-how-i-ai-from-figma.