Case Study 05
Partner
Chalkboard
Category
Fantasy sports • Mobile
Engagement
Design system, UI rebuild, Pulls
Scope
- Design system
- Core components
- Screen rebuild
- Pulls (front + back end)
The starting point · Where we came in
The app was working. The UI and the systems beneath it needed to be rebuilt from scratch.
Chalkboard already had a successful fantasy product. What it did not have was a design system. Screens were designed one-off. There was no full design team with a shared set of components - so the UI grew randomly instead of consistently.
The front end matched that story: mixed StyleSheets, inconsistent patterns, and a legacy UI kit. Slytrunk came in to build a design system from the ground up and rebuild the entire UI - new components, new screens, new code. Every screen was rebuilt. The live product kept shipping while we did it.
The idea we brought
Build the system and the structure first. Speed comes after.
Start with a real design system. Build the core components to that system. Then assemble screens from those pieces - not one-off layouts.
Once that structure exists, every new screen is faster. That is how a full UX and UI rebuild ships quickly on a live product - and how you launch something new on top of it without starting over.
What we built
The system, the components, and the screens.
01 · Design system
From scratch. Shared tokens. Screens from parts.
02 · Components, then screens
All-new components. Full brand refresh.
03 · Figma Code Connect
Every component mapped. Design and code stay aligned.
04 · Pulls
New stack. Pick a pack. Ship or sell back.
05 · Quality system
Architecture, reviews, guardrails. Agents move fast.
How AI actually worked
Rules first. Generation second.
The model is fast. Guardrails and reviews made a full rebuild safe at that speed.
01 · People decide
People set direction. Agents do not invent scope.
02 · Agents execute
Architecture, tickets, reviews. Figma first. Ship.
03 · Systems remember
Review feedback sticks. The quality bar holds.
What shipped on top
Pulls - pick a pack, rip it, ship it or sell it back.
The rebuild was not the end of the work. Chalkboard was launching Pulls - a pack-ripping product in a category plenty of apps already play in, done their way. Pick the dollar value of the pack, open it, and see what you pulled. The card might be worth more than you paid, or less. Ship the physical card, or sell it back at market rate.
Slytrunk was fundamental to shipping it - front end and back end. More of the work landed on the backend: the flows behind inventory, buyback, and fulfillment. The new design system and components carried the experience users see when they rip.
The result
A rebuilt app. A new product on top of it.
System · from scratch
Built
Ground-up tokens and components where one-offs used to be
Fantasy · overhauled
Rebuilt
Completely new UX/UI - new components, new screens
Pulls · shipped
Live
Pick a pack, rip it, see the value, ship the card or sell back
What this proves
Rebuild the foundation. Ship new product on it. Do not treat those as separate jobs.
Chalkboard's fantasy app looks completely different because nothing from the old UI survived. Every component is new. Then Pulls launched on that same stack - new screens built from the same system, backed by work on the server side that made pack selection, rip, valuation, shipping, and buyback actually work.
That is what Slytrunk carries forward - a rebuild that is not just a visual refresh, and a new product line that ships on the foundation you just laid.
Chalkboard and Pulls — FAQ
Who rebuilt the Chalkboard app?
Slytrunk. Slytrunk built Chalkboard's design system from the ground up and rebuilt the entire UI — new components, new screens, new code — while the live product kept shipping throughout.
What is Chalkboard Pulls?
A pack-ripping product Chalkboard launched on the rebuilt stack. Pick the dollar value of a pack, open it, and see what you pulled — the card might be worth more than you paid, or less. Ship the physical card, or sell it back at market rate.
Who built Chalkboard's Pulls?
Slytrunk, front end and back end. More of the work landed on the backend — the flows behind inventory, buyback and fulfillment — while the new design system and components carried the experience users see when they rip.
Why did Chalkboard need a design system?
Screens had been designed one-off, with no shared set of components, so the UI grew randomly instead of consistently. The front end matched: mixed StyleSheets, inconsistent patterns and a legacy UI kit. Building the system first is what let a full UI rebuild ship quickly on a live product.
How did Slytrunk use AI on the Chalkboard rebuild?
Rules first, generation second. People set direction and agents do not invent scope. Agents work through architecture, tickets and reviews, Figma first, and review feedback sticks so the quality bar holds. Every component is mapped with Figma Code Connect, so design and code stay aligned.
Contact
