For AI tools
Your coding agent already knows the rules.
Sidestep ships with the files that teach an AI coding tool how to use it. They cover the usual things, colors, type, and components, and the thing other systems leave out: motion.
What is included
- A skill that says which component to use, the rules for new UI, and how to decide whether something should move, which role to pick, and how to write it.
- DESIGN.md, the system in an open format that design tools are starting to read.
- Rule files for Claude Code and Cursor, to drop into a project.
- A token reference and every motion spec, generated from the same source as the code, so they cannot go out of date.
Does it work?
Twice, two AI agents were given the same request. One project had Sidestep installed. The other had only React.
| Without Sidestep | With Sidestep | |
|---|---|---|
| A quiz screen | ||
| Lines of code written | 1,146 | 340 |
| Colors, timings, and font sizes invented | 117 | 0 |
| Sidestep components used | 0 | 5 |
| A settings screen | ||
| Lines of code written | 1,232 | 442 |
| Colors, timings, and font sizes invented | 125 | 0 |
| Sidestep components used | 0 | 10 |
One run per side each time, scored by a script that counts what Sidestep forbids. It measures consistency with the system, not quality. The versions without Sidestep were more elaborate, and about three times as long.
The agents with Sidestep also chose a named motion role for each animation they added, wrote down how their screens move, and made sure only one thing on screen celebrated at a time. Nobody asked them to.
The second test also found a bug in Sidestep and a rule that was too strict. Both were fixed. An agent using the system honestly turns out to be a good way to find its faults.