AI UI/UX Design Systems

Tokens as the human-authored contract every model executes against: color in four sub-namespaces, type, spacing, radius, elevation and motion in relative named scales, the design-system.v1 schema, and a worked example that builds primitive, semantic and component tiers for two themes with a contrast table. Lab 1 defends a tiered token system to a design lead.

1. Module 1 pretest Diagnostic pretest · 5 min
2. Why a token system, not a Figma export Reading · 12 min
3. Color tokens: palette, semantic roles, state overlays Reading · 15 min
4. Type tokens: scale, weight, line height, tracking Reading · 12 min
5. Spacing, radius and elevation Reading · 12 min
6. Motion tokens: duration, easing, choreography Reading · 12 min
7. The design-system.v1 schema Worked example · 15 min
8. Worked example: brand brief to three tiers and two themes Worked example · 15 min
9. Lab 1: Turn a brand brief into a token system AI role-play lab · 45 min
10. Retrieval: 8 questions across the module Retrieval check · 10 min

Primitives versus composites, composition rules as the model's instruction surface, slot patterns that flex without breaking the brand, and the components.v1 schema. Lab 2 turns a drifting component list into an enforceable contract with an engineering lead.

1. Module 2 pretest Diagnostic pretest · 5 min
2. Primitive versus composite Reading · 12 min
3. Composition rules: the model's instruction surface Reading · 12 min
4. Slot patterns: flex without breaking the brand Reading · 12 min
5. The component schema: naming, props, slots Worked example · 15 min
6. Lab 2: Write the component contract an engineering lead will enforce AI role-play lab · 45 min
7. Retrieval: 6 questions across the module Retrieval check · 10 min

Transitions as tokens, focus as a load-bearing accessibility token, error, loading and empty states as coordinated clusters, and a state namespace named for what is happening. Lab 3 closes the state gaps on a generated screen and holds the line on focus and reduced motion.

1. Module 3 pretest Diagnostic pretest · 5 min
2. Transitions as tokens Reading · 12 min
3. Focus rings: a token, not a CSS detail Reading · 12 min
4. Error states: clusters, not red text Reading · 12 min
5. Loading and empty states Reading · 12 min
6. The state-token namespace Reading · 12 min
7. Lab 3: Close the state gaps before the order list ships AI role-play lab · 45 min
8. Retrieval: 6 questions across the module Retrieval check · 10 min

The five-frame prompt that survives across model families, token sub-trees as context, explicit token references, a post-generation lint and the cross-model matrix, governance and provenance for the models that generate UI (in bRRAIn: the Handler by default, commercial models opt-in through the LLM Registry), and a catalogue for diagnosing defects by source. Lab 4 triages drift across three model outputs.

1. Module 4 pretest Diagnostic pretest · 5 min
2. The prompt that survives across model families Reading · 15 min
3. Token-as-context: pass the sub-tree Reading · 12 min
4. Drift detection across models: the post-generation lint Worked example · 15 min
5. Explicit token references Reading · 12 min
6. Governing the models that generate your UI Reading · 12 min
7. Scenario: diagnosing generation failures by source Scenario · 15 min
8. Lab 4: Three models, one screen, and a lead who wants to drop one AI role-play lab · 45 min
9. Retrieval: 7 questions across the module Retrieval check · 10 min

WCAG 2.2 AA as machine-readable invariants with enforcement, contrast mechanics and the composited-state matrix, keyboard and focus order, ARIA discipline, pre-emit refusal versus post-emit lint, and a worked contrast matrix on real production tokens. Lab 5 is an audit with an accessibility auditor.

1. Module 5 pretest Diagnostic pretest · 5 min
2. WCAG 2.2 AA as machine-readable invariants Reading · 12 min
3. Contrast mechanics Worked example · 15 min
4. Keyboard navigation and focus order Reading · 12 min
5. ARIA discipline: name, role, state Reading · 12 min
6. The 'AI says no' pattern Reading · 12 min
7. Worked example: a contrast matrix on real production tokens Worked example · 15 min
8. Lab 5: An accessibility audit of generated screens AI role-play lab · 45 min
9. Retrieval: 7 questions across the module Retrieval check · 10 min

Semver for design systems, the breaking-change document, drift detection between intent and reality, the weekly sweep, and design decision records (recorded in bRRAIn with record_decision and superseded under the Correction & Supersession standard). Lab 6 versions a release with a product manager who wants it to be a minor.

1. Module 6 pretest Diagnostic pretest · 5 min
2. Semver for design systems Reading · 12 min
3. The breaking-change document Worked example · 15 min
4. Drift detection: intent versus reality Reading · 12 min
5. The weekly sweep Worked example · 12 min
6. Design decision records Reading · 12 min
7. Lab 6: Version a release and write the breaking-change notice AI role-play lab · 45 min
8. Retrieval: 6 questions across the module Retrieval check · 10 min

A worked module on a real system: bRRAIn's token files and their layers, the website light/dark contract (brrain-theme in an apex cookie and localStorage, data-theme set before first paint, the light-theme standard's rules), Nexus's three independent axes (style, theme, highlight), verifying every UI in all four styles including the Paper heading-trim pitfall, and shipping a design system into extensions, the Nexus IDS Marketplace and generated pages. Lab 7 reviews a new Nexus surface with a front-end lead.

1. Module 7 pretest Diagnostic pretest · 5 min
2. Reading a production token system: bRRAIn's own layers Worked example · 15 min
3. The light/dark contract: how a theme reaches every page Reading · 15 min
4. Three independent axes: style, theme and highlight in Nexus Reading · 15 min
5. Verify every UI in every style Scenario · 15 min
6. Shipping a design system into extensions, marketplaces and generated UI Reading · 12 min
7. Lab 7: Review a new Nexus surface before it ships AI role-play lab · 45 min
8. Retrieval: 8 questions across the module Retrieval check · 10 min

How the LOFT exam and its AI-conducted performance tasks work, timing a 120-minute form, the seven reasoning patterns behind most items, and an interleaved practice set across all domains.

1. Module 8 pretest Diagnostic pretest · 5 min
2. How the certification exam works Reading · 12 min
3. Timing a 120-minute exam with performance tasks Reading · 12 min
4. Reasoning patterns the exam rewards Reading · 12 min
5. Interleaved practice: all modules Retrieval check · 15 min

The capstone brief, a build plan with hard-fail checkpoints, the complete design-system.v1 package as a worked example, and the four anchor exemplars, ending with the capstone lab where you submit your package and answer the review board.

1. Module 9 pretest Diagnostic pretest · 5 min
2. The capstone brief Reading · 12 min
3. Planning your capstone build Reading · 12 min
4. Worked example: the complete design-system.v1 artifact Worked example · 15 min
5. Anchor exemplars: 92, 78, 71 and 54 Reading · 15 min
6. Retrieval: 6 questions across the module Retrieval check · 10 min
7. Capstone: Harbor & Lane design-system review AI role-play lab · 45 min