{"slug": "show-hn-boxy-design-system-and-agent-skill-for-interfaces-with-square-corners", "title": "Show HN: Boxy – Design System and Agent Skill for interfaces with square corners", "summary": "Avestura released Boxy, an MIT-licensed zero-radius design system and agent skill that enforces square-corner interfaces through 15 lint rules and a `boxy-check` CLI that parses CSS, HTML, JSX, Vue and Svelte and exits non-zero on violations. The system ships with 13 reference docs, zero dependencies, requires Node 18+, and is installable via `/plugin marketplace add avestura/boxy-design-skill` or `npx boxy-design init`. Boxy defines seven axioms — including zero border-radius everywhere, 1px hairline separators, no shadow blur, 4px spacing scale, under 5% accent pixels, typographic hierarchy, and 80–160ms mechanical motion — so coding agents cannot drift back to rounded cards and soft shadows.", "body_md": "01 / A design system for agents\n\n# Interfaces with square corners and nothing to hide\n\nA 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.\n\n`/plugin marketplace add avestura/boxy-design-skill`\n`/plugin install boxy@boxy-design-skill`\n`npx boxy-design init`\n`curl -fsSL https://github.avestura.dev/boxy-design-skill/install.sh | sh`\nMIT · zero dependencies · 13 reference docs · 15 lint rules\n\n02 / The rules\n\n## Seven axioms. Violating one is a bug, not a preference.\n\nMost 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.\n\n01\n\n### Radius is zero\n\nEverywhere, without exception. Including avatars, badges and toggles. The radius token exists only so that zero is explicit and greppable.\n\n02\n\n### Lines carry structure\n\nA 1px border is the primary separator. Reach for a border before a background change, and a background change before a shadow.\n\n03\n\n### Never blur a shadow\n\nDepth is a hard offset or a hairline. Any blur radius above zero is forbidden, `backdrop-filter` included.\n\n04\n\n### Everything snaps to 4px\n\nSpacing, sizing and leading come from one scale. No 13px, no 0.375rem, no arbitrary values slipped in under deadline.\n\n05\n\n### Accent is rationed\n\nUnder 5% of painted pixels: links, focus, one primary action. Neutrals carry everything else.\n\n06\n\n### Hierarchy is typographic\n\nSize, weight, tracking, case and rules. Not colored headings, not gradient text, not another shade of purple.\n\n07\n\n### Motion is mechanical\n\n80–160ms, linear or sharp. Opacity, color and whole-pixel translation. No scale, no bounce, no spring.\n\n08\n\n### And it is checked\n\n`boxy-check` reads your source and\n          fails on every one of the rules above. The agent runs it before it says done.\n        \n\n03 / The difference\n\n## Same content. One of them was designed by default.\n\nBefore — the default\n\n- × 14px radius, pill badge, pill button\n- × 8px blurred drop shadow\n- × Violet gradient doing the work of hierarchy\n- × Indistinguishable from every other dashboard\n\nAfter — Boxy\n\n- ✓ Zero radius, square tag, square buttons\n- ✓ 1px hairline and corner ticks carry the structure\n- ✓ One flat accent; the second action is an outline\n- ✓ Reads as engineered rather than decorated\n\n04 / Modes\n\n## One system, three postures\n\n        Identical radius, borders, spacing, type and motion. Only section rhythm,\n        display scale, grid columns and substrate visibility change. Set\n        `data-mode` and the whole page follows — try the\n        **mode** control in the header.\n      \n\n01 / Runtime\n\nKeystroke latency\n\np50\n\n0.6ms\n\np99\n\n4.1ms\n\nDev tools, infra, technical products. Grid substrate, corner ticks, mono annotations, dense by default.\n\n| Node | State | Load | \n|---|---|---|\n| api-01 | Active | 0.42 | \n| api-02 | Active | 0.38 | \n| api-03 | Drain | 0.91 | \n\nEnterprise apps, dashboards, admin. 16 columns, bottom-border fields, heavy tables, no substrate.\n\nPayments\n\n            Revenue\n\ninfrastructure\n          \n\nMarketing, landing, docs. Big display type, 160px rhythm, generous air, still perfectly square.\n\n05 / Enforcement\n\n## The part that makes it stick\n\n        Guidance an agent can ignore is decoration. `boxy-check` parses\n        CSS, HTML, JSX, Vue and Svelte, flags every violation with a file and line,\n        and exits non-zero. Zero dependencies, Node 18+.\n      \n\n``` bash\n$ npx boxy-design check \"src/**/*\"\n\nsrc/components/Card.tsx\n     8  error  Nonzero border-radius: border-radius: 8px  radius\n     9  error  Shadow with a blur or spread radius: blur 12px  shadow-blur\n    14  warn   Spacing off the 4px scale: padding: 13px (13px)  space\n    22  warn   Raw hex outside the token file: #333333  raw-hex\n\nsrc/styles/hero.css\n    31  error  transition: all: transition: all  transition-all\n    31  error  Transition longer than 240ms: 0.3s > 240ms  duration\n    47  error  backdrop-filter / filter blur: backdrop-filter  blur\n\n[ FAIL ]  46 files - 5 errors, 2 warnings\n         boxy-check.mjs --list-rules for the full rule set\n```\n\nErrors — build fails\n\n- Nonzero radius, and rounded utility classes\n- Blur or spread on a shadow, drop-shadow, shadow-md\n- `backdrop-filter` ,`filter: blur()` ,`text-shadow`\n- `transition: all` , durations over 240ms\n- Gradient clipped to text\n\nWarnings — --strict to fail\n\n- Spacing off the 4px scale\n- Font sizes off the type scale\n- Raw hex outside the token file\n- Font weights below 400\n- `ease-in-out` , overshoot curves,`scale()`\n\n06 / Contents\n\n## What lands in your project\n\n```\nSKILL.md                     the seven axioms, modes, routing\nreferences/\n  tokens.md                every token, every value\n  modes.md                 blueprint / industrial / editorial\n  layout.md                rails, grids, shells, breakpoints\n  typography.md            scale, labels, numerals, measure\n  color.md                 contrast pairs, semantics, charts\n  components-core.md       16 components, exact specs\n  components-data.md       tables, tiles, charts, states\n  components-marketing.md  hero, pricing, footer, docs\n  components-forms.md      steppers, validation, auth, palette\n  motion-depth.md          durations, easing, elevation\n  blueprint-details.md     substrate, ticks, annotations\n  accessibility.md         contrast, focus, keyboard, targets\n  anti-patterns.md         what breaks it, and the fix\nassets/\n  boxy.css                 tokens, reset, utilities\n  design-tokens.json       W3C DTCG export\nscripts/\n  boxy-check.mjs           the linter\n```\n\nAgent targets\n\n| Target | Writes | \n|---|---|\n| Claude Code | .claude/skills/boxy/ | \n| Cursor | .cursor/rules/boxy.mdc | \n| Windsurf | .windsurf/rules/boxy.md | \n| Any agent | AGENTS.md | \n| Copilot | .github/copilot-instructions.md | \n\n``` bash\n$ npx boxy-design init --ai all --css\n```\n\n          Non-Claude targets also get the full reference set in `.boxy/`,\n          so every agent reads the same source of truth.\n        \n\nReady\n\n## Stop asking your agent to remove the rounded corners\n\nInstall once. Every UI it builds afterwards is square, ruled, accessible and checked.", "url": "https://wpnews.pro/news/show-hn-boxy-design-system-and-agent-skill-for-interfaces-with-square-corners", "canonical_source": "http://github.avestura.dev/boxy-design-skill/", "published_at": "2026-09-21 07:40:28+00:00", "updated_at": "2026-09-21 07:53:44.622170+00:00", "lang": "en", "topics": ["ai-agents", "developer-tools", "ai-tools"], "entities": ["Avestura", "Boxy", "boxy-check", "boxy-design-skill", "Node 18+"], "alternates": {"html": "https://wpnews.pro/news/show-hn-boxy-design-system-and-agent-skill-for-interfaces-with-square-corners", "markdown": "https://wpnews.pro/news/show-hn-boxy-design-system-and-agent-skill-for-interfaces-with-square-corners.md", "text": "https://wpnews.pro/news/show-hn-boxy-design-system-and-agent-skill-for-interfaces-with-square-corners.txt", "jsonld": "https://wpnews.pro/news/show-hn-boxy-design-system-and-agent-skill-for-interfaces-with-square-corners.jsonld"}}