CBS Sports • 2022–Present

Engineering DS Tokens

Figma
design
Supernova
renders scss
Delivery
pr + push
GitHub
merged
Ready. Pick a flow above to play.

Role

Sr. Product Designer

Team

1 Lead Developer

Skills

Design Systems

Product Design

Coding

Tools

Cursor

Figma

Supernova

Overview

Designers systematize, automation codes, AI delivers

Token delivery used to break on someone else's timeline. A designer would push a token change in Figma, Supernova's GitHub bot would silently fail somewhere in its delivery step, and the fix lived in tribal knowledge held by one or two engineers who had to pause their roadmap work to triage. I designed and wrote the backup pipeline for the one fragile layer myself: a written runbook an AI agent reads top to bottom, with nine pre-flight checks and three destination-CI checks so a bypass PR is byte-identical to what the bot would have pushed. I partnered with our lead developer to approve the PRs and walk me through each destination repo's specifics.

The Playbook home page showing a token delivery simulator that walks a packet from Figma through Supernova, Delivery, and into GitHub.

The challenge

One fragile layer was costing days

Most of the pipeline was solid. Only the handoff to GitHub was fragile, because it depended on permissions that silently stopped working. We aligned on three goals before writing a single line of YAML.

Business goals

Get token changes from Figma to a merged PR same-day, every day. Stop spending engineering hours to triage someone else's outage.

Designer goals

A predictable path. When the bot fails, designers shouldn't have to file a ticket and wait. They should see their changes moving through the same pipeline a few minutes later.

System goals

A bypass that bypasses nothing important. Every safety check, code owner, branch protection rule, and CI gate remains in place, so a recovery PR looks exactly like a normal one.

Mapping the pipeline

Four layers, only one is fragile

Before we wrote the bypass, we mapped the lifecycle so we'd know exactly which layer to replace and which layers to leave alone. Figma, the Supernova plugin, and the per-brand exporter were healthy whenever Supernova's preview said "Up to date." Layer 4, delivery to GitHub, was the only one we needed to back up. The bypass replaces layer 4 and only layer 4. Nothing else changes.

The four-layer pipeline laid out on the Rundown page: Figma, Supernova plugin, Supernova exporter, and Delivery to GitHub. The first three are healthy; only delivery is fragile.

The system in markdown

Prose that actually executes

The full bypass consists of four file types: a runbook per exporter, a slash-command skill that registers it inside Cursor, a CI template that drops into every destination repo, and a public-facing playbook site that documents the system. The runbook isn't a description of the process. It is the process. An AI agent reads it top to bottom and runs every step exactly as written, with all of the constants in one table so nothing drifts out of sync.

Runbook

exporters/<brand>/bypass-supernova-<brand>.md, the executable walkthrough. Constants table, pre-flight gates, Supernova API calls, and the PR steps. One per exporter, source of truth.

Slash command

.cursor/skills/bypass-supernova-<brand>/SKILL.md, registers the slash command in Cursor, takes the four per-delivery inputs, and hands control to the matching runbook. Halts rather than guessing.

CI template

destination-ci/validate-supernova-tokens.yml, drops into every destination repo's GitHub Actions. Three checks (header, size, scope) on every PR that touches the token file. Required status check, so hand-edits can't ship.

Playbook site

playbook-design-system-token-delivery, plain-language story, interactive simulator, and a developer view with every runbook .md embedded live. Teaches the whole system from Figma to GitHub.

Safety gates

Nine pre-flight checks before anything moves

Every check is a hard stop. Most run before any change is made, so a bad run is caught before it can do damage. The bypass refuses to bypass anything important: branch protection, CODEOWNERS review, commit author, and Supernova's own preview pipeline all remain exactly as the normal flow would leave them.

Nine pre-flight checks listed on the Rundown page: auth verified, push access asserted, pipeline failure confirmed, preview-only render, diff-inspection pause, commit author override, smart label filtering, feature-branch only, and CODEOWNERS preserved.

Destination CI

Three checks catch drift before merge

Whether Supernova's bot or the AI bypass pushed the file, every destination repo runs the same checks. Hand-edits that strip the header, shorten the file, or modify other files fail and block the merge, so a bypass PR cannot silently drift away from what the bot would have produced.

Header check

Line 1 must start with Supernova's generated comment. Blocks hand-edits that remove it.

Size sanity

File must have at least 20 lines and 10 SCSS variables. Catches truncated or empty pushes.

Scope warning

Warns if other theme-helper/ files changed alongside _variables.scss. A token PR should only touch one file.

First production run

Twelve minutes from failed pipeline to merged PR

On 2026-04-21, Supernova pipeline 136244 failed at delivery. The bypass ran end-to-end, destination CI caught a genuine downstream regression in a hand-written consumer file, the consumer fix proceeded through normal CODEOWNERS review, and the PR merged to main the following morning. Same author, same reviewers, same checks: the only difference was who opened the PR.

Token delivery test timeline: pipeline failed, slash command fired, pre-flight passed, preview job succeeded, diff inspection paused, PR opened, CI caught a real downstream issue, consumer fix pushed, and PR merged to main.

For developers

A developer view next to the simulator

The plain-language overview lives on the home page; the developer view sits beside it, with constants, payloads, the slash command, the execution flow, the CI checks, and every runbook .md embedded live. Same source of truth as the markdown files, with a more accessible surface for engineers debugging at any hour.

The For developers page: tabs for overview, pipeline constants, slash command, execution flow, CI validation, state check & audit, and runbook files.

Reflection

Where design ends and engineering starts

I'd done substantial token work before, but writing prose precise enough for an AI agent to execute was new territory. The default designer instinct is to leave room for interpretation; for a runbook, every constant has to live in one table and every failure mode has to refuse the run. Owning this end to end with one engineer as the reviewer (given his deep familiarity with the destination repos), and shipping the same artifact in markdown, in a Cursor skill, in a CI template, and as a playbook site, is the closest I've come to systems work that actually behaves as a system.

Outcomes

What changed when designers owned delivery

/01

~100×

Faster recovery. Fixes used to take days; the first production fix on the bypass took under five minutes, with every safety check still in place.

/02

11 / 11

Brands covered. The same runbook pattern works for every CBS exporter: eleven ready bypass tiles on the playbook home grid, with one brand still rolling in.

/03

0

Engineer hours per outage. A bypass PR reads as a normal PR (same author, same reviewers, same checks), so engineers remain on roadmap work rather than triaging.