Ask almost any AI to build you a web page and you get the same page every time. A big heading in the middle, three boxes underneath, a colourful button. It works. It also looks exactly like everything else on the internet.
There is a reason for that. The model has seen millions of tutorial pages, and it gives you the average of all of them. The average is safe and forgettable.
Anthropic publishes several free skills aimed at fixing exactly this, at github.com/anthropics/skills.
frontend-design: stop it looking generic
frontend-design is about making deliberate choices instead of default ones. Colour, fonts, spacing, and having an actual point of view.
It does not design the page for you. It changes how the model approaches the decision, so you get something with an opinion you can argue with, rather than the safe average.
The difference shows up most on the second attempt, once you have said what you dislike about the first.
theme-factory: make everything match
Designing one page is easy. Making page two look like page one is where things fall apart.
theme-factory handles that. It applies one set of colours and fonts across everything you make, so your pages, slides and documents look like they belong together. It comes with ten ready-made looks, or it can build you a new one.
brand-guidelines: copy it, then replace it
Worth knowing before you install this one: brand-guidelines contains Anthropic’s colours and fonts, not yours.
So it is a template rather than a finished thing. Copy the folder into your own project, swap in your colours, your fonts and your tone of voice, and save it.
Once you do, everyone working on that project gets your brand applied automatically, without anyone having to remember the hex codes. For a team, this is the single most useful twenty minutes on this list.
canvas-design and algorithmic-art: make your own images
canvas-design makes still images: posters, covers, graphics. Its instructions specifically tell the model to create original work rather than imitate a named artist, which is a sensible rule to have built in.
algorithmic-art makes patterns and shapes using code, which is handy for backgrounds and textures.
Both matter for a practical reason. Images you generate yourself are yours. Images pulled off the internet belong to someone, and using them can get a site taken down.
web-artifacts-builder: for bigger builds
web-artifacts-builder is for pages with moving parts rather than a single static page. Things that remember what you clicked, or have several screens.
Reach for it when a page needs to do something, not just show something.
The order to use them in
- Set up your brand first. Copy brand-guidelines and fill in your own colours and fonts. Everything after this inherits them.
- Design with frontend-design, and push back on the first version. Treat it as a suggestion.
- Lock it in with theme-factory so the next page matches this one.
- Make your own images with canvas-design instead of downloading them.
- Check it in a real browser before you call it finished.
Step one is the one people skip, and it is the one everything else depends on.
What these cannot do
None of them decide what your site is for. If you do not know what you are trying to say, no skill will work that out.
What they do is raise the floor. You still have to look at the result and have an opinion about it, and these are far more useful to someone who can explain why the first version is wrong.
Join the discussion