Client
Oska Health
Role
Product Designer
Category
Digital Health
Building a Design System from Code - bridging the gap between design and engineering
Project background
Company overview
Oska Health is a digital health platform connecting patients with health coaches. The product spans multiple surfaces: a patient app, coach back-office, and admin system – all sharing a common codebase built on Tailwind CSS and shadcn/ui.
Team
Product Designer (me), 5 Engineers, CPO
Entering a messy and inconsistent ecosystem
We had no design system in Figma. Designs were created component by component, often inconsistently, leading to misalignment between what was designed and what was built. Engineers were the source of truth – but that truth wasn't visible to design.
Solution: code as source of truth
I decided to make code the source of truth – and make it visible. Using VS Code and Claude, I extracted all existing components, colors, typography, and spacing directly from the production codebase and built an internal design system page.
This gave me – and the team – a single reference point that actually reflected what was live in production.
Impact
Faster handoffs
Annotations now use the same naming as code (e.g. text-xs, bg-primary), reducing ambiguity during development
Less back-and-forth
Engineers and designers now reference the same source, reducing misalignment between design and production
Direct code contributions
With access to the codebase and experience prototyping locally, I'm able to identify UI inconsistencies directly in code – and ready to commit small fixes.
Check out my other work
Lead UI/UX Designer
Building a Design System for Lustery – a fast-growing video platform