Agentic Design-to-Code Workflows
From Figma mockups to working code: design-to-dev prototyping at Pampered Chef with Ravn & Claude Code
Ravn designers embedded at Pampered Chef advise and design new e-commerce features as working code in Claude Code, directly against the existing design system, cutting design-to-dev time by an estimated 45% and Pampered Chef's developers build on that code rather than rebuilding from static mockups.
The Challenge
Pampered Chef's web team works from a mature Figma design system, but design and development ran as separate hand-offs. Designers produced static Figma screens. Design tokens reached code through a multi-step pipeline: Figma variables into Tokens Studio, out to JSON, then converted to CSS. Every new feature carried that translation cost, while the design team was also absorbing a period of heavy internal change.
The Solution
For new features, we give Claude Code the PM's ticket or PRD and prompt it build the feature using Pampered Chef's existing design system components and tokens. Each change goes on its own branch. Claude tests its own work with Claude in Chrome or the Playwright MCP server before committing, designers check the result on the dev server, and Claude then opens a pull request. Figma is kept for layouts too intricate to specify in a prompt. Design leads run design reviews with stakeholders on these working prototypes.
The Outcome
Design-to-dev time per feature: an estimated 45% reduction. Hand-off format: static Figma screens --> interactive, working prototypes that bring designs to life, letting stakeholders experience proposed features, helping teams refine interactions earlier, and giving developers a concrete reference for how the experience should look, feel, and behave. Stakeholder review: design reviews now run on working prototypes; Pampered Chef stakeholder feedback on these reviews was reported as overwhelmingly positive.
What excites me about Ravn’s AI design prototyping is the opportunity to bring design and development closer together, working from a shared design system and making designs easier to communicate through working prototypes. I want the whole team working this way, so we’ve engaged Ravn to teach us.
Claude Models and Technolgy
Claude Code, implemented by Ravn product designers embedded in Pampered Chef's design team. Claude in Chrome and the Playwright MCP server are used for Claude to test its own changes before commit. The Figma MCP server is used when a screen needs to move between code and Figma. Various models including Opus and Sonnet.
Ready when you are
Your next build starts here
Tell us what you're working on. We'll tell you how we'd ship it, usually within a single business day.
Built by people, for people
The team you'll actually be working with.
US BUSINESS HOURS · NEARSHORE EXECUTION · NO OVERNIGHT HANDOFFS