Brought to you by Optimizely—Your AI agent orchestration platform for marketing and digital teams
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.
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.
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
Brought to you by:
Daniel 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 Code—including a dual-agent system where one AI writes code and another reviews it—along with how he plans features, manages development with branches, and turns ideas into working apps.
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. Daniel’s most valuable AI workflow isn’t for coding—it’s 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 1–3 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 I’m working with Claude, I’m saying, ‘Write it into a file. Log everything.’” This solves two problems: Claude’s 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.
How I AI: Daniel Roth’s Dueling Agent Workflow for Building iOS Apps: https://www.chatprd.ai/how-i-ai/daniel-roth-dueling-agent-workflow-for-building-ios-apps
Build iOS Apps with a Dueling AI Agent Workflow: https://www.chatprd.ai/how-i-ai/workflows/build-ios-apps-with-a-dueling-ai-agent-workflow
How to Use Claude for AI-Powered Feature Prioritization: https://www.chatprd.ai/how-i-ai/workflows/how-to-use-claude-for-ai-powered-feature-prioritization
How 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-again
If you’re enjoying these episodes, reply and let me know what you’d love to learn more about: AI workflows, hiring, growth, product strategy—anything.
Catch you next week,
Lenny
P.S. Want every new episode delivered the moment it drops? Hit “Follow” on your favorite podcast app.
