A Machine-Readable Design System That Ships, Not Sits

Context & My Role

HikeOn's ERP was a greenfield product: no prior design system and no shared vocabulary between design and engineering. My mandate was to make the interface machine-readable — not just documented in Figma, but expressed as stable component APIs and tokens that could ship in Vue.js without a translation layer breaking every sprint.

I led component architecture, semantic token naming, accessibility baselines (WCAG AA), and the handoff model with two Vue engineers. Storybook became the shared surface where design intent, code, and documentation met.

Storybook: From Components to Vue in Production

Why Storybook

Figma alone cannot enforce runtime behavior. I introduced Storybook as the contract layer: each Vue component got stories that mirrored how we expected it to behave in the app — not a pixel-perfect screenshot, but props, slots, and states that engineering could implement against and QA could verify.

How we used it

• — Stories as the API sketch — One story per meaningful state (default, loading, empty, error, disabled). Controls exposed prop names aligned with Vue SFC props so naming stayed consistent from design review to pull request.
• — Docs for handoff — MDX / Docs pages described usage, dos and don'ts, and accessibility expectations. New engineers onboarded from Storybook before touching product routes.
• — Design tokens → CSS variables — Semantic tokens from Figma mapped 1:1 to Vue-scoped CSS variables. Storybook themes used the same token set as production, so drift between "library" and "app" was visible immediately.
• — From story to prod — Components lived in a shared package consumed by the ERP app. A component wasn't "done" when the Figma frame was approved; it was done when the story passed review, the Vue implementation matched the story contract, and it shipped behind a feature flag or in a release branch used by real users.

Outcome

Storybook didn't replace judgment — it reduced rework. Fewer "which variant is canonical?" debates, faster sprint reviews, and a single place to see whether a component was production-ready. The system stayed alive in the repo, not archived in a file handoff.

What I Learned

A design system is a product. Storybook was the closest thing to a release channel for that product — versioning, documentation, and consumer feedback from engineers who pulled the package every day. Treating stories as seriously as product screens is what made the handoff to Vue sustainable at scale.