AES Claude Design System

Astreya's design team had an established, branded MUI design system in Figma, the source of truth for product UI across internal and client-facing tools. When Claude Design launched, the team saw an opportunity to shift from a traditional design process to an AI-driven one: generate prototypes rapidly from design briefs while keeping full consistency with established brand and component standards.

No methodology existed for doing this at the time. Claude Design was newly released, and the work required original research, hands-on experimentation, and building a documented system from scratch.

Translating a production Figma design system into Claude Design accurately was not straightforward. Initial attempts produced poor results: design tokens were missed, components were hallucinated, and generated outputs did not reflect the actual design system. There was no established playbook for structuring a Figma file, documentation, and assets so Claude Design could interpret them reliably.

A second problem emerged as the system matured: design briefs from other teams were written without design system awareness, conflicting with component rules and producing broken prototypes.

The solution was the AES Claude Design System: a structured, AI-interpretable design system ecosystem built from the ground up, taking control of every input layer feeding Claude Design, including the Figma file structure, the component documentation, the token architecture, the repository, and the design briefs themselves.

The system rests on four layers. First, a GitHub-connected repository as the single, versioned source of truth for all documentation, tokens, and assets. Second, a systematic audit methodology that verified the Figma file was genuinely interpretable by Claude Design before any generation work began. Third, layered component and screen documentation covering MUI atomic components, MUI composite components, and Astreya's custom components, each with anatomy, usage rules, and code references. Fourth, a brief alignment workflow that rewrote incoming briefs to speak the design system's language before any prototype was generated. A handful of recurring tasks across auditing, documentation, and brief rewriting were automated with custom Claude skills, but the skills were a means to operate the system consistently, not the deliverable itself.

Claude Design quality is only as good as the input structure. Investing in Figma hygiene, token correctness, naming conventions, and component documentation directly translated to output quality. There was no shortcut.

The README is the backbone of the system. Claude Design weights it heavily. Keeping it accurate, comprehensive, and rule-rich was the single most critical maintenance task for consistent prototype output.