AI Enables Fluid Design-Code Loop, Enhancing Planning and Craft

The static design file is dead. Long live the fluid design-code loop. In this conversation with Gui Seiz and Alex Kern from Figma, a fundamental shift in software development is laid bare: the traditional, linear handoff between design and engineering is collapsing. AI, they argue, is not just automating tasks; it's fundamentally altering the workflow, making it as cheap to iterate in code as it is in design. This revelation holds a hidden consequence: teams can now invest more time in the crucial upstream planning and downstream craft phases, eliminating the rushed, error-prone middle ground. Anyone involved in product development--designers, engineers, product managers--will find this conversation invaluable for understanding how to leverage this new paradigm to build better software faster and with higher quality.

The "Decadent" Moment: Reclaiming Planning and Craft with AI

The most profound implication of AI in the design-code process, as articulated by Gui Seiz, is the emergence of a "decadent moment" for product development. Historically, both design and engineering were scarce, expensive resources. This scarcity dictated a linear, waterfall-like workflow where fidelity increased incrementally. Designers were tasked with making exhaustive, low-level decisions in static mockups to avoid wasting precious engineering time. Engineers, in turn, were often bogged down by the "mechanistic" aspects of coding--syntax, data threading, and meticulous implementation of every design detail. The cost of generating high-quality output was prohibitively high, forcing teams to ruthlessly prioritize and often cut promising ideas.

AI fundamentally disrupts this scarcity model. Gui notes that it is now "just as cheap to riff in code as it is to riff in design." This collapse of the cost barrier between design and code has several cascading effects. Firstly, it allows for greater exploration upstream. Instead of rushing through planning to get to execution, teams can now "spend a lot more time in the planning stage," indulging in possibilities and iterating on ideas without the immediate fear of ballooning development costs. This means more features can make it "above the cut line," and a wider range of ideas can be explored, fostering greater divergence.

Secondly, this shift enables a renewed focus on downstream craft. With AI handling much of the "mechanistic" execution, both designers and engineers can dedicate more time to the finer points that elevate a product from functional to exceptional. Gui explains, "we can spend a lot more time in the craft because we can reach higher for ideas." This is where the true competitive advantage lies: not in simply producing more, but in producing better, more polished, and more considered experiences. Alex Kern echoes this, stating that he's spending less time on "the mechanistic like, you know changing of syntax and trying to thread data through different call sites and more focused on the problem solving aspects." This reframing of effort--from execution toil to strategic planning and artisanal craft--is the core advantage AI offers, a stark contrast to the conventional wisdom that focused solely on optimizing the execution phase.

"AI basically collapses that and it's just as cheap to riff in code as it is to riff in design."

-- Gui Seiz

Bridging the Gap: The Figma MCP as a Fluid Connector

A critical challenge in the traditional workflow was the divergence between design files and the actual production code. Figma's internal team, as demonstrated by Gui and Alex, has actively tackled this by developing tools that create a fluid, bidirectional connection. The Figma MCP (Meta Component Protocol) acts as the central connector, enabling seamless transfer of information between code and design environments.

One powerful application of this is pulling production code directly into Figma. Gui illustrates this by taking a locally hosted web app and using the MCP to import a specific page into Figma. This is crucial because, as Alex points out, "the codebase gets way ahead of where the actual design file is and there's states or workflows that just don't exist at all within the design file." By importing these actual code states into Figma, designers can work with a true representation of the product, not outdated mockups. This eliminates the common scenario where design packages sent to engineering are filled with every possible error state, hover effect, and visual nuance, which often diverge from what's actually implemented. The ability to "work against it" with an accurate representation is a significant quality improvement.

Furthermore, this process transforms collaboration. Figma's strength in multi-user collaboration, which prompting tools often lack, can now be applied to code-derived designs. Gui highlights, "my whole team can also jump in and now we can just exponentially scale this work versus me solo having to do everything." This shared, malleable space allows for "broad exploration" and democratizes design input.

