DESIGN:OSMasterclass Operating Manual • V1.0
01 / 28 • Hero Gateway
Act 0 · Start Here

Mastering
Design:OS

The definitive multi-runtime operating manual. Transition from stochastic LLM luck to deterministic color science, live Figma synchronization, and vector memory recall.

0% LLM Luck Required
→
100%
Deterministic Floor
7 Acts
Strategic Chapters
28
Bespoke Slides
DESIGN:OS Operating Manual • Hero Gateway
01 / 28
DESIGN:OSAct 1 • Core Philosophy
02 / 28 • Triad Stagger

3 Supreme
Truths

Eliminating reliance on stochastic luck. Every token is derived from perceptual color math, strict labor division, and a 14-linter machine floor.

14
Machine Floor Linters
  • 360°
    OKLCH Uniformity
  • 1 Engine
    Deterministic UI Kernel
  • 0.02
    ΔEOK Precision Floor
DESIGN:OS Operating Manual • 3 Supreme Truths
02 / 28
DESIGN:OSAct 1 • Architecture Split
03 / 28 • Bipolar Split
Organ 01 • Reasoning

Host AI Agent

Creative synthesis, intent parsing, persona resolution, and semantic DOM structuring.

1 Creative Brain
Prompt → AST
Organ 02 • Compliance

UI Kernel Engine

Deterministic DTCG compilation, OKLCH color math, and 14 linting gates with 0 stochastic code.

100% Machine Floor
DESIGN:OS Operating Manual • Division of Labor
03 / 28
DESIGN:OSAct 1 • Hands Ecosystem
04 / 28 • Modular Orbit

6 Specialized
Optional Hands

Modular hands extend multi-dimensional capabilities without bloating the core bundle.

6 Multi-Runtime Hands • 0 ms Overhead
  • Figma HandPort 9410 WS
  • GSAP HandT5 Timelines
  • GFlow Hand3D WebGL
  • Memory HandVector Recall
  • Color HandP3 OKLCH
  • Audit Hand14 Linters
DESIGN:OS Operating Manual • Hands Ecosystem
04 / 28
DESIGN:OSAct 2 • Design Soul
05 / 28 • Sovereignty Cascade

3-Tier Soul Precedence

Project brief holds supreme veto power, but Factory invariants remain mathematically unbreakable.

  • Tier 0 • Factory (WT 0)
    Factory Invariants (Immutable)Banned anti-patterns (no purple-on-dark, container soup ≤ 2)
    Absolute Floor
  • Tier 1 • Studio (WT 50)
    Studio StandardsWorkspace shared conventions (8px grid, token aliases, default icon font)
    Shared Base
  • Tier 2 • Project (WT 75)
    Project Soul (Highest Precedence)Bespoke brand persona, custom color scales, explicit overrides
    Supreme Veto
DESIGN:OS Operating Manual • Design Soul
05 / 28
DESIGN:OSAct 2 • Onboarding
06 / 28 • 6 Entry Roads

6 Entry Roads (E1–E6)

ui scan --json Auto-detects project state
  • E1Greenfield

    Blank slate with zero existing code

  • E2Existing Code

    Adopt into live React/HTML codebase

  • E3Live URL

    Harvest tokens directly from web address

  • E4Figma Tokens

    Import DTCG variables from Figma file

  • E5Reference Shot

    Match aesthetic from visual image

  • E6Tokens Only

    Compile standalone DTCG JSON tokens

DESIGN:OS Operating Manual • 6 Entry Roads
06 / 28
DESIGN:OSAct 2 • Setup Protocol
07 / 28 • 5-Step Protocol

5-Step Setup Protocol

Sequential onboarding guarded by mandatory STOP-Gates to prevent token hash drift.

  • 1ui doctorVerify toolchain
  • STOP
  • 2ui ds compileDTCG tokens
  • STOP
  • 3DESIGN.mdDeclare soul
  • STOP
  • 4ui agents initWire staff
  • STOP
  • 5ui figmaOpen bridge
DESIGN:OS Operating Manual • Setup Protocol
07 / 28
DESIGN:OSAct 2 • Virtual Staff
08 / 28 • Virtual Staff

System Architect

Role: Structural Layout

Owns DOM tree hierarchy, grid tokens, fluid responsive breakpoints, and semantic landmarks.

Boundary: No Color

Craft Stylist

Role: Visual Polish

Owns OKLCH color scales, typographic rhythm, elevation shadows, and micro-interactions.

Boundary: No Layout

Release Auditor

Role: Quality Gates

Executes the 14 linters, audits WCAG 2.2 AA compliance, and enforces Exit 0 release rule.

Boundary: No Code Edits
DESIGN:OS Operating Manual • Virtual Staff
08 / 28
DESIGN:OSAct 3 • Daily Operations
09 / 28 • 6 Daily Verbs
zsh • design-os CLI
/ui:generate <prompt>Synthesize full semantic view
/ui:iterate <feedback>Targeted surgical refinement
/ui:audit [surface]Execute quality sieve floor
/ui:design <variants>Generate contrasting explorations
/ui:tokens <action>Compile W3C DTCG variables
/ui:figma <push|pull>Synchronize code & desktop canvas

