CEO XB

CEO XB was built for exactly that: a confidential cohort of 10 to 12 European life-sciences CEOs entering the US together, holding each other accountable. But the cohorts only meet remotely, a month apart, and that month was the part nobody had solved yet: what brings a CEO with no spare hours back to the platform between those meetings?

A member drafts a monthly business update for their cohort, with AI on hand to start it from last month’s or improve what they wrote. The update posts to a shared cohort feed, making progress and problems visible to the group, and any member can book a coffee chat straight from it.

Visibility is the mechanism, not the point. Every feature was measured against one test: does it end with two people talking?

The bet: CEOs come back to the platform because it helps them follow through on what they said they would do.

The Streak: tests whether a small repeated action brings a CEO back to the platform

The Leaderboard: tests whether ranking peers by milestones keeps a CEO engaged

Up Next: tests whether a countdown turns noticing an event into booking it

The bet: CEOs come back to the platform because it makes their peers visible and easy to reach between sessions.

Circle Back: tests whether posting after an event starts a conversation with a peer

The Bench: tests whether offering help in advance moves conversations off WhatsApp

Warm Welcome: tests whether one introduction at onboarding becomes a habit of reaching out

The networking bet carried the direction, and The Streak crossed over from the other one, slowed from weekly to monthly at the client’s request. The remaining four told us what not to build.

A stakeholder crit corrected where the concepts were heading. CEO XB is run by two founders who select each cohort, make the introductions, and hold the room, and our early passes had quietly designed that job out, treating the app as the thing that connects people.

So we sorted the program by what a screen can actually carry. The platform owns the month between sessions: visible updates, scheduling, the event calendar. The founders get somewhere to point rather than a job taken off them. What it leaves alone is the facilitation itself, the matching and the sessions, which is the part members joined for.

I designed the stakeholder workshop that put our surviving concepts next to the 2025 build and forced a call on every feature: kept, demoted, or retired, so nothing disappeared silently. The client’s number-one ask was that the cohort page become the home screen.

We had inherited a working five-tab app from 2025 and were adding a cohort feed, a monthly update flow, and coffee chat scheduling on top of it. All of it would not fit in one quarter, so we took a single path end to end instead of every path partway: onboarding into a cohort, the monthly business update, and the coffee chat it leads to. The home screen alone took three passes.

With the journey built and deployed, we put it in front of people in a moderated study through Maze, framed around the client’s own test of a good update: “easy, intuitive, not a chore.” Four things came back:

Drag the divider on either screen.

The 2025 file called its colors Primary 700 and Neutral 300, so using one meant remembering which number was which. These are named semantically: the name is the job the color does. Type is SF Pro, because the product is built from Apple’s components.

• Brand/Midnight#062C50tint · active tab · actions
• Brand/Cerulean#0C4C6Fkickers · links
• Brand/Cyan 200#9AE4F1kicker line on navy
• Text/Primary#252C33titles · body
• iOS Label#6B6B73sections · subtitles
• Text/Muted#929DA8timestamps
• Border/Default#BEC8D3locked outlines
• Surface/White#FFFFFFcards · glass
• Surface/Tint#E0E8F1chips · cells
• Grouped BG#F2F4F8screen ground
• Surface/Disabled#F5F5F5locked

• The cohort is the productDisplay · Bold · 32
• The cohort is the productXL · Bold · 24
• The cohort is the productL · Semibold · 17
• The cohort is the productBody · Regular · 15
• The cohort is the productBody Emphasized · Bold · 15
• The cohort is the productSmall · Regular · 13
• The cohort is the productSmall Emphasized · Semibold · 13
• The cohort is the productXSmall · Regular · 12
• The cohort is the productXSmall Emphasized · Semibold · 12

Three button families, plus the chips, rows and inputs a member fills in. Every family carries a when-to-use note, so another designer can pick one without asking.

Bordered Prominent · 36The one action that matters on the screen.

InterestedInterestedDisabled

Midnight or Cerulean

