- Design
- AI in Design
- Design Engineering
How Happening uses Claude to build a white-label design system for Godrej
Keeping Figma, documentation and code in sync across third-party IoT vendors, with Claude drafting each layer from the same design source.
Godrej, 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. Early team estimates put each component at about half a day from Figma to documented code, down from 2–3 days. Measured figures will follow by 31 October 2026.
At a glance (projected estimates)
| Metric | Typical approach | With Claude |
|---|---|---|
| Time per component (Figma component to documented code) | 2–3 days | About half a day |
| Documentation time 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, the team estimates each one now takes about half a day from Figma component to documented spec to coded component, against 2–3 days for comparable work before. We are timing the next 3 to 5 components end to end to confirm these figures, with measured results expected by 31 October 2026.
| Metric (projected estimates) | Typical approach | With Claude | Change |
|---|---|---|---|
| Time per component, Figma component to documented code | 2–3 days | About half a day | 75–83% faster |
| Documentation time per component | 4–6 hours | 1–2 hours | 50–83% 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.”
How we measured
- Current figures: estimates from the project team across the first 10+ components, compared with our usual time for comparable design-system components.
- Confirming them: hours logged per component in our project tracker for the next 3 to 5 components, cross-checked against Figma version history and git commit history, and compared with timesheets and project manager records from past projects.
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.