Claude Code: Framing the UI with Referenced DESIGN.md

Making a design system opposable to AI involves an explicit directive in CLAUDE.md. The approach consists of making DESIGN.md the sole reference for all interface and visual work, with clear application rules. It targets products that already have a design system, where most UI tasks must conform to it. Other uses of DESIGN.md exist, and the reference in CLAUDE.md is just one of them.

Embed UI rules directly in CLAUDE.md

The method proposes adding a "Design System" section in CLAUDE.md. This section establishes @DESIGN.md as the sole reference for all interface and visual design work. The guidelines frame production: follow the tokens and component models already defined, maintain the visual principles documented in DESIGN.md, prioritize the reuse of existing patterns before any creation, and explicitly signal chosen deviations.

Adopt DESIGN.md as the sole source for the interface

The persistent reference to DESIGN.md via CLAUDE.md is suitable when almost every interface task must adhere to the same design system. It makes sense especially at advanced stages of design, when a design system is in place and stabilized. The goal is then for the AI to rely on this system to produce the requested screens and variations.

DESIGN.md, the visual pivot of the project but not the only use

DESIGN.md can be seen as the second most important Markdown file for the context of Claude Code, after CLAUDE.md. CLAUDE.md frames how the AI works on the product, while DESIGN.md specifies the look and feel of the product. Many teams already link DESIGN.md to CLAUDE.md, but this is just one possibility among others. Five approaches exist to leverage DESIGN.md in Claude Code, including the persistent reference detailed here.