Midnight is for committing: agreeing, saving, moving through a required flow. Cerulean is for inviting: lower-stakes actions that do not demand anything. The test: if a member tapped this by accident, would it matter? If yes, Midnight. If no, Cerulean.

Plain · 24Cancel, Skip, Back, See all.

CancelSee allDisabled

Glass · 8Apple’s Liquid Glass, for anything sitting on a photograph.

White at 45%, with a 0/8/40 shadow at 12%.

A member never sees a color or a text style. They see the card that introduces a peer, and the bar that moves them around the app, which is where the move from course to cohort shows.

The bar is also where a scope decision shows. We had scoped the work to features and left the platform alone, then found in detailed design that new features kept landing on the old chrome. Moving the app to iOS 26 and its Liquid Glass materials was the cheaper fix: Apple supplies the bars, the blur, and the hit areas, so the whole app reads as one native product rather than new work bolted onto an older shell.

The status bar and the tab bar are Apple’s, down to their hit areas, so a member already knows how they behave before opening the app. The header and the progress bar are the two that needed designing.

1. 01Store every color once

   The same navy is saved twice, once under its 2026 name and once under its 2025 one, with nothing connecting them. Link them and changing the brand color is one edit instead of forty.

2. 02Keep one spacing scale, not two

   Two sets of spacing sizes use the same names, so the gap called space-5 is 8 pixels on the home screen and 12 in the update flow. Keep one set and a gap means the same thing everywhere.

3. 03Give each text style one weight

   The style called Body Emphasized is medium weight on one screen and bold on another. Pick one, and give the other its own name.

4. 04Reconnect the eight copies that drifted

   Eight frames hold copies of components instead of the components themselves, so they stopped updating when the originals changed. Four are the Interested button on the home screens, and four are a coffee chat promo card.

5. 05Name every component the same way

   The event card is filed under three different names, one of them left over from a component that was retired. One naming pattern, used everywhere, makes components findable.

6. 06Add the last ten components to the library

   About ten components, the top navigation and the onboarding inputs among them, were built straight into screens while the app was being coded and never added to the shared library.

None of these are large changes, and together they turn a working library into a system another team could run without me.

The full journey, with the AI features running on the Anthropic API. Add it to your home screen on an iPhone and it behaves like a native app.

Research needed six ideas in front of people. Each shipped as a working, deployed prototype rather than a clickable mockup, written from a structured prompt. The eleven-page runbook I wrote took a designer from a blank chat to a shareable URL in about ninety minutes.

The scaffold lived in one markdown file that also carried the design language, the color tokens, the component patterns, and the anti-patterns. Starting a new concept meant rewriting the brief and leaving everything else in place, so every prototype inherited the same system knowledge. What made the output usable was the file, not the prompt.

Nobody knew how much of the 2025 file still depended on GenSaas, the outside library under it. Claude read the file through MCP and counted 1,009 instances pointing at a library the product did not own.

$ get_variable_defs
  "Brand/Midnight": "#062C50"
  "Brand/Cerulean": "#0C4C6F"
  "Text/Primary": "#252C33"
  "Type/Body": "SF Pro Regular 15/20"
  "Spacing/space-5": "8"

Once the tokens were extracted and owned, the agent read them back the same way and wrote the React and Tailwind the app runs on.

1. Figma library→
2. MCP read→
3. Claude Code→
4. React on Vercel→
5. Screens back in Figma

A teammate noticed that the newest frames carried the right components and asked what had changed. Neither of us knew, so I had Claude read the file through MCP again and count real instances against plain frames on every page.

Two components in the final forty were built by hand rather than placed from the library: the Interested button on the home screens, which is the four copies the audit above counts, and the calendar day cells, which the library has no component for.

An agent will not use the design system unless you tell it to, and it will not tell you when it didn’t. So the library goes in every prompt now, and every screen gets checked afterward.

Figma has a feature that does this automatically. Code Connect links a component in the codebase to its twin in the library, so an agent knows which is which without being told, but it needs an Organization plan we did not have.