Zalando's design system team built its own Claude Code prototyping tool after Figma Make missed the brand
Two Zalando product designers built the ZDS Capsule, a Claude Code tool that turns Figma designs into on-brand prototypes with real product data.
Done withCCClaude CodeFFigma
In-house design system team; told via organizer's talk write-up and recording
WHAT THEY DID
Dana Baddad and Gonzalo Vásquez Correa, senior product designers on the Zalando Design System (ZDS) team, presented the ZDS Capsule at the Into Design Systems meetup in Berlin on 22 Oct 2026. According to the organizer's write-up, it is a prototyping tool built with Claude Code that turns a Figma design, a prompt or both into a working Zalando prototype. A Claude Code skill called build-prototype runs agents in parallel: one pulls design context through the Figma MCP, another extracts the design into a JSON file that the build step uses.
STEP BY STEP
- Keep design tokens in an agnostic format in their own repo outside Figma.
- Use Figma Code Connect so agents pick the right code component from a Figma design.
- Translate visual guidelines into many small design.md files with an index.
- Run workshops where designers prototype with Claude Code using only the markdown guidelines, then iterate the guidelines and add guardrails.
- Run the build-prototype Claude Code skill: parallel agents fetch Figma design context through the Figma MCP and extract the design to JSON, then build the prototype.
- Have skills run scripts at critical steps (structuring Figma designs, scanning icons, generating metadata and thumbnails).
HOW IT WENT
The write-up says more than 20 designers were pushing PRs to the Capsule and the team had merged 98 at the time of the talk. Prototypes can pull an image, name, price and brand from a pasted zalando.de product URL, switch to dark mode, test reduced motion and export as HTML. A kids' wishlist sticker-burst concept built with it was approved.
Reported results: More than 20 designers contributing and 98 PRs merged at the time of the talk; prototypes with real zalando.de product data, templates, theming, reduced-motion and device testing, and HTML export; a kids' wishlist sticker-burst concept approved.
WORTH KNOWING
A dated account from a design system team at a large company, with candid limits: the first skill took too long, designers got stuck on VPN, terminal and Git before prototyping, and an engineer said the AI-written motion specs obscured the parts he needed.
TRY IT
- Split your brand or design system guidelines into many small markdown files with an index, so an agent reads only the file it needs.
- Where an AI skill gives inconsistent results, have it run a script at that step (for example, returning real icon names) instead of describing the task.
- Before generating specs for developers with AI, ask them what they actually need from a prototype.
Rates the entry, not the tool.
Source: Sil Bormüller · Into Design SystemsOpen as a page
- Work done: not stated in the source (Unverified build dates. The talk was given on 22 Oct 2026 (stated in the write-up); the write-up describes the Capsule's state 'at the time of the talk' but does not date when it was built or when the workshops ran.)
- Source published: Oct 31, 2026
- On 4TC: added Nov 11, 2026 · checked Nov 11, 2026
About this source
Type: Documented method · Firsthand report · Demonstrated workflow
- How Zalando built its own AI prototyping environment on top of its design system
Sil Bormüller · Into Design Systems · Published Oct 31, 2026 (Visible byline 'Published 2026-10-31' / 'October 31, 2026'; JSON-LD datePublished and dateModified 2026-10-31.) · Checked Nov 11, 2026
Write-up of the talk by Sil Bormüller, founder of Into Design Systems, which organized the meetup at Zalando's office. Secondary (organizer's account), not written by the presenters. No sponsorship label found; no stated tie to Anthropic or Figma.
Access: open - How Zalando Built Its Own AI Prototyping Tool With Claude Code
Into Design Systems · YouTube · Published Nov 4, 2026 (Published 2026-11-04 per indexed video page metadata; 37:17 long.) · Checked Nov 11, 2026
Recording of the talk on the Into Design Systems YouTube channel, with the presenters demoing the tool (primary record of their own words).
Access: Not watched by 4TC; existence, title and channel confirmed via YouTube oEmbed. Date and description from the video page as indexed.
Source check: Researched from the public page; not yet re-checked by an editor. Nobody at 4TC has tested this.
Claims and where they come from
- Dana Baddad and Gonzalo Vásquez Correa, senior product designers on the Zalando Design System team, gave the talk 'Machine-Ready, but Human-First' at the Into Design Systems meetup at Zalando in Berlin on 22 Oct 2026. (reported) [1]
- The team built the ZDS Capsule because Figma Make did not produce on-brand results; their slide said 'Figma Make didn't make it.' (reported) [1]
- A Claude Code skill called build-prototype starts agents in parallel; one gets design context from Figma through the Figma MCP and another extracts the design into a JSON file for the build step. (reported) [1][2]
- The team named five foundations: agnostic design tokens in their own repo, Figma Code Connect, documentation for humans and AI, small design.md files, and human enablement. (reported) [1]
- At the time of the talk more than 20 designers were pushing PRs to the Capsule and the team had merged 98. (reported) [1]
- Pasting a zalando.de product URL pulls the image, product name, price and brand into the prototype; prototypes support dark mode, reduced motion, device testing and HTML export. (reported) [1]
- Many workshop participants got stuck on access requests, VPN, terminal and Git before reaching prototyping; the team added small-group support slots. (reported) [1]
- An engineer said the parts he cared about were obfuscated in the AI-written motion specs; Dana said implementation could take two or three times as long. (reported) [1]
- The recording 'How Zalando Built Its Own AI Prototyping Tool With Claude Code' is on the Into Design Systems YouTube channel. (observed in the source) [2]
4TC interpretation
Our reading, not something the source says.
The team reports that Figma Make didn't produce on-brand results for them, so they made their own design system machine-readable first (tokens outside Figma, Code Connect, small design.md files) and only then let agents build. That order is the transferable part.
Designer impact
Alleged [1]
An engineer told the team the AI-generated motion specs obscured the small parts he cared about, and Dana Baddad said implementation could take two or three times as long even though prototyping got faster.
- Use AI prototypes to explore and win approval, then agree the handoff format with engineers instead of sending AI-written specs.
- Keep room in the spec for the designer and engineer to discuss intent.
Established = documented by primary sources or the company’s own statements. Disputed = contested with evidence on both sides. Alleged = reported, not established.
Votes rate whether this entry was useful. They are not an endorsement of the tool, and don’t mean voters agree with the company’s practices.
Report an issue or correction
Share your own experience
4TC does not endorse a tool unless an explicit 4TC endorsement is shown.