The need for a custom native app for our sales teams had been building at Freedom Forever for years: our sales dealers were paying up to $30k a month for third-party canvassing software that wasn’t integrated with our platform — a Freedom Forever solution meant free, fully customized tooling and a genuine differentiator in the industry.

In September 2022, the app found its moment and Volt was born. I took the lead design role and worked through daily stand-ups and sprints with a small team. We launched the MVP in January 2023 with its core features prioritized for sales reps and appointment setters in the field.

Within the first four months, downloads doubled, leads created grew from 59k to 583k, and events per user tripled.

Over the next few years, I led Volt through two redesigns — introducing a structured design system in Figma, dark and light mode variables, and an expanded component library — alongside the user research program and the 2.0 rebrand highlighted in this case study. By March 2026, the app had grown to 18,000 monthly active users and expanded to include commissions pipeline, project management, chat, rep onboarding, an activity feed, and enhanced gamification.

Solar Pros — Volt's largest dealer partner at nearly 24,000 users and 64% of total MAU — merged with another super dealer and solidified their partnership with us. The stakeholder sales leaders had a clear ask: Volt should follow their branding and feel "more swaggy" and in line with the sales rep culture.

Working with their brand guidelines and direction, I developed the new look for Volt. The differentiator between the 1.0 rebrand and 2.0 was that this time I had a new superpower — Claude Code as my front-end engineering partner.

What started in Figma as a carefully thought-out design system became an opportunity to implement a theme-based token system with more defined rules for typography, colors, and components in the code itself — something my systems-obsessed, AI-curious brain could not resist.

The result was a new visual language for Volt: a token-based design system that works consistently in Figma and in code, plus an AI-powered agent and design skill that checks for anti-patterns and hard-coded values and offers style guide corrections for anyone shipping Volt code.

Before I defined the new design system, I knew where I wanted to end up — a simple yet visually striking system that could translate cleanly between light and dark modes and into the codebase, with the ultimate goal of creating an AI skill or agent that could implement the design rules.

I started in Figma, designing core screens and iterating until I had a rules-based system I was satisfied with and had stakeholder sign-off on. Then I shared the Figma design system — typography styles, color and shape variables — with Claude, with the direction to improve the code architecture from a design system standpoint. Working with Claude Code and the team's developers, we devised the plan to implement the full redesign in code.

One added complexity: the directive to use a dark gradient for the app's dark-themed UI. Volt had always been dark-first, so I put extra care into getting that primary dark mode just right.

It required transparent components specific to the dark theme to maintain the modern, "swaggy" look — which meant the most straightforward token architecture was off the table. I still took pains to ensure the system was rules-based and legible to both developers and AI agents.

The design system covers:

• Full dark and light mode palettes with semantic color roles
• Opacity and translucent token variants for gradient surfaces
• Typography scale: Tomorrow (display/headings), Oswald (labels/buttons), Inter (body/UI)
• Sharp-corner-first component library: buttons, inputs, cards, sheets, navigation elements
• A published style guide designed to serve as the backbone for the AI skills and agent

I implemented the full UI rebrand in the app’s code, iterating on the smallest details with Claude until the final screens mirrored my design vision. I also had Claude generate an HTML design guide that we referenced and iterated on as we went — which meant I was refining the design system and the code at the same time.

The system in the code is organized around semantic tokens layered over primitives: primitives define the raw values, semantic tokens map those primitives to roles — text.primary, surface.secondary, etc. A component never references a raw hex value; it references a role.

The architecture routes everything through a single centralized theme object passed down from PaperProvider — colors, opacity variants, gradient tokens, typography, spacing, shapes, component-specific values — all defined once, flowing everywhere.

The typography system required particular care. React Native requires exact font file names rather than family names with weights — so we built a font families map that resolves each weight to the correct platform-specific file name for iOS and Android. The full type scale — display, headings, subtitles, overline, body, caption — was defined from Figma specs and wired into the theme.

Once the design system was fully defined and documented, I translated the entire system into a suite of Claude Code tooling — a skill, two slash commands, and a dedicated agent — tools anyone coding in the Volt app could use before QA and shipping.

The Skill — Volt Style Guide Expert loads the full design system context — token values, component rules, dark/light mode specs, layout principles — so every implementation follows the Volt system.

Slash Commands /volt-tokens — reads token values directly from source files and returns current specs by category (colors, typography, spacing, shapes, components).

/volt-check — audits any file for design system violations across 10 categories. Reports issues with exact fixes but does not auto-fix — the developer decides what to change.

The volt-reviewer-agent: A dedicated compliance agent that reviews git diffs for design system violations before code is committed or a PR is opened. Checks only new or modified lines, not entire files — flagging token misuse, anti-patterns, and component violations at the diff level.

The tooling required testing and iteration, but after a few rounds the skills were working as expected — catching hard-coded values and style rule violations and offering corrections.

As soon as AI tools were connected to our codebase and non-developers were encouraged to set up dev environments, I dove in. After years of waiting on developers to implement my designs and rarely seeing them land with the level of detail and polish I intended, I finally had a direct line from design thinking to working code.

AI gave me a real understanding of how the code worked and how the styles were being applied so and how to improve things directly. The design system and AI tooling became infrastructure that made things faster, more consistent, and easier to communicate across a team.