From Making Every Screen to Defining the Constraints
Background
Early on, I helped set up the design tokens and patterns for our new AI platform so teams could move fast from day one. Soon, speed plus two different tech stacks did what speed does: the UI started to drift.
Then the team got smaller. Two designers were left, and PMs were being asked to prototype their own ideas. I couldn't review every prototype, and I noticed something: PMs were shipping UIs that didn't quite feel right, but I could tell what they were going for. They needed clearer parameters to work within as the design system was starting to take shape.
What I Built
An interactive reference for our app chrome. It shows how headers work, how child pages nest, and the grid and column structure, with notes for engineering. I also added sample layouts, because column rules alone weren't enough. Structure tells you where things can go, and layouts show what good looks like.
Then I turned it into a Claude skill. It gives PMs the shell parameters (chrome, containers, columns, layouts) and pulls the real design system tokens and primitives, so a prototype dropped into it fits the product without anyone memorizing the rules. The design system stays the single source of truth. The skill is how it reaches people who don't live in Figma.
Seven PMs are using it so far. One told me: "This is solid, and loads better than what we have currently, so I am in favor of moving forward with this ASAP."
What I Believe
Design systems are changing. The source of truth used to be a library and docs that people read and interpreted. When AI helps build the prototypes, that isn't enough. The system has to be something tools can apply: real tokens, clear parameters, and examples that both people and models can read.
The designer's job shifts from drawing every piece to defining the constraints and intent, so everyone, and every tool, has what it needs to get it right.
