DesignAI in DesignDesign Engineering
How Happening uses Claude to build a white-label design system for a smart-home brand
Keeping Figma, documentation and code in sync across third-party IoT vendors, with Claude drafting each layer from the same design source.
· 4 min read
A large consumer smart-home brand sells connected devices whose apps are built on white-label IoT platforms run by third-party vendors. Happening is building the design system that keeps all of those experiences looking and behaving like one brand: in Figma, in documentation and in code. Claude sits inside that workflow, turning design decisions into documentation and code, and cutting the time per component from 2–3 days to about half a day.
| At a glance | Typical approach | With Claude |
|---|---|---|
| Time per component (design → documented → coded) | 2–3 days | About half a day |
| Documentation per component | 4–6 hours | 1–2 hours |
| Components built with Claude so far | None | 10+ |
The challenge
The brand’s connected products run on apps built by several third-party IoT platform vendors. Each vendor has its own UI framework and its own limits on how far a brand can customise it. The result is a family of apps that do not quite look, sound or behave like the same company.
The brand needed one design system that every vendor could adopt: a shared visual language, clear rules for adapting it to each vendor’s platform, and a way to judge whether a vendor’s app meets the standard. A system like that lives or dies on its documentation and code, and keeping Figma, docs and code in sync by hand is slow and error-prone.
Our approach
A small Happening team is building the system in three layers that have to stay in step:
- Design system in Figma: tokens, components and the white-label theming that lets each vendor apply the brand.
- Documentation and guidelines: how every component is used, how the brand may be adapted on each vendor platform, and what a vendor must meet to conform.
- Coded components: production-ready components that match the Figma source.
Claude works across all three. We use Claude (in the Claude desktop app) for research, documentation and guidelines, and Claude connected to Figma to read components and tokens straight from the design files and turn them into code and specs. The rule stays the same as in all our work: Claude drafts, designers review and decide.
Where Claude fits
Because docs and code are both drafted from the same Figma source, they stay in step with the design; nothing ships until a designer approves it.
The results so far
Across the first 10+ components built with Claude, each one moves from Figma component to documented spec to coded component in about half a day. The same work usually takes our team 2–3 days per component.
| Metric | Typical approach | With Claude | Change |
|---|---|---|---|
| Time per component, design → documented → coded | 2–3 days | About half a day | 75–85% faster |
| Documentation time per component | 4–6 hours | 1–2 hours | 50–80% less |
Delivery and adoption
The system is being built and delivered component by component. So far, 10+ components have gone through the full Claude-assisted workflow, and each one ships as a complete set:
- Figma component: tokens and white-label theming, ready for vendors to apply the brand.
- Documentation: usage guidance and the rules for adapting the brand on each vendor platform.
- Coded component: production-ready code that matches the Figma source.
The system is being built for the brand’s own team and its vendor partners. As vendors start building on it, we’ll share how many apps have adopted the standard.
“Our design system’s Figma files, documentation and code now move together, and far faster than before.”
Product team, smart-home brand
How we measured
- With Claude (about half a day per component; 1–2 hours of documentation): the project team’s estimates across the 10+ components built with Claude so far.
- Typical approach (2–3 days per component; 4–6 hours of documentation): Happening’s usual time for comparable design-system components, based on our team’s experience on similar projects.
- Next: we will log exact times on upcoming components and update these figures with measured results.
What this means for brands
A design system is only as good as its weakest copy: the Figma file, the documentation or the code. With Claude reading directly from the design files, all three are generated from the same source and reviewed by the same team, so they stay in sync as the system grows.
For brands whose products are built by several partners, that means one standard every partner can follow, and a faster way to get there.
About Happening. Happening Design is a human-centred, AI-native design and development agency. We help brands and product teams build products and the design systems behind them, combining strategy, design and engineering. Building a design system across partners? Get in touch with our team.
