The Problem
Voxco's platform had run for years on a legacy jQuery library. There was no token system, no shared component language, and no single source of truth. Designers and developers solved the same UI problems independently—and every new feature shipped with subtle visual regressions.
The breaking point was a rebranding initiative. Developers found hundreds of hardcoded color values scattered across the codebase. A brand color update required hunting through the entire platform file by file. The system had no scalability—and no path toward consistency without a structural overhaul.
The deeper problem: full-stack developers with no design background were making front-end decisions by default. Without shared standards, every new feature compounded existing inconsistencies. Accessibility was not systematically addressed. The platform was accumulating UX debt faster than it could be paid down.
The Approach
I initiated and owned the design system end-to-end — with no dedicated team or budget. What started as a Figma component library evolved into a production-grade monorepo: token architecture, AI-integrated workflows, Storybook documentation, and a governance model built to scale without collapsing.
Audit & Scoping
Catalogued recurring UI patterns in the legacy codebase, identified accessibility failures, and scoped the gap between current state and a token-based system.
Token Definition
Mapped Voxco's brand guidelines to semantic tokens and built the full component library in Figma first — color tokens, typography, spacing, and 51+ components with all interaction states. Once the design language was validated and stable, the system was migrated to Storybook as the authoritative documentation layer.
AI Workflow Integration
The migration from Figma to Storybook was itself AI-enabled. Early POC work on the Survey Builder and Survey Flow using Antigravity revealed that developers couldn't realistically own a custom component system at scale — so I stepped in and built the Storybook infrastructure myself. A key architectural decision followed: adopt shadcn/ui as the foundational layer for all general-purpose components, reserving custom components exclusively for Survey Builder and Survey Flow-specific patterns. With that foundation stable, I built domain-specific AI skills and MCP integrations into the repo for on-convention component generation, story writing, and documentation.
Real-world Validation
Applied components directly in the survey builder rebuild, treating integration friction as signal for system improvements and iterative refinement.
The Solution
Foresight provides 51+ production-quality components — built on shadcn/ui as the foundational layer, with custom components reserved for Survey Builder and Survey Flow-specific patterns. The system originated in Figma, where the design language, color tokens, and component states were defined and validated, then migrated to Storybook as the production documentation layer consumed directly by development and AI tooling. All components follow a strict token-based architecture.
Token Architecture
Semantic tokens enable one-line global theme updates across the entire platform. Mapped directly from Voxco's brand guidelines, the token layer is the single source of truth for every visual decision — eliminating hardcodes and preventing accidental UI drift across the product surface.
AI-Native Workflow
AI skills and MCP integrations built into the repo generate components, stories, and documentation that strictly conform to established conventions — using the design system's own token rules, component API patterns, and naming conventions as structured input context. Artifacts are validated via monorepo gates and real-world usage in the Survey Builder before being committed, not manually corrected after generation. The pipeline produced the ToolboxItem, LogicSet, and DiagramCanvas Storybook documentation — each with full state coverage and token mappings — as direct outputs of this workflow.
Monorepo Governance
ESLint rules and Vitest coverage enforce architectural consistency across all packages, with Turborepo orchestrating build and quality checks. Governance prevents the architectural drift that compounds as teams and feature surface grow.
Production Components
Standardized interaction patterns ensure seamless parity between design and development. Figma established the design language at the system level; Storybook is the reference for dev consumption — with semantic architecture, usage guidelines, and full interaction states documented within. Domain-specific components like LogicSet (9 stories covering all rule types and states) and DiagramCanvas (4 custom node types with token-mapped styling) demonstrate that the system scales from general-purpose UI to complex enterprise interaction patterns without breaking conventions.
Outcomes
30–50%
Faster development per feature
~67%
Fewer design-to-dev gaps
50%
Reduction in accessibility defects
~25%
Fewer regressions
The most concrete evidence of impact is the survey builder rebuild itself. A full rebuild of a 49-component, multi-canvas enterprise application was developed without a mid-fidelity Figma file. Design moved directly from low-fidelity sketches to coded components via Storybook — a workflow only possible because the design language had already been established and validated in Figma at the system level, and because AI tooling was integrated into the system's own infrastructure.
As a result of this enablement, the Design System became a "trusted source of truth," allowing the team to move directly from low-fidelity concepts to coded components using Storybook documentation and replicable patterns — skipping mid-fidelity Figma entirely for complex features like the Survey Builder's drag-and-drop canvas and logic authoring system.
Senior Learning
Maintaining velocity as a solo contributor required integrating AI into the workflow structurally—not as a shortcut, but as a system. Building skills, MCP integrations, and domain context directly into the repository meant AI tools could generate on-convention code, stories, and documentation rather than requiring manual correction after every output.
This project demonstrates that design system ownership at full lifecycle—from token architecture through governance and AI-native documentation—is possible even under constraints. Systems thinking at scale means decisions made at the token layer cascade correctly through the full component surface, enabling developers and preventing the collapse that often happens as teams scale without governance.
Next Steps
That evolution is still in motion. The ToolboxItem, LogicSet, and DiagramCanvas are already documented in Storybook with full state coverage — and the remaining custom Survey Builder and Survey Flow components are next in the documentation queue. Once complete, the full library migrates to Paper. Unlike Figma, Paper's canvas is real HTML/CSS code, meaning the production Storybook codebase can be imported directly into the design editor and edited visually, with changes exporting back as React/Tailwind instantly. No handoff. No manual recreation. Code and design in sync, in both directions, for the first time.