Shopify designers use AI agents to build live prototypes

Marvin Schweibold, who leads the product design studio at Shopify, describes a fundamental change in how the company approaches interface development. Designers now use Figma as a scratchpad to sketch interactions, which AI agents like Codex interpret to generate functional code. This process bypasses traditional engineering handoffs, allowing designers to build and test live prototypes directly within the interface. The studio is currently applying this workflow to redesign the admin experience and integrate Sidekick, Shopify's AI infrastructure layer that allows merchants to manage stores via chat.

Schweibold notes that AI has raised the ceiling for design execution, enabling individuals or small teams to produce work that previously required larger engineering resources. To manage this new capability, the team created 'Dial Kit,' a tool that exposes underlying variables in AI-generated code. This allows designers to tweak parameters like animation speed or terrain depth without writing code, facilitating rapid iteration on complex visual effects such as procedural grass shaders. The tool also helps identify AI errors, such as misinterpreted terrain maps. Schweibold argues that the designer's role is evolving from crafting static assets to curating and directing AI-generated outputs. He emphasizes that while AI can execute technical complexity, it lacks aesthetic judgment, requiring designers to steer the output with a deeper understanding of system components.