6 Core
Daily Verbs

High-velocity CLI ergonomics translating natural language prompts into production code.

100%
Natural Language CLI
DESIGN:OS Operating Manual • 6 Core Daily Verbs
09 / 28
DESIGN:OSAct 3 • Figma Bridge
10 / 28 • Two-Way Bridge
West Bank • Code
DTCG JSON

Single source of truth in design/tokens.json compiled to CSS variables.

Push AST →
9410
WS Broker
Mutex Lock: Active
East Bank • Canvas
Figma Desktop

Native Figma Variables & Auto-Layout frames syncing in real-time.

← Pull Frames
DESIGN:OS Operating Manual • Figma Desktop Bridge
10 / 28
DESIGN:OSAct 3 • Token Pipeline
11 / 28 • Canonical Tokens
Canonical Single Source of Truth
design/tokens.json
W3C Design Tokens Community Group (DTCG) Standard
  • CSS Custom Props

    :root { --color-brand: oklch(...) }

  • Tailwind Plugin

    theme.extend.colors.brand

  • Figma Variables

    Collection: “Brand / Primary”

DESIGN:OS Operating Manual • Canonical Tokens
11 / 28
DESIGN:OSAct 4 • Quality Audit
12 / 28 • 4 Quality Surfaces
Surface 01

taste-lint

Catches 14 banned anti-patterns (no purple-on-dark, no glowing borders).

6-Axis Floor
Surface 02

validate-layout

Structural DOM analysis preventing container soup > 2 and overflow.

Soup ≤ 2
Surface 03

a11y-lint

Tier-1 accessibility checks for ARIA labels, contrast, and focus targets.

WCAG 2.2 AA
Surface 04

design-os audit

Full 10-tool release suite required to produce zero static errors.

Exit 0 Ship
DESIGN:OS Operating Manual • 4 Quality Surfaces
12 / 28
DESIGN:OSAct 4 • Triage Protocol
13 / 28 • 3-Turn Triage

Triage &
Autodetect

Every finding follows a strict 3-tier triage rule to avoid infinite refactor loops.

≤ 3 Turns
Max Convergence Loop
  • Tier 1 • Autofix ui autofix

    Deterministic fixes for viewport, image tags, Lucide icons, CDN links.

  • Tier 2 • Refactor Agent Self-Healing

    Refactor layout and component tokens within max 3 turns.

  • Tier 3 • Escalate Human Review

    Escalate unresolvable architectural trade-offs directly to user.

DESIGN:OS Operating Manual • Triage Protocol
13 / 28
DESIGN:OSAct 4 • Vector Memory
14 / 28 • Vector Memory
0.85
Cosine Threshold
Local ONNX Embeddings • 100% On-Device Privacy
  1. 01 Recall Query

    Incoming brief scans vector space for similar past solutions & critiques.

  2. 02 Primed Work Execution

    Host agent generates view primed with distilled lessons to prevent repeat bugs.

  3. 03 Crucible Distillation

    Post-generation reflection captures new invariants into .design/memory.json.

DESIGN:OS Operating Manual • Vector Memory Loop
14 / 28
DESIGN:OSAct 4 • Crucible
15 / 28 • Crucible Capture
  • User Edits

    Direct manual code corrections

  • Critique Prompts

    Natural language design feedback

  • Merged PR Diffs

    Approved production changes

Crucible Engine
.design/memory.json

Deduplicated, structured, and ranked design memory corpus

0 Repeat Defects
DESIGN:OS Operating Manual • Crucible Distillation
15 / 28
DESIGN:OSAct 5 • Color Science
16 / 28 • Color Science
Legacy HSL Flaw

Perceptual Distortion

Yellow at L=50% is 3x brighter to human eyes than Blue at L=50%, corrupting contrast ratios.

Uneven Lightness
OKLCH Standard

Perceptual Uniformity

Constant perceived brightness across all 360 hues in Display P3 wide color gamut.

ΔEOK ≤ 0.02 Patch
DESIGN:OS Operating Manual • Color Science
16 / 28
DESIGN:OSAct 5 • Taste Rubric
17 / 28 • Taste Radar
Core 0 Mandate

Consistency

100% token binding and component registry reuse. Breaching Core 0 vetoes release.

≥ 8.0 / 10
Release Quality Floor
  • LayoutNo soup > 2
  • TypographyModular scale
  • Spacing8px rhythm
  • IconographySingle family
  • MotionLadder bounded
  • DepthTonal surfaces
DESIGN:OS Operating Manual • 6+1 Taste Rubric Radar
17 / 28
DESIGN:OSAct 5 • UX Laws
18 / 28 • 12 UX Laws
≥ 44px
Fitts’s Law

Touch target floor for mobile ergonomics.

7 ± 2
Miller’s Law

Cognitive chunking limit in navigation lists.

O(log n)
Hick’s Law

