Sidestep: a design system built for AI coding tools

Sidestep is a free design system for learning products, built so AI coding tools can use it well. It ships as React components, CSS tokens, a Figma library, and a Rive mascot.

Most design systems specify color down to the hex value and leave motion vague, so when an AI agent adds an animation, it makes one up. Sidestep names motion by role (feedback, enter, celebration, and five more), gives every component a written motion spec, and offers four motion personalities a product can switch with one setting.

I tested it with two AI agents given the same request. Without Sidestep, the agent wrote 1,146 lines and invented 117 colors, timings, and sizes. With it, the agent wrote 340 lines and invented none.

To prove it in a real product, I built Rule of Thumb, a small design tutor made only from Sidestep's components, with Hubert, the hermit crab mascot, reacting as you learn.

I designed the system, the mascot, and the motion, and built it with Claude Code as my engineering partner.

If your team is building with AI tools, I can give them a design system they'll follow.

Try it live: https://sidestep.jonhaines.design

Full case study: https://jonhaines.design/motion-playground/sidestep