THIOS: DESIGN SYSTEMS ON AGENT RAILS

What Thios Is

Open-source modular structures — saunas, greenhouses, offices — from geodesic geometry. Six sub-brands. Four production subdomains. One Figma file. One OnShape document. One designer.

By 2026 the bottleneck in design isn't drawing — it's keeping intent, spec, code, and tokens consistent across that surface count. What if the designer's deliverable was the rules, and agents were the IC enforcing them? The case study below is the answer.

The Five-Surface Problem

Most design systems rot quietly: a hex drifts, a Figma variable disagrees with a CSS custom property, a component ships without an entry in the docs. By the time anyone notices, dozens of components reference the wrong value. Thios's design decisions live in five places, all readable by agents, all mutually diffable, all referenced from one canonical rule layer:

The Agent Stack

DESIGN.md is the spine — agent-native markdown; Section 9 is explicitly an “Agent Prompt Guide,” the first thing any agent reads when generating UI. tokens.json is the bridge — W3C Design Tokens, three layers (primitive / semantic / surface), imported into Figma Variables via Tokens Studio. main.css is the running code (18,000+ lines, kept in sync across four subdomains by a deploy gate). design-system.html is the live spec (109 KB, every component with working examples). OnShape is the parametric source for sphere geometry — 54 elements driven by one Variable Studio, the same shape as tokens.json flowing into Figma, but for physical product.

The first formal Thios skill, audit-design-token-drift, diffs all four upstream surfaces and outputs a dated audit. The agent catches drift; the human decides what to fix:

## Summary

Total drift findings: 7
- Critical: 2  (rules-layer disagreement)
- High:     1  (DESIGN.md ↔ tokens.json mismatch)
- Medium:   3  (main.css ↔ design-system.html gap)
- Low:      1  (orphan token)

CRT-1 — DESIGN.md self-contradiction on canonical brand gold
  Section 2, line 35:  #E8AF00 (canonical, dated 2026-04-20)
  Section 9, line 440: Gold (#F0B800)
  → The agent guide teaches the wrong gold. Production code is fine.
    Fix: align Section 9 to #E8AF00. Loop step: 6 (Document).

CRT-2 — "Premium gold" #D4A000 has no entry in tokens.json
  Documented in DESIGN.md Section 2; used by .hero-cta-primary.
  → Add primitive.color.gold.600 + semantic.brand.secondaryPremium.
    Loop step: 3 (Tokenize).

First formal audit; the baseline for the trend line.

Sphere Branding — Proof the System Scales

Six sub-brands currently share the system: Thiosphere (brown #96643F), Saunosphere (red #E25141), Agrosphere (teal — same as primary, intentionally), Ergosphere (blue #1D63BE), Immosphere (purple #4D04AC), Auxosphere (gray). Each is a first-class semantic token with mode variants in Figma — one component template, six brand surfaces.

The May audit found a real drift here: Auxosphere reads #909090 in DESIGN.md but resolves to #6c757d in tokens.json. That's the kind of bug a single-surface workflow ships silently. Six sub-brands plus four production sites is exactly where manual drift detection breaks.

Results

• Five surfaces in sync today — all readable by agents, all mutually diffable, all referenced from a single canonical rule layer.
• 4 production subdomains kept in CSS-sync via a make check-css-sync deploy gate — no silent rot between thios.co, blog, store, and partners.
• 7 drift findings caught in the first formal token audit (May 2026), including a self-contradiction inside DESIGN.md and a documented brand color absent from tokens.json.
• 1 published skill (audit-design-token-drift) following the agent-skills anatomy, with 5 more on the roadmap.

Industry Context

This isn't operating in isolation. Three converging signals say markdown-as-instruction-layer is the shape design systems are settling on for the agent era:

• Anthropic's Skill format — prompted markdown skills with frontmatter and verification, shipped in Claude Code.
• Figma's Bring your design system package — accepts an npm-published React design system plus a Guidelines.md, then uses both to generate apps in Figma Make. Validates the pattern; locked to React/Vite/npm. Thios's vanilla stack is incompatible by design — but DESIGN.md is the same shape as Guidelines.md, shipping a year ahead and stack-agnostic.
• addyosmani/agent-skills — 20 SKILL.md files standardizing the workflow-as-markdown pattern across Claude Code, Cursor, Gemini, Windsurf, Copilot. Thios's _agents/skills/ follows this anatomy and is structured to publish back upstream.

Stack-agnostic markdown rule layers are the convergent answer. The Thios experiment was just early to it.

Empirical commitment. Before publishing the “skills > prompts” claim everyone in this space is waving around, I benchmarked it. The skill I built — audit-design-token-drift — lost to a one-line prompt on recall (76% vs 86%) on a frozen four-surface snapshot. Both missed the same value-drift finding (Auxosphere #909090 vs the resolved #6c757d) that the vague baseline caught. The skill's actual win is in form: every skill-run audit had Loop-step routing, file:line citations, and a Verification checklist; no other strategy did. The full results — per-finding heatmap, per-strategy table, applied decision rules — live alongside the design-system pages at thios.co/design-system-bench.html, with the harness and raw outputs in _agents/bench/audit-skill-bench/. I treat “skills > prompts” as an unverified hypothesis until the mean recall flips back.

Next Surfaces (Roadmap)

Three surfaces are designed but not yet running. Each will be added to the audit skill before it goes live so drift detection scales with the system.

• Cron-driven audits — audit-design-token-drift runs on demand today. Wiring it to a weekly schedule turns drift detection from a willpower problem into infrastructure. Next month's audit-vs-this-month delta becomes the trend line.
• Figma MCP — Tokens Studio + html.to.design plugins documented in design-system-loop.html step 2; once Figma Dev Mode MCP is enabled on the Thios-logo file, agents will read and write Figma Variables the same way they audit DESIGN.md today.
• CAD hygiene agent — feature naming conventions, mate health, build-correctness checks on the OnShape document. Same diff-then-fix shape as the token audit, applied to physical geometry. The 54-element inventory is the baseline.

The interesting career question for senior designers in 2026 isn't “can you use AI?” — it's “have you written infrastructure agents follow?” The work isn't using AI. The work is writing the rules AI follows.