An internal AI prototyping workspace that brings together a sandbox of production components, AI prototyping, agent guidelines, design decisions and engineering handoffs in one place.

Design System

Rebuilding the design system and creating internal AI tools used by the team to design and develop with shared components and rules.

Problem
The existing design system couldn't support the product we were designing: inconsistent type and color, production drifted from Figma, key components missing.
Role
Sole product designer · owned the design system end to end
Team
Sole designer · partnered with founder + 2 engineers
Timeline
Jan 2024 – May 2025 · rebuilt during the Create redesign · phased rollout
Outcome
50% less prototyping time · 95% design-system consistency · faster engineering handoff
Key Contribution
Rebuilt the Figma design system and used it to rebuild all screens; built an internal AI prototyping tool
Platform
Mobile · React Native
When shipping outpaced the system

As mentioned in Story 01, NAPOZ prioritized shipping quickly. When I joined, I inherited an existing app and an incomplete Figma library with inconsistent typography and color, missing components, and limited guidance for new features.

Engineers filled gaps by creating components directly in code. These workarounds kept development moving but widened the gap between Figma and production. The team lacked a source of truth for how shared interface elements should look and behave.

Marketing was also considering a new brand color, making a clearer semantic color system part of the rebuild.

What I inherited
AaAa
Inconsistent type and color
Missing components
Figma≠</>
Components built straight in code
→
A new brand color on the way

The challenge was to give the team a shared foundation that could support the speed the startup needed.

Rebuilt from tokens up

Every token got a job

The existing library had inconsistent typography and color, and production had drifted from Figma. I rebuilt the foundation from tokens up.

Color
Before
Light Blue
#C3E7F5
Dark Blue
#9AD6EE
Accent
#16A9E4
Gold
#F1C34B

Three cool blues and a gold. Which one is the brand? No color owned a job.

After
Coral
#FF4760
Brand
Cobalt
#2F4BFF
Earned
Ink
#0A0A0A
Text
Sand
#F2F0EA
Surface

Coral = brand & category. Cobalt = figures you earn. Each color, one job.

Type
Before
Explore
Xavier, Amir and 4 others are doing this.
Helvetica Neue · Plus Jakarta Sans

Generic faces, flat hierarchy.

After
Explore
Xavier, Amir and 4 others are doing this.
Heading 1 · Work Sans Medium
Gabarito display · Geist body

Gabarito + Geist — a named ramp with set weights and tracking.

Buttons
Before

One pale light-blue button doing every job.

After

A real hierarchy — primary, secondary, ghost, text, and the create FAB.

Inventory
Before
ColorsTypeButtonsChipsFormsAlertsIconsSpacing

8 starter groups — foundations only.

After
Running
PostsStats
#2
12d
✦ AI
Creative

50+ elements across 8 domains — rank, streak, leaderboard, and the cobalt AI badge.

The Challenge card system

With the tokens in place, the product's one recurring thing — a challenge — got one component family. Coral marks category and brand, cobalt marks what you've earned, and the same card changes shape for discovery, the feed, a prompt, and your standing.

One Challenge object adapting across Explore, Home, Challenges, leaderboard/progress

Coral — category & brand Cobalt — earned figure Ink — the one dark surface

Challenge Card

Discovery + relationship

"Should I join this?" → "How am I doing?"

Hero & tile — raised
♟ Creative☆3 Friends Joined

Golden Hour

"every shadow deserves a witness."

2.4k in
Streak

Pasta Week

1.1k in · 5d left

Status row — by state
Golden Hour
Creative · 4d left
#405
1.3k in
Saturday Bike ClubYou Host
Performance · 12d left
First Coffee
Ended 2w ago  ★ Winner
#1
1.3k in
30 Day Pull-upsDraft
Not published
Resume →

Post Card

Feed · flat

"What's happening?"

Golden Hour4 days left
Ranked #3
@mira.lens2h♡ 1.3k

Reservoir bridge, 7:42pm. Wind was wild today.

Golden Hour4 days left
@mira.lens2h♡ 1.3k

Reservoir bridge, 7:42pm. Wind was wild today.

Inspiration Card

Prompt · ink

"What could I start?"

✦
The Idea Of The Day

Same shot, 7 days.

Pick a spot you walk past every day. Photograph it at the same hour. The week tells a story you didn't plan.

1.2k like this

Standing

Relationship · flat

"Where do I rank?"

6 AM Club›
#2of 814
↑1 this week
6 AM Club›
#2of 814
↓1 this week
The screens, before and after

The same feed, finally in one language

The old home stacked friends' posts and live challenges into one ambiguous list under a heavy wordmark. The redesign splits Friends from For You and gives challenges their own card — countdown, rank, category — so a commitment never reads like a casual post.

Old Napoz home — a friend's post in the undifferentiated feed
Before — Home Feed Post
Old Napoz home — a challenge rendered in the same card style as a post
Before — Home Feed Challenge
New Napoz home — Friends / For You tabs and distinct challenge cards
After

Past the home feed, the same challenge object holds its shape across every surface people use — discover it, track it. Before on the left, after on the right.

Discovery, not a directory

Explore was a dense list filtered by Active and Expired. The redesign leads with a featured challenge and social proof, sorts by Trending / New / Ending soon, and puts Join one tap away.

Old explore — a flat list of image rows with an Expired tab
Before
New explore — featured hero, social proof, and Ending soon sorting
After

Every challenge, one object

The Challenges tab buried one giant card per challenge. Now each is a compact row carrying the same metadata everywhere — category, time left, participants, your rank — so seven active challenges fit on one scannable screen.

Old challenges tab — one bloated card filling the screen
Before
New challenges tab — Active / Past counts and consistent scannable rows
After
Internal AI tools

Every weekly update meant translating the same screens three times — Figma, an AI prototype, then production code. Each handoff drifted a little, and the team spent the difference on rework. I built my own AI prototyping tool to close that gap; it grew into the team’s internal AI tools, shown in the demo at the top of this page.

01

Inconsistent AI prototypes

Manual fixes slow every update

Repeated Figma reads consume tokens and context without ensuring production alignment.

Shared components + tokens

A sandbox grounded in the production library, with persistent agent guidelines.

02

Lost design rationale

Decisions become hard to recover

Fast updates leave teammates unsure why a direction was selected or what guidance changed.

Visible decision history

Connect variations, selected directions, rationale, and proposed guideline updates.

03

Repeated fidelity instructions

Every exploration needs setup

Flow sketches and detailed interactions need different instructions, repeated each session.

Reusable fidelity presets

Define scope, interaction detail, mock data, and the states each prototype should include.

04

Duplicated engineering work

Handoff becomes another rebuild

Engineers interpret prototype behavior and recreate it in the production React Native codebase.

Repeatable handoff framework

Share component imports, behavior, states, and remaining implementation work.

Design goalCarry one shared system from exploration to implementation.

I identified the workflow gaps, designed the internal tool and reusable guidance, and partnered with a developer to establish the prototyping sandbox.

Faster prototyping and greater consistency
−50%
prototyping time
95%
design-system consistency
Faster
engineering handoff

The work also produced a rebuilt Figma library, app screens based on that library, and internal AI tools used by the team, connecting components with prototyping and handoff context.

Next project
MyHub Discover Integration — Microsoft
→