
1 skill, 17 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI.
I help teams of all sizes navigate AI transformation: upleveling developers, building AI-native workflows, and shipping end-to-end products. Deep expertise in developer experience, content platforms, and creator economy. Whether it's design systems, full-stack architecture, or figuring out how AI fits into your org, I can help.
"Great design prompts require design vocabulary. Most people don't have it."
Vocabulary is just the surface. Beneath it is an understanding of how to achieve your goals with design. How to make things that are easy to use, accessible, that create a certain impression.
Does this website (presumably made with the help of these AI tools) show this kind of understanding of design? Not really. It's chaotic, the text is often hard to read and there is a ton of fluff, both in terms of visuals and copy.
There is a "Frequently Asked Questions" section and a "Popular" $100 tier in the "Support the Project" section, even though this project seems to be brand new. Why lie to the reader?
I was about to make a similar comment. The before/after showcases look in many cases harder to grasp and navigate on the after side.
Roundabout what I would expect as a result from the prompt "make a website that demonstrates how LLMs can better designs"
> Vocabulary is just the surface.
Yes, but with LLMs, sometimes simply mentioning the right words is enough to prime the model in the direction you want to take it. If you start a prompt talking about leading and type pairings, it will take greater care with typography. You don't need to be an expert typographer to take advantage of this phenomenon.
How will an LLM "take greater care with typography" if it can't see the page it is creating? How will it "improve" leading if you need a human to see that there's too much distance between lines or too little?
I'm assuming this is in the context of an agent that can see what it's doing. And I wouldn't assume humans have a monopoly on judging leading.
Because humans have already annotated diagrams and examples of what ‘too much’ and ‘too little’ look like, and these have been incorporated into the model. It tries to reproduce the content that is associated with humans indicating that they are taking greater care, and that content has the ‘not too much / not too little’ judgement already baked into it.
With playwright, it can see what it is creating. Unsurprisingly, it works much better if you hook it up to a browser.
There's also the Claude extension for Chrome which integrates with Claude Code.
Author here. Thanks for the feedback. Vocabulary helps in my experience, but definitely doesn't make the user or the LLM a great designer.
I toned down some of the language on the landing page, as it had sometimes too much snake-oil-salesman-energy, should not oversell. I've also toned down fluff, fixed some typography issues. I rushed the landing page and example case studies to get this shipped, whereas the actual skill and commands my colleagues and I have been using effectively on real projects (that I can't screenshot yet), and the open sourcing is a side product. Lesson learned!
I also hear you on the "Popular" $100 tier. That was a side effect of Claude Code trying to make this too "SaaS-y", and I admittedly didn't love it and shouldn't have shipped that language. While it might work for SaaS, this project isn't intended to be SaaS, and just open source for the community in the hopes that it helps somebody the way it helped me, so I toned it down significantly.
> Does this website (presumably made with the help of these AI tools) show this kind of understanding of design? Not really. It's chaotic, the text is often hard to read and there is a ton of fluff, both in terms of visuals and copy.
I agree. I tried figuring it out for 1-2 minutes, and then closed the tab.
Or, said another way, vocabulary provides us with the words (semantics). You also need a grammar (syntax), which itself needs to be ordered toward an end (pragmatics).
This isn't really what I said, and is considerably less clear. What I meant is that you can't boil design down to certain stylistic flourishes and words denoting them (e.g. "vertical rhythm", to take an example from the linked page). Whatever you're doing, it involves understanding how the viewer will react to what you will show them and why.
Let me pull out my 5000 px tall monitor so I can see the examples further down the page. impeccable style, really
I had to go back and check, with "modern invisible scrollbars", and those useless theme settings at the bottom I assumed the page was just some css demo that ended there and left.
Concept seems fun, and I'm expecting we'll see a bunch of those in the next few weeks/months. UX of that specific page seems broken, however, as the container for the explanation of each "function" doesn't scroll along with the rest of the content (stays stuck at the top) and makes it impossible to see.
I can confirm the broken UI. The demo container disappears as you scroll down, leaving a blank space that takes up most of the screen. I want to make a snarky joke about this but I'm just tired at this point.
Author here. That's actually great feedback. I accidentally broke the container scroll with a single line CSS change to fix something else, ugh. Should be fixed now.
Works now! Another free suggestion: when you drag a bit fast, since the animation is a bit slow, sometimes the boundary between before/after will barely move before your cursor makes it to the edge and reset to the middle, which is a bit jarring / doesn't let me really see anything. Should either make the animation faster, or put the reset threshold outside of the container somehow.