// SLIDE 01 — HOOK

CHAPTER 14 — PUTTING IT TOGETHER: THE PRODUCTION-READY DESIGN SYSTEM

Every chapter in this book introduced one piece of the extraction layer. Before assembling them, it is worth seeing them

Chapter 14 — Putting It Together: The Pr
NARRATION

Every chapter in this book introduced one piece of the extraction layer. Before assembling them, it is worth seeing them as a whole , what each piece does and why its position in the sequence is not arbitrary.

// SLIDE 02 — THE PRODUCTION CLI

THE PRODUCTION CLI.

All of these tools are worth nothing if they are not run. The production CLI makes them runnable — locally, in CI, and b

The Production CLI
NARRATION

All of these tools are worth nothing if they are not run. The production CLI makes them runnable , locally, in CI, and by AI coding agents , with single commands that return predictable output.

// SLIDE 03 — THE GOVERNANCE MODEL

THE GOVERNANCE MODEL.

Token changes — Human review before merge
Asset changes — Human review before merge
Compliance errors (blocking) — Immediate human action required
Compliance warnings — Scheduled human review
NARRATION

The extraction layer is a system. Systems without governance drift. The six-week token sync failure that preceded the new engineer's three-day orientation was not a technology failure , it was a governance failure. Nobody was watching the output. Nobody was notified when it changed. Nobody owned the responsibility. Governance means named owners, explicit review requirements, defined cadences, and documented decisions about what can be automated and what cannot.

// SLIDE 04 — .GITHUB/WORKFLOWS/FIGMA-AUDIT.

.GITHUB/WORKFLOWS/FIGMA-AUDIT.YML

cron'0 9 1' Weekly Monday 9am UTC
usesactions/checkout@v4
usesactions/setup-node@v4
runnpm ci
namePing Figma
NARRATION

on: pull_request: branches: push: branches: schedule: cron: '0 9 1' Weekly Monday 9am UTC env: FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }} FIGMA_FILE_KEY: ${{ secrets.FIGMA_FILE_KEY }}

// SLIDE 05 — WHEN A WARNING BECOMES BLOCKIN

WHEN A WARNING BECOMES BLOCKING.

Warnings that are not addressed become technical debt that accumulates silently. Define escalation rules and put them in

When a Warning Becomes Blocking
NARRATION

Warnings that are not addressed become technical debt that accumulates silently. Define escalation rules and put them in the audit configuration:

// SLIDE 06 — ADOPTION PATH FOR SMALL TEAMS

ADOPTION PATH FOR SMALL TEAMS.

Week 1:Month 1:Month 2:Month 3:Month 4 and beyond:
NARRATION

The full stack is designed for a design system that multiple teams build on. Not every team needs it all on day one. Week 1: Run figma:ping and figma:audit manually before any pipeline work. Fix blocking errors. These two commands tell you whether the file is trustworthy. This alone prevents the new engineer's three-day orientation from happening.

// SLIDE 07 — FAILURE MODES OF THE PRODUCTIO

FAILURE MODES OF THE PRODUCTION SYSTEM.

Silent drift between audits — Design file changes between merges; production tokens lag the file by days
Broken token sync (silent success) — extract-tokens.mjs exits zero but produces no output or wrong collection
Governance file drift — FIGMA.md references deprecated components, old token names, or the wrong file key
Pipeline becomes a liability — CI failures become normal; PRs are auto-approved without diff review
NARRATION

The weekly audit catches drift, but drift happens in real time. A designer changes a color on Tuesday; the next audit runs Monday. Five days of uncaught deviation. Mitigation: Figma webhooks trigger the audit on library publish events. This does not cover all changes , only published ones , but it substantially reduces the window.

// SLIDE 08 — WHAT THE API CANNOT REPLACE

WHAT THE API CANNOT REPLACE.

Design judgment.Brand intent.Accessibility expertise.The decision about what ships.
NARRATION

This book has been about making the Figma file machine-readable. Before closing, it is worth being precise about what machine-readability does not give you. Design judgment. The audit can tell you that a color is not in the brand palette. It cannot tell you whether the decision to deviate from the palette is correct. That requires a human who understands brand strategy.

// SLIDE 09 — THE AGENTIC HANDOFF

THE AGENTIC HANDOFF.

In the period this book describes, the design industry was navigating the early phase of AI-assisted implementation work

The Agentic Handoff — This pattern was neither accidental nor timid. It reflected a genuine assessment of where AI agents were reliable and wh
NARRATION

In the period this book describes, the design industry was navigating the early phase of AI-assisted implementation workflows. The dominant pattern , crystallized in the MCP chapter and formalized in the governance file , was: agent reads and surfaces, human decides and approves. This pattern was neither accidental nor timid. It reflected a genuine assessment of where AI agents were reliable and where they were not.

// SLIDE 10 — THE CAPSTONE

THE CAPSTONE

Step 1 — Preflight.Step 2 — Governance.Step 3 — Token pipeline.Step 4 — Asset pipeline.Step 5 — Component spec.
NARRATION

This is not a single exercise. It is a complete system-readiness evaluation you can run against any existing design system, or use as the specification for building one. Step 1 , Preflight. Run figma:ping and figma:audit against the file. How many blocking errors? How many warnings? Can you name the category of each finding? Could you fix three of them today?

// SLIDE 11 — CLOSING

CLOSING

The designer changed a color on a Tuesday in the Figma file.

Closing — On Thursday, the token pipeline detected the change, extracted the new value, validated it against the token schema, and
NARRATION

The designer changed a color on a Tuesday in the Figma file. On Thursday, the token pipeline detected the change, extracted the new value, validated it against the token schema, and opened a pull request with the diff. The engineer reviewed the PR , one token changed, color/brand/primary, from #2563EB to #1D4ED8, correctly captured, alias chains intact, both light and dark modes updated. She approved and merged. Style Dictionary ran. The CSS custom property in the design system package updated.

// SLIDE 12 — THESIS

THE CORE CLAIM.

The designer changed a color on a Tuesday in the Figma file.

On Thursday, the token pipeline detected the change, extracted the new value, validated it against the token schema, and

NARRATION

The designer changed a color on a Tuesday in the Figma file. On Thursday, the token pipeline detected the change, extracted the new value, validated it against the token schema, and opened a pull request with the diff. The engineer reviewed the PR , one token changed, color/brand/primary, from #2563EB to #1D4ED8, correctly captured, alias chains intact, both light and dark modes updated. She approved and merged. Style Dictionary ran. The CSS custom property in the design system package updated.

// SLIDE 13 — CLOSE

ASK THE QUESTION. APPLY THE FRAMEWORK.

THE PRODUCTION CLI//THE GOVERNANCE MODEL//.GITHUB/WORKFLOWS/FIGMA-A

Brutalist Figma + Claude · Ch.14 · Chapter 14 — Putting It Together: The Production-Ready Design System

NARRATION

That is the framework. Brutalist Figma + Claude, chapter 14: Chapter 14 , Putting It Together: The Production-Ready Design System. The patterns are now in place. Apply them.

01 / 13
Brutalist Figma + Claude · Ch.14 · Nik Bear Brown