01 / A design system for agents
A zero-radius design system your coding agent actually follows. Hairline structure, engineering detail, a rationed palette — and a linter that fails the build when something drifts.
/plugin marketplace add avestura/boxy-design-skill
/plugin install boxy@boxy-design-skill
npx boxy-design init
curl -fsSL https://github.avestura.dev/boxy-design-skill/install.sh | sh
MIT · zero dependencies · 13 reference docs · 15 lint rules
02 / The rules
Seven axioms. Violating one is a bug, not a preference. #
Most design guidance is advisory, so agents drift back to rounded cards and soft shadows by the third prompt. These are written as constraints, and the last cell is what enforces them.
01
Radius is zero
Everywhere, without exception. Including avatars, badges and toggles. The radius token exists only so that zero is explicit and greppable.
02
Lines carry structure
A 1px border is the primary separator. Reach for a border before a background change, and a background change before a shadow.
03
Never blur a shadow
Depth is a hard offset or a hairline. Any blur radius above zero is forbidden, backdrop-filter included.
04
Everything snaps to 4px
Spacing, sizing and leading come from one scale. No 13px, no 0.375rem, no arbitrary values slipped in under deadline.
05
Accent is rationed
Under 5% of painted pixels: links, focus, one primary action. Neutrals carry everything else.
06
Hierarchy is typographic
Size, weight, tracking, case and rules. Not colored headings, not gradient text, not another shade of purple.
07
Motion is mechanical
80–160ms, linear or sharp. Opacity, color and whole-pixel translation. No scale, no bounce, no spring.
08
And it is checked
boxy-check reads your source and
fails on every one of the rules above. The agent runs it before it says done.
03 / The difference
Same content. One of them was designed by default. #
Before — the default
- × 14px radius, pill badge, pill button
- × 8px blurred drop shadow
- × Violet gradient doing the work of hierarchy
- × Indistinguishable from every other dashboard
After — Boxy
- ✓ Zero radius, square tag, square buttons
- ✓ 1px hairline and corner ticks carry the structure
- ✓ One flat accent; the second action is an outline
- ✓ Reads as engineered rather than decorated
04 / Modes
One system, three postures #
Identical radius, borders, spacing, type and motion. Only section rhythm,
display scale, grid columns and substrate visibility change. Set
`data-mode` and the whole page follows — try the
**mode** control in the header.
01 / Runtime
Keystroke latency
p50
0.6ms
p99
4.1ms
Dev tools, infra, technical products. Grid substrate, corner ticks, mono annotations, dense by default.
| Node | State | Load |
|---|---|---|
| api-01 | Active | 0.42 |
| api-02 | Active | 0.38 |
| api-03 | Drain | 0.91 |
Enterprise apps, dashboards, admin. 16 columns, bottom-border fields, heavy tables, no substrate.
Payments
Revenue
infrastructure
Marketing, landing, docs. Big display type, 160px rhythm, generous air, still perfectly square.
05 / Enforcement
The part that makes it stick #
Guidance an agent can ignore is decoration. `boxy-check` parses
CSS, HTML, JSX, Vue and Svelte, flags every violation with a file and line,
and exits non-zero. Zero dependencies, Node 18+.
$ npx boxy-design check "src/**/*"
src/components/Card.tsx
8 error Nonzero border-radius: border-radius: 8px radius
9 error Shadow with a blur or spread radius: blur 12px shadow-blur
14 warn Spacing off the 4px scale: padding: 13px (13px) space
22 warn Raw hex outside the token file: #333333 raw-hex
src/styles/hero.css
31 error transition: all: transition: all transition-all
31 error Transition longer than 240ms: 0.3s > 240ms duration
47 error backdrop-filter / filter blur: backdrop-filter blur
[ FAIL ] 46 files - 5 errors, 2 warnings
boxy-check.mjs --list-rules for the full rule set
Errors — build fails
- Nonzero radius, and rounded utility classes
- Blur or spread on a shadow, drop-shadow, shadow-md
backdrop-filter,filter: blur(),text-shadowtransition: all, durations over 240ms- Gradient clipped to text
Warnings — --strict to fail
- Spacing off the 4px scale
- Font sizes off the type scale
- Raw hex outside the token file
- Font weights below 400
ease-in-out, overshoot curves,scale()
06 / Contents
What lands in your project #
SKILL.md the seven axioms, modes, routing
references/
tokens.md every token, every value
modes.md blueprint / industrial / editorial
layout.md rails, grids, shells, breakpoints
typography.md scale, labels, numerals, measure
color.md contrast pairs, semantics, charts
components-core.md 16 components, exact specs
components-data.md tables, tiles, charts, states
components-marketing.md hero, pricing, footer, docs
components-forms.md steppers, validation, auth, palette
motion-depth.md durations, easing, elevation
blueprint-details.md substrate, ticks, annotations
accessibility.md contrast, focus, keyboard, targets
anti-patterns.md what breaks it, and the fix
assets/
boxy.css tokens, reset, utilities
design-tokens.json W3C DTCG export
scripts/
boxy-check.mjs the linter
Agent targets
| Target | Writes |
|---|---|
| Claude Code | .claude/skills/boxy/ |
| Cursor | .cursor/rules/boxy.mdc |
| Windsurf | .windsurf/rules/boxy.md |
| Any agent | AGENTS.md |
| Copilot | .github/copilot-instructions.md |
$ npx boxy-design init --ai all --css
Non-Claude targets also get the full reference set in `.boxy/`,
so every agent reads the same source of truth.
Ready
Stop asking your agent to remove the rounded corners #
Install once. Every UI it builds afterwards is square, ruled, accessible and checked.