This is a bit of a different post than what I usually cover here at CDO School. But it's more closely related than what it appears to be on the surface.
So much of my focus here (writing, courses, and programs) is to help you make sense of what's happening around you so you can make your decisions more legible to non-designers; executives, PMs, engineers, and "the business." When it comes to working with AI, it's even more critical that your decision-logic is clear because otherwise, the models will absolutely hallucinate. They're built to predict and no matter how we engage with them, they'll go on predicting.
For the last 9 months or so, Hang 🤙 Xu has been asking a pretty straight forward request related to how designers are working with AI. He'd like to:
- see designers showcase how they’re using AI at their companies to create the breakthroughs that they’re often hinting at
- demo the actual work so others can see how it’s done
- show vibe coding output that consistently uses existing design system components, and to see how running agents could create great design at scale
I know this topic is "out of my lane," but before I talked about business, strategy, communications, and running teams, I used to design, make, and build software. Much of my experience was working at large companies operating at scale who hired me specifically to change how they solve problems.
When it came to designing software, my teams were incorporating a lot of the bleeding edge approaches for design systems as early as 2012. There was a time when I was talking quite a bit about design systems.
For the last couple of weeks, I've been playing around with a prototype that is my answer to Hang's question.
I created a prototype based on how I'd be thinking about it if I were on an internal team right now. With Google's Stitch announcement last week, I figured it might be worthwhile to show others what I've been experimenting with.
TLDR: I turned a legacy Design System into a Claude Skill that creates both Figma files and vibe coded designs that are exactly the same.
In this experiment (video overview below)…
- I grabbed a Sass-based UI framework my team created at EA in 2015 called Joystick
- I borrowed the Design Language and UX frameworks/guidelines from Microsoft's Fluent Design System
- I worked with Claude to merge both into a single, AI-ready Claude Skill which essentially turned the html, css, javascript, etc. into mostly markdown, scss tokens, and json
- I tested how it would work by vibe coding Joystick's docs site using only the Claude Skill
- I updated the Claude Skill to generate a file format both Figma and web apps understand (JSON) that turns a vibe prompt into a file that could be used by both
- I built a prototype Figma plugin that renders responsive-layouts based on the JSON file
- I built a vibe-coded responsive app/site that exactly matches the Figma renders because it uses the same JSON file as the source of truth
Now, I know getting an exact UI match ≠ an AI model designs well. But, it's my firm belief that the kind of stuff we see in most design systems is not guidance, but advice. The most difficult thing to get engineers to adopt has never been the UI framework. It's always been the advice we share along with it. The best practices for using color, typography, layout, accessibility, etc. That advice is hard to adopt because it's not clear guidance.
Ultimately, when you're making a color or typography choice, or deciding to use top vs. left-sidebar navigation element, you're making a choice based on experience. Whether or not you can articulate why you made that choice is the difference of whether or not an engineer will make the same choice. This is the same thing for AI models.
To help these models get better at vibe coding or performing as personal agents, it's imperative we get better at articulating what we mean. As I continue testing this little prototype, my next steps will be articulating my decision-logic to help Claude make the same design decisions I would.
Want to create AI Agents that work like you do?
Join my workshop Claude Cowork for Design Leaders on April 21st. Early-bird pricing ends on Friday, so get your tickets now before prices go up.
