Watch production. Click through live pages. Notice what looks off, what's missing, what real users hit.
Observation is a repeatable task, which means Claude can do it on a schedule. Set up a weekly run via the schedule skill, or trigger ad-hoc when you're about to ship a change. A good routine for this project:
design-system.html — flag visual drifttokens.json to catch designer-code divergenceYou stay the human-in-the-loop for deciding what to actually fix; Claude just surfaces the list.
"Login looks like Google, not Thios." "Alerts aren't styled." "Handbook chapters render as plain divs." — these become the brief for step 2.
Because there's already a working brand in main.css — colors, type, spacing, components — you do not start Figma from a blank canvas. You let plugins read the code and recreate it in Figma automatically. From that point on, Figma and code are looking at the same values instead of drifting apart.
Tokens Studio plugin — reads tokens.json and creates Figma Variables one-for-one. No retyping of hex codes, no human-error drift. Each of the three collections (primitive / semantic / surface) becomes its own Figma Variable Collection. When you change a value in Figma later, Tokens Studio can push it back out to tokens.json for you.
html.to.design (Divriots) — optional. Point it at thios.co/design-system.html and it pulls the live page in as flat Figma frames. Use those frames as visual reference while you rebuild components properly — don't convert the imported frames into components directly, they'll be messy.
Figma Variables (native import) — Figma itself can import JSON as a fallback. Stricter about format than Tokens Studio, so useful for sanity-checking.
Once the first import is done, design new components in Figma knowing every variable maps to a real token the code understands. Changes you make in Figma flow back to tokens.json via Tokens Studio — no manual copy-paste.
Discovers missing tokens ("we need a warning color"). Surfaces visual conflicts ("store's hero and handbook's hero shouldn't use the same .hero-content"). Forces explicit decisions.
Export Figma decisions to lib/styles/tokens.json (W3C format). Primitive → Semantic → Surface layers make intent explicit.
Exposes structural ambiguity: "is this an accent or a warning?" Catches two-value drift (e.g., main.css said #F0B800 while design said #E8AF00).
Implement in main.css. Minify. Run make sync-css to copy across blog + store bundles.
make check-css-sync fails the pre-deploy gate if any subdomain drifts. Undefined classes surface as rendering bugs — fed back into tokens or design.
Deploy all four surfaces via SSH + tarball. make deploy-check gates on hurl tests + smoke + security + CSS sync before shipping.
Deploy failures surface environmental drift. Post-deploy smoke tests catch regressions. Live site becomes the next Observe target.
Update design-system.html with every pattern you just built. Self-contained page — shows the real classes with live demos.
Writing the doc exposes inconsistencies ("wait, .alert--success in docs vs .alert-success in code"). Forces naming discipline. Loops back into Observe — "what's documented vs what's used?"
Two Figma plugins that do most of the heavy lifting in step 2.
Keeps design tokens in sync between Figma Variables and your code's JSON. This is the plugin that makes “one source of truth” actually possible.
tokens.json in the W3C Design Tokens format{primitive.color.teal.600} stays linkedlib/styles/tokens.jsonImports a live web page into Figma as editable frames. Lets you see your production UI as Figma objects without screenshotting or tracing.
thios.co/design-system.html) or local HTML filethios.co/design-system.html → get a staging page in FigmaEach pass catches a drift: a wrong hex, an off-brand font, a page that doesn't match. Over time, production converges on the single source of truth.
Documentation forces you to name things consistently. BEM vs. single-dash? Pick once, the loop enforces it everywhere.
Automated checks (make check-css-sync) fail the deploy gate when things go out of sync. You can't silently rot anymore.
Each cycle adds patterns to the doc. Next time you build, you reach for a documented class instead of inventing inline styles.
Commit messages + the tokens.json history tell you when gold became #E8AF00, when primary-light was corrected. No more "why is this color like this?"
The more patterns that live in the system, the faster new pages compose. A novel page should be 80% existing classes, 20% new thinking.