design system for ai coding agents

Heavy sites.Zero jank.

Shaders, 3D, fluid backgrounds, every component library you love. void teaches your agent to ship all of it at 60 fps — and proves it with 273 checks in real Chromium.

Install void See the lab

Past the horizon, everything runs smooth.

bring the library you already love

React BitsAceternity UIMagic UIshadcn/uiThree.jsReact Three Fiber
GSAPMotionLenisOGLSplineRiveLottie
01 — the lab

Heavy is fine.
Jank isn't.

Four hundred glowing particles, running right now. Flip the switch to see the version an agent writes by default — then watch the frame graph. That difference is what void's rules catch before you ship.
fps
0
worst ms
0
long frames
0
frame time · 16.7 ms line
02 — backgrounds

Six live backgrounds.
One WebGL context.

The looks you'd pull from React Bits, Aceternity or Three.js examples — all running at once. Browsers cap WebGL contexts at ~16; void has your agent share one and scissor it, so a gallery page costs what a hero does. Hover any tile, or tap to open it full screen.

Liquid Ether

shader · domain-warped fbm

  • one context
  • DPR ≤ 1.5
01

Ballpit

three · instanced physics

  • 1 draw call
  • env baked in-scene
02

Grid Distortion

shader · cursor lens

  • fwidth AA
  • no textures
03

Pixel Snow

shader · bayer dither

  • 3 parallax layers
  • 0 draw extra
04

Galaxy

three · 26k points

  • additive
  • static buffer
05

Aurora

shader · noise curtains

  • 4 octaves
  • paused offscreen
06
03 — the loop

Your agent writes.
void checks.

Skills go into whatever agent you use. The CLI drives real Chromium against what it built, and every finding comes back as a rule id the agent already knows how to fix. Hover or tap any node.
  • Claude Code
  • Cursor
  • Codex
  • Gemini CLI
skills + cli
  • void perf
  • void smooth
  • void a11y
  • void seo
  • void design

findings return as rule ids → the agent fixes → run again

04 — the pipeline

Five steps. No guessing.

01

Brief

The skill turns a one-line ask into audience, job, tone and hard constraints — before a single component is chosen.

landing page for a postgres tool. make it feel premium.

loading skill: void/brief

audience → platform engineers

job → trust a migration tool

tone → calm, exact, fast

direction → precision

02

Direction

Pick one of six tested tastes. Tokens, type, radius and motion come as one CSS file over a shared base.

03

Structure

Sections, grid and hierarchy are planned as a page, not assembled from whatever the library had in stock.

04

Build

Use the heavy stuff. Shaders share one context, loops pause offscreen, the LCP never waits for WebGL.

<View className="tile">
  <LiquidEther dpr={1.5} />
</View>

// one <Canvas> for the page
// frameloop pauses offscreen
// LCP is text, never the canvas
05

Verify

Real Chromium, throttled mobile and desktop, median of runs. Every finding cites the rule the skill already taught.

$ void audit http://localhost:3000

perf98
smooth100
a11y100
seo100
design96

✓ 0 errors · ship it

perf/lcp-slowLargest Contentful Paint is slow

05 — the registry

273

checks a page can fail.

Each is one rule id the skills already cite, so the agent never translates between the advice, the check and the fix. Hover or tap a category to light it up.
06 — directions

Six tastes.
Try one on.

A direction is one CSS file over a shared base; components only read semantic tokens. Pick one and this whole page — shaders included — changes its mind.
07 — measured, not claimed

Same model. Same brief. One with void.

SaaS landing page

+24.3

composite points

baseline67.5
void91.8

Designer-engineer portfolio

+26.5

composite points

baseline53.8
void80.3

Conference site

+9.9

composite points

baseline69.6
void79.5
Composite of the CLI score and a blind judge, two runs per cell — intervals are wide, and void runs cost more and take longer. Full method and screenshots in the repo under evals/.

08 — two commands

Make it heavy.
Keep it fast.

~/my-heavy-site

$claude plugin install void

✓ installed void · 9 skills · 6 directions

$void audit http://localhost:3000

perf 98 · smooth 100 · a11y 100 · seo 100 · design 96

✓ 0 errors — ship it

GitHub ↗