SneakySwing Design System:
Scaling Consistency for AI-Native Workflows

Project Overview

The TL;DR

Problem

Navigating Design Ambiguity

When I joined, token naming was a mess. There was a confusing mix of purpose-based and size-based labels (font-title vs. font-16). Also, I found as many as 22 different font styles across the codebase.

Solution

Establishing a Shared Language from Scratch

I built the SneakySwing Design System independently. It's a lightweight, unified system of tokens and components designed to grow with us as we scale. By setting this foundation, I've made it easier for design, engineering, UXR, and marketing to stay on-brand and keep everything accessible by default.

01

Consolidate and Name Styles Strategically

From:

A confusing mix of size- and intent-based labels, with 22 font styles.

To:

Intent-driven naming. Tokens like font/size/title-cta provide instant clarity. Values can be updated centrally, allowing everything to sync automatically. Reduced to 7 font styles.

02

Define Semantic Colors

From:

Manual hex picking across screens and components. Additionally, color roles were overlapping. For instance, Red 500 functioned as both a feedback and an error color.

To:

Semantic tokens shift the focus from colors to roles. For designers, selecting status/success ensures that the visual logic remains intact. For engineers, code becomes self-documenting; using brand/primary provides instant context and replaces guesswork.

03

Ensure Accessibility across Components

From:

No accessibility checks.

To:

WCAG 2.1 AA (4.5:1 minimum contrast) is embedded at the token layer by default.

04

Write Specs and Usage

From:

Scattered component decisions with no clear usage reference.

To:

Structured specs with usage guidance, variant states, and do/don't examples for consistent implementation.

Design-to-Code

Driving Engineering Adoption through AI

The Design System was ready, but how do you implement changes across hundreds of legacy screens at once?

Building the system was only half the battle — the real challenge was migrating hundreds of existing UI. At the time, the engineering team was focused on shipping new features, making Design System adoption a lower priority. To accelerate the rollout and lower the barrier to entry for them, I took the initiative to automate the audit using Claude Code.

By connecting Figma MCP with our GitHub Repo, I ran a gap analysis that revealed critical inconsistencies such as:

• Typography Mismatch: The codebase relied on .systemFont (SF Pro) instead of our brand font (DM Sans). It also lacked definitions for line height and letter spacing.
• Color Debt: I found 31 redundant color sets in Assets.xcassets with duplicate definitions and incorrect hex values that deviated from the new system.

The Delivery

After validating the technical feasibility with the engineers, I bypassed the manual back-and-forth by creating 6 high-priority Jira tickets. Each ticket included AI-generated code suggestions from Claude, providing engineers with actionable starting points for their refactoring.

Impact & Result

Empower the Team to “Vibe-Code” On-brand with High Usability

By syncing our Figma design system directly to a real-time design-system.md file, researchers can generate on-brand surveys and vibe-coders can rapidly develop MVPs. This ensures all deliverables remain perfectly consistent.

On-brand surveys and vibe-coded personality cards, all powered by the design system.

Reflection

Delivering Design as Code

The boundary between designer and engineer is blurring. With the power of AI, design is now done in code to become living and breathing. This allows people like me from non-technical backgrounds to provide Markdown/JSON files, or even automate audit workflows (from design-system.md to GitHub to Jira tickets) to create a custom Claude "Skill."

While Claude Code is transformative, it still experiences hallucinations. For example, my design-system.md occasionally included styles I never actually defined 😵‍💫. This reinforces that human oversight remains essential to maintaining quality. Overall, this project allowed me to reach a depth of understanding that would not have been possible by staying only on the canvas.