Submit tool

Trending now

Design skills that stop AI pages looking AI-made

Three open source skills teach Claude Code, Codex and Cursor to skip the purple gradients and generic cards. What each one does and how to set it up.

  • 3 skills
  • Free and open source
  • Claude Code, Codex, Cursor

Why everyone’s installing them

Ask a coding agent for a web page and you tend to get the same one: Inter everywhere, a purple-to-blue gradient, a small label over every heading and a row of cards in cards. Design skills are instruction packs you drop into Claude Code, Codex or Cursor that name those habits, ban them and give the agent a way to check its own work.

  • They catch the tells. Each one lists the defaults that make a page look generated and flags them before you see the result.
  • They pick a direction first. Instead of one safe look, the agent starts from a theme or an art direction that fits the subject.
  • They look at the result. Scripts open the page in a real browser, take screenshots and lint it, so the agent fixes what it can see.

The three people use

Set one up

  1. Pick one. They overlap and sometimes disagree, so start with a single skill rather than all three.
  2. Install it in your project. Run its install command from the project folder (or globally), then restart Claude Code, Codex or Cursor.
  3. Name it in the prompt. Most fire on their own for UI work, but “use hallmark to build…” or “/impeccable critique” makes sure.
  4. Give it real material. Screenshots, photos and real numbers make more difference than any rule; the skills won’t invent them for you.

Know a tool that belongs on a shelf?

Send it in and tell us what you use it for. If it earns a shelf, you’ll hear back with the line we wrote for it.

Submit tool

    ↑↓ to move↵ to openesc to close