Design System.
ACS Control — A Home Automation Design System
From hand-drawn sketch to coded components, documented and ready for developer handoff.
What This is
ACS Control is a complete design system built for a Brazilian home automation interface. It documents an existing Hi-Fi prototype — covering components, patterns, screen compositions, and design tokens — using Figma as the source of truth and zeroheight as the public documentation site.
The Tool Chain
How the steps were done and each tool role
01
Figma: Component library and source of truth
02
Zeroheight: Public design system documentation
03
Storybook: Coded components for developer handoff
04
Chromatic: Visual testing and build deployment
05
GitHub: Version-controlled token storage
AI-Assisted Development
This system was built in collaboration with Claude AI. While my background is in UX and visual design — with familiarity in HTML and CSS but limited JavaScript — I was able to bring this system fully into code by working iteratively with AI as a development partner. Every component was reviewed, corrected, and approved by me before being committed. This project reflects not just design craft, but adaptability, systems thinking, and the ability to work at the intersection of design and engineering using modern tools.
A split screenshot — Figma component on the left, the same component rendered in Storybook on the right. Shows the design-to-code bridge visually.
EXPLORE THE SYSTEM
External Links
