Axel — sole designer × bidirectional loop
Sole designer at a YC W19 travel-money startup, reporting directly to the CEO. Built a symmetric Design ⇌ FE delivery protocol with the lead engineer that turns handoff into convergence — three zones, four review tiers, a weekly cadence. Every pixel in Axel goes through one person.
Visit live → helloaxel.com- Role
- Sole designer · reports to CEO
- Period
- Dec 2025 — Present
- Client
- Axel
- Themes
- Sole designer · Design × FE protocol · Production React
- Sole
Designer of record
- CEO direct
Reports to
- 0–0 / theme
Target PR cadence
- 0–0 days
Branch lifespan
01
Designer of record
Every pixel in Axel goes through one person. Sole designer delivering production — the product comes from me with team discussion, but only I deliver. Reports directly to the CEO. Design and code are the same artifact: Figma → tokens → Tailwind → Vercel preview, no translation loss.
helloaxel.com
100% mine — landing, conversational UI, motion.
Design system
蓝绿粉 tokens · opacity ladder · rounded-xl · tabular-nums.
28 email templates
Customer.io · Liquid · "no-fake-defaults" pattern.
Production React
Same repo as eng. Vercel preview is the handoff.
02
Why a YC CEO would hire this shape
Before 20 people you can't afford a design layer that needs translation. You need one person who can take an ambiguous CEO ask, ship a working prototype against real data by Friday, and have engineering trust the output. That's the slot. No PMs to mediate. No design-eng meetings to schedule. No specs to write twice.
“The handoff is the deploy. There is no separate design environment to maintain.”
03
The stack I actually run
Design and production share a stack. Same fonts, same tokens, same components. Adding a tool means I've already evaluated three.
| Layer | What's running |
|---|---|
| Frontend | Next.js 16 · React 19 · TypeScript · Tailwind 4 · Motion |
| Customer.io · Liquid · "no-fake-defaults" guards · MJML thinking | |
| Decks | PptxGenJS — dark + #0BE09B + Lato |
| AI tooling | Cursor · Claude Code · Figma MCP · Customer.io MCP · CLAUDE.md/repo |
| Tokens | 蓝绿粉 palette · white/85 → 55 → 35 → 25 · rounded-xl · tabular-nums |
| Glue | Vercel preview as handoff · git as design history · Loom |
Same toolchain both sides — there is no "design environment" separate from production.
04
The Loop · symmetric, not asymmetric
Most Design ⇌ FE handoffs are asymmetric — design throws specs over the wall, eng implements, friction lives in the gap. Jesus (lead engineer) and I built a symmetric protocol. I wrote the forward — three zones, two paths, a weekly rhythm. Jesus wrote the reverse — a designer-fe-architect-review skill, an /audit-changes command, four-tier safety routing. Both directions AI-protocolized. Translation loss → ~0.
Designer
Aspen
Lead engineer
Jesus
Hover a flow to focus the protocol
05
Forward · Aspen → Jesus
Three zones, two paths. Playground is source of truth — design lives, evolves, never merges; replaces Figma's role. PR Branch is transit — themed, short-lived, born to die. Master is production. Branches stay 1–3 days, 5–10 changes per themed PR.
- 01
Playground
source of truth · design lives, never merges
- 02
Choose path
design-led or data-led trigger?
- ↗ Path A · design-ledPlayground → PR → Master
"What if X" hi-fi prototypes before spec.
- ↗ Path B · data-ledMaster → branch → PR
Real-data wiring + bugs only on real data.
- 03
PR Branch
transit · themed · 1–3 days · 5–10 changes
- 04
Master
production · users see it
06
Reverse · Jesus → Aspen — `/audit-changes`
Four tiers, one command. `/audit-changes` classifies every PR by safety so I move fast on safe things and the right work gets eyes from the right person.
| Tier | Type | Examples | Action |
|---|---|---|---|
| 01 | Visual | color · spacing · type · motion | Claude self-audit → ship it |
| 02 | Markup | DOM · component splits · props | Light review |
| 03 | Behavior | state · effects · API · interaction | Review with Jesus |
| 04 | Out-of-bounds | money · auth · type changes | Pull from PR — Jesus owns |
Default safety routing. Designer never has to ask "can I ship this?" — the tier tells me.
07
Weekly cadence · Hotel V1 trial
The rhythm is the point. Make it visible so the team compounds on it instead of rebuilding habits each sprint.
| Day | Action |
|---|---|
| Mon | Close decisions · playground ready |
| Tue | 3 themed PRs + 2-min Loom each + scenario links |
| Wed | Review — diff + scenario + Loom (three-piece set) |
| Thu | Merge → master → users · rebase playground |
| Fri | Debrief — where PRs got too big, where the loop broke |
Hotel V1 is this week's trial. Goal isn't perfection — it's *testability*.
08
Where we are today
Structurally ~10% of the TikTok / Duolingo tier. ~40+ approved improvements stuck in the playground waiting on the loop to mature. We may settle around 40% — not a goal, a constraint. TikTok and Duolingo run 700+ A/B per quarter with 1000+ designers. We can't win that race; we shouldn't try.
- TikTok100%
- Duolingo95%
- Axel · target40%
- Axel · today10%
- ~1000 designers · 700+ A/B per quarter
- Mature org · structural maturity ceiling
- Realistic ceiling for our shape
- ~40 approved changes queued in playground
09
What we have that they can't replicate
We can't outscale TikTok. We can out-iterate them on the per-decision quality of every keystroke.
Zero-friction handoff
Vercel preview = the deliverable. No translation, no spec, no tickets.
AI-accelerated iteration
Same repo, same prompt history, same `/audit-changes` skill across designer and engineer.
Hi-fi prototypes ARE production
What I build in playground is what users get — same React, same tokens.
Tight ownership routing
Every decision has one named owner. No "who decides this?" cycles.
10
What I leave behind
The process is documenting itself — turning into a transferable artifact. These outlive the current collaboration.
3-zone × 2-path framework
Playground · PR · Master with design-led / data-led triggers.
4-tier `/audit-changes` skill
Default safety routing baked into the command. Tier tells me what to do.
Weekly cadence template
Mon decisions · Tue PRs · Wed review · Thu merge · Fri debrief.
AI prompt library
Per-repo `CLAUDE.md` + Figma MCP + Customer.io MCP wired together.