01 / A design system for agents

Interfaces with square corners and visible structure

Boxy gives your coding agent a design system with no border radius, 1px borders and a mostly gray palette. It also ships a linter, so when the agent slips back into rounded cards and soft shadows, the build fails.

/plugin marketplace add avestura/boxy-design-skill

/plugin install boxy@boxy-design-skill

MIT · zero dependencies · 18 reference docs · 15 lint rules

02 / The rules

Seven rules. Breaking one counts as a bug.

Agents treat most style guides as suggestions. A few prompts in, the rounded cards and soft shadows are back. Boxy writes its rules as hard constraints, and the eighth box explains how they get checked.

Radius is zero

Everywhere, including avatars, badges and toggles. There is a radius token, but it only exists so the zero is written down and easy to grep for.

Lines carry structure

Separate things with a 1px border first. If that isn't enough, change the background. Use a shadow last.

Never blur a shadow

Show depth with a hard offset shadow or a thin line. Any blur above zero is banned, and that includes backdrop-filter.

Everything snaps to 4px

Spacing, sizes and line heights all come from one scale. 13px and 0.375rem aren't on it, so they don't get used, even on a deadline.

Accent is rationed

The accent color covers less than 5% of the screen. It goes on links, focus rings and the one primary action. Everything else is gray.

Hierarchy is typographic

Show what matters with size, weight, letter spacing, case and rules. Don't color the headings, and don't put a gradient on text.

Motion is mechanical

Transitions take 80 to 160ms with linear or sharp easing. They animate opacity, color and whole-pixel movement. Nothing scales, bounces or springs.

And a linter checks them

boxy-check reads your source files and reports every broken rule. The agent runs it before it tells you the work is done.

03 / The difference

The same card, with and without Boxy

Before: the usual default

× 14px radius, pill badge, pill button
× 8px blurred drop shadow
× A violet gradient to make the button stand out
× Looks like every other dashboard

After: Boxy

✓ Zero radius, square tag, square buttons
✓ A 1px border and corner ticks mark the edges
✓ One flat accent button, with an outline for the second action
✓ Closer to a technical drawing than a template

04 / Modes

Three modes for different kinds of product

All three share the same radius, borders, spacing, type and motion. What changes is the space between sections, the size of display type, the number of grid columns, and whether the background grid shows. Set data-mode on the page to switch, or try the mode button in the header.

blueprint

01 / Runtime

Keystroke latency

p50

0.6ms

p99

4.1ms

For dev tools, infrastructure and other technical products. Shows the background grid, corner ticks and mono labels, and is dense by default.

industrial

Node	State	Load
api-01	Active	0.42
api-02	Active	0.38
api-03	Drain	0.91

For enterprise apps, dashboards and admin screens. 16 columns, fields with only a bottom border, heavier tables and no background grid.

editorial

Payments

Revenue
infrastructure

Start Docs

For marketing, landing pages and docs. Large display type, 160px between sections and plenty of space. The corners stay square.

05 / Enforcement

A linter that fails the build

Written rules only go so far with an agent, so Boxy checks the code too. boxy-check parses CSS, HTML, JSX, Vue and Svelte, reports each violation with its file and line, and exits non-zero. It has no dependencies and needs Node 18 or later.

terminal

$ 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: the build fails

Nonzero radius, and rounded utility classes
Blur or spread on a shadow, drop-shadow, shadow-md
backdrop-filter, filter: blur(), text-shadow
transition: all, durations over 240ms
Gradient clipped to text

Warnings: fail only with --strict

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 gets installed

.claude/skills/boxy/

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-overlays.md   menus, context menus, popovers
  components-navigation.md breadcrumbs, tabs, trees, TOC
  components-content.md    code, lists, accordion, prose
  components-data.md       tables, tiles, charts, meters
  components-marketing.md  hero, pricing, FAQ, blog, docs
  components-forms.md      dates, sliders, upload, auth
  components-ai.md         agent chat, tool calls, approvals
  icons.md                 the icon set, its drawing rules
  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, layout primitives
  boxy-components.css      every component, implemented
  boxy-icons.svg           51 square-capped icons
  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

all at once

$ npx boxy-design init --ai all --css

Agents other than Claude also get the full reference docs in .boxy/, so every agent reads the same files.

Ready

Stop asking your agent to remove the rounded corners

Install it once. After that, the UI your agent builds has square corners, passes the contrast checks and gets linted before it reaches you.

See components