All work

Design Systems for AI-Built Products.

Same AI. Three products that don't look like AI.

Vibe coding without a design system gives you the same app as everyone else. These are the rules, tokens and principles that made each product look and behave like itself.

Head of Product Design · a US fertility-tech company (two products) and Fluxo Clínico · 2026

Design systems for AI-built products · 2026

  • #11151D#28508E#8F9190

    What AI ships by default

    Every AI app

    Slate, blue, Inter, 8px corners, cards in a grid.

    font-sans · bg-blue-500 · p-7

  • #6C2BD9#F2F0FD#E03E3E#92D14F

    Clinic platform

    A dense work surface

    Pill controls, compact clinical tables, codes in mono.

    Lufga · IBM Plex Mono · 24px pills

  • #6A50A7#ECE8F5#C0135C#05B6DC

    Patient portal

    One calm calendar

    Phone-first, a serif voice, cycle markers with meaning.

    Bona Nova · 430px · calendar tokens

  • #43837F#F5C6AA#F6F6FA

    Fluxo Clínico

    A quiet front desk

    Teal and peach, soft corners, made for a tablet.

    Manrope · Lora · 16px radius

01

The problem with vibe coding

Ask any AI tool for a screen and you get the same answer: slate and blue, Inter, 8px corners, cards in a grid. It looks finished, and it looks like every other AI product. Worse, it guesses at the things that matter in healthcare: what a status means, how an ID is written, what a color is allowed to say.

I led three products built with AI in 2026: a dense clinical work surface for IVF clinic staff, a phone-first portal for IVF patients, and Fluxo Clínico, a system for therapy clinics run from a tablet at the front desk. Each one has its own concept. The AI had to learn all three, and never mix them.

Clinic platform

Dense clinical work surface for IVF clinic staff

Patient portal

Phone-first portal for IVF patients

Fluxo Clínico

Therapy clinics, run from a tablet at the front desk

02

Figma says what, components say how

The first rule every agent reads: Figma says what to build, our components say how. Figma owns layout, hierarchy and intent. The component library owns behavior and consistency. A new component is allowed only when nothing reusable exists and the pattern will repeat, and if the intent is unclear, the AI asks instead of inventing.

On conflict there is an order: code first, then the agent guide, then the screen map, then other docs. The short rules the AI reads automatically are a summary, never a second spec. Pixel-perfect is not the goal: a screen that matches Figma but breaks a token fails review.

Figma says what

  • Layout
  • Hierarchy
  • Intent

Components say how

  • Behavior
  • Consistency

On conflict, in this order

  1. 1Code
  2. 2Agent guide
  3. 3Screen map
  4. 4Other docs
03

Pass or fail, written down

“Make it look good” is not a rule an AI can follow. So we wrote pass or fail criteria for every dimension, and each one replaces a habit the AI has by default.

ColorFailHex colorsPassNamed tokens
TypeFailGeneric fontsPassThe product's font token
SpacingFailMagic numbersPassSteps of the scale
ComponentsFailRaw buttonsPassOur components
Figma exportsFailPasted as new codePassChecked against what already exists
StateFailLost on reloadPassLives in the URL, so a link reopens the same drawer
04

What no AI can guess

The details that make it a clinic, not a template. Blood-draw tubes use the lab's real cap colors, and the rule forbids swapping them for the brand palette. In the patient calendar, period, egg retrieval, fertility check and trigger shot each have their own ring, fill and hatch. Shared clinical terms (appointment types, patient status, claim status) read the same in every flow, and new wording becomes an alias, never a new value. In Fluxo Clínico, everything is tap, never hover, because the front desk works on a tablet.

Blood-draw tubes

  • Yellow
  • Light blue
  • Red
  • Gold
  • Tiger
  • Light green
  • Green
  • Purple
  • Pink
  • Gray

The lab's real cap colors. Never swapped for the brand palette.

Patient calendar

  • Period
  • Egg retrieval
  • Fertility check
  • Trigger shot

Fluxo Clínico

Tap, never hover.

The front desk works on a tablet.

Calendar markers are drawn here in the portfolio's colors. Tube caps follow the standard order of draw; labs can vary.

05

The rules ship with the code

The rules live in each repository, next to the code, so every agent reads them: Cursor, Codex or Claude Code.

Clinic platform

  • 12guideline documents
  • 11rules the AI reads automatically
  • Pass or fail playbook
  • 157components

Patient portal

  • Agent guide
  • 5rules
  • 2skills: add a screen, ship a pull request
  • Small UI kit, ready to swap for the shared library

Fluxo Clínico

  • One file the AI reads first, with the guardrails, data conventions and database permissions

When a term changes, the code changes first, then the spec, then the guideline, then the rule for the AI. Rules that drift from the code are worse than no rules.

  1. 1Code
  2. 2Spec
  3. 3Guideline
  4. 4Rule for the AI
06

I set the principles, the team wrote the rules

I set the principles; the team turned them into rules. About a third of the rule commits in the clinic repository are mine.

Mine

  • The concept of each product and why they differ
  • The authority model
  • Fluxo Clínico's rules end to end
  • Reviewing AI output against the rules, and teaching the workflow

The team

  • Most guideline and rule files in the clinic platform: our designer-developer
  • The portal's agent guide and kit: with our prototyper
07

What I take from it

  • AI is a fast junior with no taste and no memory. The design system is its taste, and the repository is its memory.
  • Brand is not only color and type. It is vocabulary, density, what a status may say, and what the AI must never “fix”.
  • Rules are a product too: they need an owner, an order of authority and a sync process.
Back to all work