DX Spatial Grid:↳ Token Inspector
A lightweight DX demo for React 19 and Tailwind CSS v4. Inspect nodes, calibrate spatial tokens, and export CSS, JSON, or agent prompts from the browser. Building in public on GitHub.
Back to Work// 01
Overview
The DX Spatial Grid & Token Inspector is a self-contained browser tool for exploring layout-oriented design nodes and editing spatial tokens on screen. It grew out of the same design-systems problem I was solving in Mothership: AI tools and handoffs drift when tokens and layout rules are not visible, inspectable, and exportable in the environment where the UI actually runs.
// 02
Challenge
Design tokens and spatial layout rules often live in Figma variables or JSON files, but the truth is in the compiled UI. Without a harness that bridges those layers, calibration becomes guesswork and every agent or engineer session starts from zero. I needed a small, honest DX surface that made node structure and token values legible in the browser, then let me copy results back out as CSS, JSON, or a paste-ready agent prompt.
// 03
Try it
Harness + overlay tabs · no login required
MIT · building in public
// 04
Outcome
The harness ships two modes: a three-panel playground (Template Grid Manager, Token Calibration Unit, Live Token Preview) and an overlay demo that wraps real host UI for on-page inspection. It is MIT-licensed, deployed on Vercel, and iterated in public as proof of design-systems craft with code-forward execution.
// 05
Reflection
This is a portfolio-scale open-source slice, not a product launch. It exists to show how I think about DX tooling: small surface area, deterministic exports, and no fake in-app AI. The repo is the source of truth; the live demo is the proof.