Critly
design principles and skills that help coding agents build better UI
critly is a design tool for building with agents. it's a library of design principles, each with the rule, real numbers and a demo you can toggle, plus skills that let your agent build and review UI with them. a linter is next. it will measure the running app and fail with the fix named.
- design concepts, each with a demo
- ~70
- agent skills, generated from the library
- 2
- command to install them
- 1
what it does
a library you can try
concepts across type, colour, spacing, motion, states and performance, each with real numbers and an interactive demo.
skills for your agent
critly builds and reviews UI with the concepts, and critly-audit audits a whole app. this site was redone with them.
a linter, coming next
critly check will measure your running app against your design rules and fail with the fix named, so an agent can't talk its way past it.
inside the app
why I built it
writing code costs almost nothing now. design is the slow part. agents build UI that works but feels generic, with default easings, no states past the happy path, and off-scale spacing.
rules in a prompt get read once and forgotten. I wanted principles an agent actually uses while it builds, and a check it can't argue with.
built with
- Next.jsevery concept page is content, so it's all served static.
- MDXone typed source feeds the site and generates the skills.
- MMotionthe demos need real springs.
- PPlaywrightthe linter measures the rendered page, not the source.
how it works
one source, two readers
concepts are MDX files. the same content builds the site for people and the skill files for agents, so they never drift.
demos are the argument
each concept ships a wrong and a right version of the same component, so you feel the difference instead of reading about it.