The framework prevents autonomous agents from introducing UI inconsistencies.
How we imbue coding agents with our design standards
To ensure coding agents live up to our design standards, we built a system with a skill, linters, evals, and an updating loop.
Learn how we did it and how to build your own ↓ https://vercel.com/blog/teaching-agents-product-design-at-vercel
Many users praised Vercel's AI agents for gaining design taste and human-like product feedback loops, while a few noted issues with legacy code or UI bugs.
No Digg Deeper questions have been answered for this story yet.
@JohnPhamous So good
@TylerVdesign share what u make!
an improving design loop
https://vercel.com/blog/teaching-agents-product-design-at-vercel
@JohnPhamous Love it, and taking a lot of reference.
@rauchg Design standards always have gaps. Agents fill them with training defaults - usually Tailwind or Material conventions, not your intent. The failures aren't the rules they break, it's the rules you never wrote. How do you catch that?
@adrianmg 🫶
@JohnPhamous have you guys published anything about how they handle evals for this system?? feels like the biggest black box to me whenever I think about building a similar for myself.
@rauchg has the team published anything about how they handle evals for this system?? feels like the biggest black box to me whenever I think about building a similar for myself.
@rauchg A simple question does your coding agent understand the intent of the user and try to optimise the output according to the user needs ?
@rauchg Agents with taste is much better than agents with vibes.
@JohnPhamous nice design designs
@rauchg How's it handling lint rules that aren't in the prompt? 👀
@JohnPhamous 👏 good read! Noticed a little overflow issue with the post’s Copy menu:
@JohnPhamous goat
@rauchg I think standards only work when agents can test them. otherwise it becomes taste in a prompt.
@rauchg 👀 Works til your 'design standard' agent hits a legacy CSS file from 2018.
@rauchg I think the copywriting skill can go further. I built this one to use phonaesthetics, error content guidelines and a Socratic teaching output template.
I’d love to see this incorporated into vercels skill so that it can reach more people!
https://github.com/ommakes/Skills/tree/main/righter
@rauchg The skills + linters + eval loop pattern is interesting. Hard part is encoding the 'why' behind design decisions, not just the rules themselves. An agent can follow a linter but miss the intent. Curious how they handle cases where standards evolve.
@rauchg The very app you are using has multiple nested modals and seems to work just fine for millions of users. Codifying little rules in text format sounds like a great idea but I don’t think it really works in practice. It’s mostly thousands of lines of extra context in every prompt.
@rauchg I assume this all done in a custom agent harness built on top of AI SDK + running on AI Gateway?
