This chapter gives a working overview of The Three-File System: Intent, Constitution, State, focusing on the ideas a reader needs before moving to the next chapter. The chapter moves through Learning outcomes, Opening, The three files, CLAUDE.md , Technical Constitution, and related ideas. Read it for the main argument, the vocabulary it introduces, and the practical judgment it asks you to develop. Before Claude writes a single line of the simulation, three files define everything. The Intent Layer is human, always. The Technical Constitution governs what Claude never improvises.

The teacher opened Claude Code in a fresh project directory and typed:

What you have already been building since Chapter 2. For the simulation project, CLAUDE.md is the technical constitution: The stack (vanilla HTML/CSS/JS, no framework, single-file deployable). File structure (index.html, simulation.css, simulation.js; no other top-level files). Naming conventions (kebab-case for HTML IDs; camelCase for JS functions). What Claude never touches without instruction (the class website's shared CSS; any file outside the simulation directory). Verification commands (open index.html and verify no console errors; test on mobile breakpoint).

All interactive elements keyboard-navigable. All visual state has a text equivalent (screen-reader-readable). Minimum font size: 16px. Color is never the only carrier of state , always paired with shape or label. The six-color rule is the chapter's most-quoted constraint. The point is not the specific number , it is the boundary. A simulation with twenty colors is one where the design was made by Claude's defaults. A simulation with six colors, each named, each with a defined role, is one where the design was made by you.

What this simulation is: An interactive visualization of bubble sort showing why it scales as O(n²) , why the runtime grows steeply as the array gets larger. What the student should understand after using it: That comparison-based sorts have a tradeoff between simplicity and efficiency. That bubble sort is simple to explain (compare adjacent, swap if needed) and slow to run because it does work proportional to n². That small changes (one early swap) can have cascading effects on subsequent steps.

What is built: HTML scaffold with the array container and controls. CSS with the six variables defined and applied to the scaffold. What is pending: JS simulation logic (the bubble-sort step function). Step controls (click handlers, keyboard handlers). Sorted-region highlighting. Mobile-breakpoint adjustments.

A forcing function from the Brutalist framework. If you cannot write all three files for your simulation in 45 minutes, the simulation's scope is too large for a first build.

The Brutalist framework's central commitment: maximally informed, minimally autonomous, by design. Maximally informed , Claude has every file it needs. CLAUDE.md is complete. DESIGN.md is complete. PROJECT.md is populated. Claude operates with full project context.

Apply the chapter's discipline to your own simulation (from the Bridge's question , what concept in your curriculum has no good interactive analog yet?). Open a new project directory for the simulation. mkdir ~/teaching// and and cd ~/teaching//.

"Three files is too much for a small simulation." No. The 45-minute test forces appropriate scope. A simulation that does not fit in 45 minutes of file-writing is too large for a first build. "DESIGN.md is for designers." No. DESIGN.md is for anyone building anything with visual or interactive output. The teacher writing a simulation has design decisions whether they call them design or not; DESIGN.md is the file where those decisions live.

Eileen Gray (1878, 1976) , Irish-French architect and designer whose villa E-1027 (built 1926, 1929 on the French Riviera) is one of the canonical examples of total design , a building in which every element from the structural frame to the door handles to the built-in furniture to the wall-mounted maps was specified by the designer as a coherent whole.

Eileen Gray (1878, 1976) , Irish-French architect and designer whose villa E-1027 (built 1926, 1929 on the French Riviera) is one of the canonical examples of total design , a building in which every element from the structural frame to the door handles to the built-in furniture to the wall-mounted maps was specified by the designer as a coherent whole.