"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?
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?
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.
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.
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.
That landing page example is devastatingly bad. You start with a page that has usage numbers, uptime, support 24/7 and a customer rating above the fold. You end up with a page that lacks all of these advantage and instead looks bland and has horrible typography and even less text contrast.
In line with that, the Dashboard looks more organized in the "after" picture, but that's because it lost most of its useful information.
Author here. I agree that that wasn't a strong example. I wasn't happy with the outcome of those before/after examples, it was rushed before the launch, and I shouldn't have shipped it. Removed. I mostly use these commands on smaller targeted sections on projects that I unfortunately can't screenshot, the case study examples where rushed and didn't communicate the value. Removed them for now, until I can fill in better, real examples.
The Form UX one is hilarious. It took a streamlined form used to convert and added enormous marketing copy that's more attention grabbing than the form itself. If you look closely they ran the `/simplify` command, haha.
This is the most egregious one in my eyes, too. I've run A/B tests on a few signup forms and without fail it validates the standard practice: the lowest drop-off rate comes from removing every possible obstacle and distraction. I'd bet a few dollars (which is as much as I'll ever bet) that design update would perform worse. The tool is almost intriguing as a _reductio_ of certain design practices.
The "after" designs all replace the rather generic "SV startup with a tailwind UI" with this serif font, parchment color look. It looks very similar to Anthropic's branding. I guess it looks marginally more distinctive? Though it seems to replace one knock-off visual identity for another. But the claim is that the tool here is implementing best practices through a sophisticated "design vocabulary", and in that sense the examples strike me as manifest failures. I find the general legibility of the "before" designs to be much better.
Author here, fair feedback. These examples were rushed, and didn't come out great. For this particular one, the concept was 'trustworthy, expensive life sciences company" of sorts, but it's still not a great before/after example. Removed for now, and will switch out for better examples soon.
I think the difficulty for AI to learn this, in general, is the missing out of the day-to-day experience living as a human, because that is what shapes our viewing habits. And those are what a good graphic design interacts with.
I'm glad it's not just me. One would hope that `BEFORE` and `AFTER` would imply `WORSE` and `BETTER`, but from their examples they somehow they managed to shoehorn `MEH` in there.
Author here. Fair. Mentioned this in another reply, but yes, the case study examples were poor, and I shouldn't have shipped those. Ironically I've used these design commands on a production project very effectively, and hence decided to open source, but couldn't screenshot the real examples as the project has not launched. I've removed the lackluster examples for now.
agreed, the information density on the "after" example is much worse for most dashboard use cases. Way too much space, not enough info. But I guess I'm not exactly surprised based on the style of the page being both zoomed in and spaced out
The "Before" examples look infinitely better than the "After" examples. Tells you all you need to know. Wouldn't be at all surprised if this whole thing was a ridiculous joke or a satirical commentary on pretentious design.
Author here. Not a joke, but the case study examples were poor, and I shipped them anyway. Ironically I've used these commands on a production project very effectively, and hence decided to open source, but couldn't screenshot the real examples as the project has not launched. I've removed the lackluster examples for now.
Define “better”. Some people actually prefer to wake up and make toast and eggs and coffee in their own kitchen, instead of just buying affordable, professionally barista-assembled grab-and-go from the tone-balanced local Starbucks on the way to work. It’s a deviant preference, really.
It's interesting to see people creating and 'selling' agent skills. This one asks for donations, but I was expecting to see a stripe link and 'download for 4 dollars, yours forever' (personally I think that would convert better...)
I wonder if there will be full-blown skill marketplaces soon. Would that be a way for some experts to recoup some (presumably very small portion) of the income they might lose due to generative AI market effects?
Come one, there are things to say about this project but the Download section is pretty clear. It installs commands for your LLMs and AI-based IDE.
It states that clearly in the section.
If you’re not familiar with what a /command is in the context of LLM, this may just not be for you and that's fine, but the purpose is clearly stated.
To get something usable out of an LLM (aka vibecooding, vibe engineering et al), it works best if you're an expert yourself -> a.k.a you need to know the "lingo".
So there's the possibility of skipping the intermediate work in between by exposing yourself to just the input and the output of the process for certain domains, this is for frontend I think.
The before/after box is not well designed. How am I supposed to tell which side is before and which side is after? They're apparently color-coded based on the color circles next to the labels, but the actual content doesn't seem to have anything matching that color code, so I can't tell which label goes with which side.
poor choice indeed, and I say this as the one who put the example there.. I rushed and tried to make a case of removing the AI slop aesthetics but you're right, got functionally worse. The examples didn't communicate the value, removed and will replace with better ones.
They set themselves up for a fall when they named themselves "Impeccable Style"
The mix of sans and serif fonts on their website is a mess. There's too much negative space, and it's inconsistent. Too many font sizes, and some that are so tiny they're illegible.
In the landing page before/after example, I think the "before" design looks more appealing.
Author here. I ironically spent a lot more time crafting the commands and skill, and not enough time on the landing page. Agree that I overdid it on "editorial look" to match the cheeky domain name. Thank you for the feedback, I've hopefully now improved consistency and negative space issues.
What a tittle, almost makes you feel good for vibe coding out slop without knowing half of what is going on. What are even the examples marginal css changes on already perfectly good designs?
If you want to look at the bright side, this design guide will be easier to spot SAAS, slop as a service.
"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.
Let's call it "form over function."
That landing page example is devastatingly bad. You start with a page that has usage numbers, uptime, support 24/7 and a customer rating above the fold. You end up with a page that lacks all of these advantage and instead looks bland and has horrible typography and even less text contrast.
In line with that, the Dashboard looks more organized in the "after" picture, but that's because it lost most of its useful information.
Author here. I agree that that wasn't a strong example. I wasn't happy with the outcome of those before/after examples, it was rushed before the launch, and I shouldn't have shipped it. Removed. I mostly use these commands on smaller targeted sections on projects that I unfortunately can't screenshot, the case study examples where rushed and didn't communicate the value. Removed them for now, until I can fill in better, real examples.
I had to triple check which was which in the `BEFORE` and `AFTER` examples, because I can see an awful lot of things that it's made worse.
The Form UX one is hilarious. It took a streamlined form used to convert and added enormous marketing copy that's more attention grabbing than the form itself. If you look closely they ran the `/simplify` command, haha.
The dashboard might even be funnier, though.
And this is what the creator chose to demo.
This is the most egregious one in my eyes, too. I've run A/B tests on a few signup forms and without fail it validates the standard practice: the lowest drop-off rate comes from removing every possible obstacle and distraction. I'd bet a few dollars (which is as much as I'll ever bet) that design update would perform worse. The tool is almost intriguing as a _reductio_ of certain design practices.
The "after" designs all replace the rather generic "SV startup with a tailwind UI" with this serif font, parchment color look. It looks very similar to Anthropic's branding. I guess it looks marginally more distinctive? Though it seems to replace one knock-off visual identity for another. But the claim is that the tool here is implementing best practices through a sophisticated "design vocabulary", and in that sense the examples strike me as manifest failures. I find the general legibility of the "before" designs to be much better.
Author here, fair feedback. These examples were rushed, and didn't come out great. For this particular one, the concept was 'trustworthy, expensive life sciences company" of sorts, but it's still not a great before/after example. Removed for now, and will switch out for better examples soon.
In all three cases, it also seems to have taken the brand guidelines, ripped them up, set fire to them, and then pissed on them.
I agree. That thing made all the designs worse.
I think the difficulty for AI to learn this, in general, is the missing out of the day-to-day experience living as a human, because that is what shapes our viewing habits. And those are what a good graphic design interacts with.
I'm glad it's not just me. One would hope that `BEFORE` and `AFTER` would imply `WORSE` and `BETTER`, but from their examples they somehow they managed to shoehorn `MEH` in there.
And if they need to explain it... ;-)
Tufte it isn't.
I like the idea of this, but in the examples I thought the "Before" looked much better on all 3...
Author here. Fair. Mentioned this in another reply, but yes, the case study examples were poor, and I shouldn't have shipped those. Ironically I've used these design commands on a production project very effectively, and hence decided to open source, but couldn't screenshot the real examples as the project has not launched. I've removed the lackluster examples for now.
It was especially jarring on the last example with the cool looking chart, then removed for a bunch of text.
agreed, the information density on the "after" example is much worse for most dashboard use cases. Way too much space, not enough info. But I guess I'm not exactly surprised based on the style of the page being both zoomed in and spaced out
The "Before" examples look infinitely better than the "After" examples. Tells you all you need to know. Wouldn't be at all surprised if this whole thing was a ridiculous joke or a satirical commentary on pretentious design.
Author here. Not a joke, but the case study examples were poor, and I shipped them anyway. Ironically I've used these commands on a production project very effectively, and hence decided to open source, but couldn't screenshot the real examples as the project has not launched. I've removed the lackluster examples for now.
Define “better”. Some people actually prefer to wake up and make toast and eggs and coffee in their own kitchen, instead of just buying affordable, professionally barista-assembled grab-and-go from the tone-balanced local Starbucks on the way to work. It’s a deviant preference, really.
Putting aside the execution:
It's interesting to see people creating and 'selling' agent skills. This one asks for donations, but I was expecting to see a stripe link and 'download for 4 dollars, yours forever' (personally I think that would convert better...)
I wonder if there will be full-blown skill marketplaces soon. Would that be a way for some experts to recoup some (presumably very small portion) of the income they might lose due to generative AI market effects?
i do not understand what this even is. Some stylesheets? What am I even downloading when I click "download"?
Come one, there are things to say about this project but the Download section is pretty clear. It installs commands for your LLMs and AI-based IDE. It states that clearly in the section.
If you’re not familiar with what a /command is in the context of LLM, this may just not be for you and that's fine, but the purpose is clearly stated.
I was about to write the same. I scrolled through it but I dont understand what it is.
To get something usable out of an LLM (aka vibecooding, vibe engineering et al), it works best if you're an expert yourself -> a.k.a you need to know the "lingo".
So there's the possibility of skipping the intermediate work in between by exposing yourself to just the input and the output of the process for certain domains, this is for frontend I think.
More vibe coding stuff.
From the authors website:
Renaissance Geek (noun)
A person who moves fluidly between art, technology, narrative, and systems — guided by curiosity instead of specialization.
With AI as their amplifier, this breadth makes them dangerous enough to build the future rather than be shaped by it.
And I thought that was an adverb. I’ve been making an idiot out of myself.
The before/after box is not well designed. How am I supposed to tell which side is before and which side is after? They're apparently color-coded based on the color circles next to the labels, but the actual content doesn't seem to have anything matching that color code, so I can't tell which label goes with which side.
Fair feedback. Removed the section for now, will replace with better, real examples.
replacing a metrics dashboard with text is one of the choices you could make
poor choice indeed, and I say this as the one who put the example there.. I rushed and tried to make a case of removing the AI slop aesthetics but you're right, got functionally worse. The examples didn't communicate the value, removed and will replace with better ones.
I tried having it critique my personal project and the feedback I got feels good. I have 0 design experience, so I think it can only improve things.
great to hear! Let me know how it goes for you, always happy for feedback from users.
They set themselves up for a fall when they named themselves "Impeccable Style"
The mix of sans and serif fonts on their website is a mess. There's too much negative space, and it's inconsistent. Too many font sizes, and some that are so tiny they're illegible.
In the landing page before/after example, I think the "before" design looks more appealing.
Author here. I ironically spent a lot more time crafting the commands and skill, and not enough time on the landing page. Agree that I overdid it on "editorial look" to match the cheeky domain name. Thank you for the feedback, I've hopefully now improved consistency and negative space issues.
"DON'T use pure white or pure black..."
This is something I hate: gray text. Designers love it but it is often very illegible because of inadequate contrast.
What does this even do? Read most of the page but still didn't understand the project actually is
It's a bunch of markdown files.
impeccable (adj.)
Of user interface style: low contrast and hence poor readability, with excessive white space.
Synonyms: inscrutable, unreadable, inaccessible
How is AI going to make a great design if it can't even draw a penguin on a bicycle?
Love it when the design tool breaks halfway down the page.
Should be fixed now. Sorry about that.
The dark theme is sooo bad for this page.
Agreed. Removed.
This is why aliens won't talk to us.
> no /pop command
Best comment.
What a tittle, almost makes you feel good for vibe coding out slop without knowing half of what is going on. What are even the examples marginal css changes on already perfectly good designs?
If you want to look at the bright side, this design guide will be easier to spot SAAS, slop as a service.