Craft the system. Ship the screens.
Building Lyse with a team of five meant every decision had to compound. Before writing a single component, the choice was clear: invest in a design system early, or pay for inconsistency forever. Figma became the central hub where creativity and craft converged. Every color, every spacing value, every component variant lived there first. The library grew alongside the product, polished day after day, version after version.
The architecture follows two layers with strict separation. Primitives define the raw palette: 5 color scales, 9 typography levels, spacing, radius, opacity. Semantics map those primitives to purpose: --background-brand-strong, --text-secondary, --border-subtle. Components consume only semantics, never primitives. Adding a new theme means writing roughly 40 primitive overrides. Semantics stay untouched, components stay untouched. A week-long migration becomes an afternoon.
2,000 designers used Figma. We gave them code.
Once Lyse stabilized, the Figma library had over 80 components with every variant and state fully specced. More than 2,000 designers were already using it. The next step felt obvious: make the library accessible in React. The Figma components became a Vercel Registry, shadcn-compatible, installable with npx shadcn add @lyse/button. Design in Figma, ship in React. Same tokens, same variants, same contract.
The timing turned out to be perfect. Designers started adopting Claude Code, vibe coding on v0, shipping with Codex. They needed a bridge between their Figma files and production code. The registry became that bridge. Not a design tool pretending to generate code. Not a code tool guessing at design intent. A single source of truth that speaks both languages. Open source wasn't charity. It was conviction. The best design systems aren't locked behind enterprise licenses. They're adopted because they're good. 20+ companies have taken Lyse Library and built their own design system on top.
The system checks itself. Designers ship.
The registry isn't a snapshot. It evolves with the product, updated based on real needs and community feedback. New components ship when teams ask for them. Existing ones get refined when edge cases surface. Every component published must pass the same contract: typed props, Figma spec parity, semantic tokens only, keyboard navigation, WCAG 2.1 AA, and documented variants. If it doesn't pass, it doesn't ship.
The pipeline is what changed the pace of everything. Claude Code skills encode the design system's own rules: Figma spec to code scaffold to review to registry publish in a single flow. What took 2 hours per component now takes 15 minutes. 8x faster. No manual handoff documents. The system checks itself. Beyond the internal pipeline, these skills were shared with the community. Designers and developers using Lyse Library can create and update components, document their own conventions and guidelines, all powered by the same automation that built the system in the first place.
Design scales. Process decides how fast.
Treating the registry as a quality gate was the best decision. Not as a distribution mechanism. As a standard. When “it's in the registry” means something specific (typed, accessible, documented, theme-aware), the entire team aligns around that bar. The registry doesn't just ship components. It ships standards.
Building the token architecture early was the highest-leverage decision in the entire project. Every theme change, every new screen, every community fork inherits those decisions automatically. Craft doesn't mean going slow. It means building infrastructure so quality becomes the default. Dozens of explorations to nail the right patterns, then winning patterns extracted into a system with tokens, variants, and documentation. New screens assembled in hours, not days. Pixel-perfect from the first draft because the system already encodes the decisions.