The reverse flow is equally impactful. Alex demonstrates how designs created or refined in Figma can be pushed back into code. Using Claude Code, changes made within a Figma frame can be automatically transformed into code and reconciled with the local codebase. This is not a simple image-to-code conversion; it's a "pseudo structured data to pseudo structured data translation through the MCP," leading to higher accuracy. This bidirectional flow ensures that design and code remain in sync, preventing the costly rework that often arises from misaligned artifacts. This capability directly addresses the "old linear waterfall workflow" by establishing a "fluid, bidirectional loop where design and code inform each other in real time."

"The old linear waterfall workflow is gone. What replaces it is a fluid, bidirectional loop where design and code inform each other in real time."

-- Gui Seiz (as described in episode description)

Automating Toil: Skills as Scalable Best Practices

Beyond the core design-code loop, the conversation delves into the power of "skills"--customizable AI functions that automate repetitive tasks and enforce best practices. Alex Kern, an engineer at Figma, emphasizes that these skills act like "large macros" or prompts that can be invoked at any point in the workflow. This is particularly relevant for reducing engineering toil, but Gui also points out the significant "design toil" that AI can strip away, such as managing file versions, ensuring visual consistency, and applying stylistic rules.

Alex showcases his custom /ship skill, designed to streamline the process of pushing code to production. This skill automates a series of "pre-flight checks," including linting, build command verification, and CI monitoring via Buildkite. Previously, engineers had to "babysit these processes," but the /ship skill allows them to initiate the process and then "walk away from my laptop." It can even automatically push minor fixes for lint issues up to five times. This systematic approach to quality assurance, embedded directly into the workflow, significantly reduces friction and ensures that code meets a high standard before merging.

Gui draws a parallel between these skills and an engineering organization's internal wiki or standard operating procedures (SOPs). He suggests that "every engineering org... should go through their onboarding wiki and pull every page out... into a skill." This transforms static documentation into actionable, automated processes, ensuring that best practices are systematically applied by everyone. This shift from "SOP into a skill" or "doc into a skill" represents a powerful way to scale organizational knowledge and improve consistency across teams. It moves beyond "best intentions" to fully automated, default workflows, making systemic improvements accessible to all engineers.

"I find that I'm spending a lot less time doing like the mechanistic even on the engineering side the mechanistic like, you know changing of syntax and um, you know trying to thread data through different call sites and more focused on the problem solving aspects."

-- Alex Kern

Key Action Items

• Embrace the Bidirectional Loop: Actively explore and implement tools that allow for seamless transfer of designs to code and vice-versa. Prioritize solutions that treat design and code as living, interconnected artifacts rather than static deliverables. (Immediate)
• Leverage AI for Planning and Craft: Dedicate more time to the upstream planning and downstream craft phases of product development. Use AI tools to accelerate ideation and refine execution, rather than solely focusing on speeding up the middle execution phase. (Immediate)
• Automate Design Toil: Identify repetitive design tasks (e.g., version management, style consistency checks) and investigate AI tools or custom skills that can automate them. This frees up designers to focus on higher-level creative problem-solving. (Over the next quarter)
• Develop or Adopt Engineering Skills: For engineers, invest time in creating custom AI skills or adopting existing ones that automate pre-flight checks, linting, CI monitoring, and other repetitive tasks. This reduces friction and improves code quality. (Over the next quarter)
• Integrate Production Data into Design: Utilize tools that can pull actual code states and workflows into design environments (like Figma). This ensures designers are working with accurate, up-to-date representations of the product. (Within 3-6 months)
• Foster Collaborative Design-Code Spaces: Explore platforms that enable real-time, multi-user collaboration on code-derived designs. This fosters a more dynamic and efficient feedback loop between designers and engineers. (Immediate)
• Invest in Upskilling: View AI tools not just as outsourcing mechanisms but as powerful platforms for learning and upskilling. Encourage exploration of complex topics (e.g., shaders, codebase intricacies) through AI-assisted querying and experimentation. (Ongoing)