OLEH HEBEL & Co

DESIGN SYSTEMS FOR AI CODING AGENTS

Give your coding agents one system to build from.

I turn scattered Figma styles, components and frontend conventions into a usable product system that your team—and tools such as Cursor, Claude Code or Codex—can retrieve, follow and validate against.

Fixed scopeTokens + componentsAgent contextNo retainer

THE NEW DESIGN DEBT

The system exists. The agent still invents.

AI coding agents move fast, but speed amplifies inconsistency when the product rules are scattered across Figma, CSS, Storybook, screenshots and individual memory.

  • Duplicate components. The repo already has a button, card or modal, but the agent creates another local version.
  • Token drift. New spacing, color and radius values appear because the canonical values are not obvious or machine-readable.
  • Context loss. The same design decisions have to be re-explained in every prompt or session.
  • Figma/code mismatch. Designers and engineers are technically using a design system, but they are not using the same one.

WHAT I BUILD

A small operating system for product consistency.

The goal is not a huge documentation site. The goal is to make the right product rules easy to find, hard to misunderstand and practical for humans and coding agents.

  • Canonical tokens. Color, type, spacing, radius, elevation and responsive rules with one clear source of truth.
  • Component contract. Which components are canonical, when to use them, which variants exist and when a new pattern is actually justified.
  • Pattern rules. Forms, tables, navigation, dialogs, feedback, states and recurring product structures documented as decisions—not screenshots.
  • Agent-readable context. The system is packaged into the formats the workflow actually loads—such as DESIGN.md, CLAUDE.md, Cursor rules or equivalent repository instructions—rather than buried in a PDF.
  • Validation layer. Linting, visual review or lightweight automated checks catch rogue values and duplicate patterns instead of relying on the prompt to behave perfectly.
  • Design ↔ code parity. Figma and implementation are compared so the system describes the product that really ships.

SYSTEM SPRINT

Enough structure to stop drift. Not enough bureaucracy to slow shipping.

01

Inventory

I inspect Figma and the live codebase, identify duplicates, contradictions and the real components the product relies on.

02

Normalize

I define the canonical tokens, components and patterns, then remove ambiguity around what should be reused.

03

Contextualize + validate

I translate the system into concise agent-readable rules and add the smallest useful checks that expose drift before it ships.

WHEN THIS PAYS OFF

You are shipping faster than your system can keep up.

We already have a design system.

Good. This sprint is often about making the existing system usable in production and by AI-assisted workflows, not replacing it.

Do you just create a DESIGN.md?

No. A DESIGN.md, CLAUDE.md or Cursor rule is a delivery format, not the design system itself. I first resolve the real source of truth across tokens, components, patterns and code, then package those decisions into agent-readable context.

We mostly build in code.

That is fine. The system can be anchored in the repo and component library, with Figma acting as a supporting design surface rather than the only source of truth.

We use Cursor, Claude Code or Codex.

The exact format should match the toolchain. The important part is that canonical components, tokens and product rules are explicit, retrievable before UI generation and checked after generation.

Will this eliminate all AI drift?

No system removes the need for review. The point is to reduce repeated correction, make mistakes easier to detect and give both humans and agents a consistent baseline.

START WITH THE CURRENT SYSTEM

Send me the Figma file, repo or both.

I will tell you where the product rules are breaking, what should become canonical and how much system is actually worth building.

Send the system