Minimizing decision choices per viewport.

100%
Jakob’s Law

Familiar platform mental models and conventions.

  • Von Restorff
  • Serial Position
  • Tesler’s
  • Parkinson’s
  • Postel’s
  • Zeigarnik
  • Goal Gradient
  • Aesthetic–Usability
DESIGN:OS Operating Manual • 12 Cognitive UX Laws
18 / 28
DESIGN:OSAct 5 • Personas
19 / 28 • 11 Personas
Swiss Editorial
Grotesk • Asymmetric
Max Contrast
Hyper-Density
Monospace • 12px Grid
Data Heavy
Neo-Brutalist
Hard Borders • 0 Radius
High Impact
Spatial Glass
Backdrop Blur • Depth
Tonal Glow
DESIGN:OS Operating Manual • 11 Design Personas
19 / 28
DESIGN:OSAct 6 • Motion Ladder
20 / 28 • Motion Ladder
  • T1 Micro-Feedback

    150ms CSS hover/active

  • T2 View Transitions

    State & route swaps

  • T3 Entrance Reveal

    Scroll-driven CSS

  • T4 Motion / anime.js

    Orchestrated sequences

  • T5 GSAP Timeline

    Pinning & scrubbing

  • T6 Scroll-Cinema

    3D WebGL camera

DESIGN:OS Operating Manual • The Motion Ladder
20 / 28
DESIGN:OSAct 6 • Scroll Cinema
21 / 28 • Scroll-Cinema
Leg 01

Hero Orbit

Continuous spatial camera rotation at 60fps.

Seam 1 Velocity Lock
Leg 02

Exploded View

Internal geometry breakdown along Z-axis.

Seam 2 Vector Match
Leg 03

Macro Core

2K subpixel texture dive with zero rewind.

DESIGN:OS Operating Manual • Scroll-Cinema Flight
21 / 28
DESIGN:OSAct 6 • 3D GFlow
22 / 28 • 3D GFlow
Hardware Accelerated WebGL
2K
Subpixel Texture Detail

3D Spatial
GFlow

Hardware accelerated shaders with Draco geometry compression and strict lifecycle disposal.

0 MB
GPU Memory Leaks
DESIGN:OS Operating Manual • 3D Spatial GFlow
22 / 28
DESIGN:OSAct 6 • Visual Regression
23 / 28 • VR Baseline
Desktop • 1920 × 1080
Pass

Zero overflow & full stage scaling

Laptop • 1440 × 900
Pass

Fluid container query responsiveness

Mobile • 390 × 844
Pass

Touch targets ≥ 44px & 0 horizontal clip

DESIGN:OS Operating Manual • Visual Regression
23 / 28
DESIGN:OSAct 6 • Taste Voting
24 / 28 • Compounded Craft

Compounded
Craft Velocity

Every delivery pass compounds design taste directly into the shared organizational memory.

10X
Team Design Velocity
  • N Parallel Variants

    AI synthesizes competing approaches simultaneously

  • Taste Vote Gate

    Scored against 6+1 aesthetic rubric

  • Permanent Growth

    Lessons stored in local vector corpus

DESIGN:OS Operating Manual • Compounded Craft
24 / 28
DESIGN:OSAct 7 • Delivery Pipeline
25 / 28 • Delivery Refinery
  1. 06Full-Stack Auditdesign-os audit (Exit 0)
  2. 05Rendered A11yWCAG 2.2 AA Contrast
  3. 04Paired TokensDark & Light token pairs
  4. 03VR Baseline3-Viewport Matrix
  5. 02EvidenceResearch grounding
  6. 01Flow LintMulti-screen state machine
DESIGN:OS Operating Manual • Delivery Pipeline
25 / 28
DESIGN:OSAct 7 • Semver Matrix
26 / 28 • Semver Matrix
  • Patch
    Non-breaking token tweak, typo fix
    ΔEOK ≤ 0.02
  • Minor
    New component variant, non-breaking feature
    ΔEOK ≤ 0.05
  • Major
    Brand color overhaul, deleted token alias
    ΔEOK > 0.05
DESIGN:OS Operating Manual • Semver PR Matrix
26 / 28
DESIGN:OSAct 7 • The 5 Fables
27 / 28 • 5 Design Fables
  • Fable 1The Seamless Flight (Kinetic Seams)
  • Fable 2The Two-Way Bridge (Port 9410)
  • Fable 3The 14-Plank Floor (Zero Luck)
  • Fable 4The Motion Ladder (Clamped 60fps)
  • Fable 5Sol Vector Distillation (.json)
DESIGN:OS Operating Manual • The 5 Design Fables
27 / 28
DESIGN:OSAct 7 • Production Ready
28 / 28 • Ready to Ship

Ready for
Production

Your multi-runtime design system is compiled, audited, and ready to deploy.

/ui:generate landing page for my next big idea
Ship Today • 100% Deterministic
DESIGN:OS Operating Manual • Production Ready
28 / 28

Tổng Quan 28 Slide Masterclass