---
title: simbolik.ai case study · simbolik
description: An AI agent built simbolik.ai inside my design system, its written rules and a checker that refuses any value outside a design token.
project: simbolik.ai
statement: DesignJin, my design agent, built every page of this site.
meta:
  - Project · 02
  - AI-ready system
  - simbolik.ai
  - "2026"
stats:
  - value: "18"
    label: Pages, built by an AI agent
  - value: "48"
    label: Design system components to build from
  - value: "546"
    label: Design tokens, and no value written outside them
  - value: "0"
    label: Checker rules switched off
image:
  src: images/work/simbolik-project-full-preview-design-system.webp
  alt: The simbolik logo beside a glass brain drawn in characters, lit red at its center.
gallery:
  - src: images/work/simbolik-gallery-image-1.webp
    alt: "Parts of the Simbolik design system: a code block, buttons, fields, an alert, a modal, pagination and a table of contents."
  - src: images/work/simbolik-gallery-image-2.webp
    alt: The simbolik.ai home page, half in the dark theme and half in the light.
  - src: images/work/simbolik-gallery-image-3.webp
    alt: The simbolik.ai About page, with its ASCII drawing of an eye.
next:
  href: project-momentum6.html
service: service-ai-systems
cta:
  title: Want this on your system?
  lede: Your design system, with the rules, scripts and checks that keep your AI tools on it. If you don't have one yet, I build that first.
  drawing: plug
---

# simbolik.ai. Built by an AI agent, inside the rules.

I needed a website, and proof that AI can make work worth shipping. So I wrote the rules down where a machine can read them, and a checker that refuses anything outside them. Then I handed the build to the agent.

## Rules first, *then the agent.*

### The problem

- Left alone, an agent builds the same polished page everyone else's agent builds
- It gets the work to about 70%, and someone senior fixes the rest by hand
- At volume, the fixing costs the time the agent saved

### The fix

- A design system written for machines and people alike: 546 design tokens and 48 components, each with its rules
- A checker that fails any hand-typed color, size or font, and any class the system doesn't know, before a person sees the page

## How the agent works.

The same 5 habits on every page of this site.

1. READ · **Read the workspace first**

   The workspace says what exists, what's allowed and what was already decided, with the reason written next to each decision. The agent starts there, not from the brief.

2. COMPOSE · **Build from real parts**

   Pages are made of the design system's own components. A part the system doesn't have is built from its design tokens, named, and added to the project's list of parts.

3. CHECK · **Let the checker say no**

   The checker reads every page and stylesheet. A raw color, a stray pixel value or an unknown class fails it, and each failure gets fixed or explained in writing. No rule is switched off.

4. LOOK · **Look at the result**

   Nothing is done until it has been rendered and looked at on a phone and a wide screen, in light and in dark.

5. REPORT · **Write down the gaps**

   When the right design token doesn't exist, the agent uses the nearest one and adds the gap to a list. I decide which gaps become new design tokens.