Go back to Learn

List · AI design · AI coding · About 4 min read

10 design skills that stop your agent shipping AI-looking UI

The full list behind the SKILLS carousel: UI/UX Pro Max, Anthropic, Vercel, Google and six more, with one install command each for Claude Code, Codex and Cursor.

Read guide
Ten ivory cards depicting design skills, including color, layout, motion and accessibility, with a red cursor on a navy background.
Paulo Cauhi · Last verified

Prefer a PDF? Get it by email.

You get the PDF and future guides by email. Unsubscribe any time. Privacy

This is the full list behind the SKILLS carousel: the 10 skills and standards that do the most to stop a coding agent from shipping AI-looking design. Together they hold more than 740,000 GitHub stars, and three come straight from Anthropic, Vercel and Google. Almost all of them install with one command and run in Claude Code, Codex and Cursor.

01UI/UX Pro Max 02frontend-design 03Awesome DESIGN.md 04Taste Skill 05Impeccable 06Emil Kowalski's skills 07web-design-guidelines 08Hallmark 09design.md 10Huashu Design

Before you start

  • A coding agent: Claude Code, Codex or Cursor.
  • Node.js 18 or newer, for npx.
  • Run the commands in your project folder. The skills installer asks which agents to install for; -a claude-code -a codex -a cursor skips the question and -g installs for every project.
  • You don't need all 10. Start with one for visual direction and one for review.

UI/UX Pro Max · 130K stars

A full design engine inside your agent. It searches a local base of 79 styles, 192 product palettes, 74 font pairings and 119 UX rules before it draws a screen.

Terminal
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

Claude Code also has a plugin: /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill. Repo: nextlevelbuilder/ui-ux-pro-max-skill.

frontend-design · Anthropic's official skill

The skill Anthropic itself publishes so Claude avoids generic visuals: pick a clear aesthetic direction and execute it carefully instead of repeating the usual template. It lives in the official skills repo, 178K stars.

Terminal
npx skills add anthropics/skills --skill frontend-design

Repo: anthropics/skills.

Awesome DESIGN.md · 118K stars

A collection of 74 DESIGN.md files capturing the visual language of real sites (Apple, Airbnb, Claude and more). Nothing to install: copy the file for a brand you admire into your project root and ask the agent to follow that style.

First use. Grab a file from getdesign.md or the repo's design-md/ folder, save it as DESIGN.md and ask: "Build this page following DESIGN.md." Repo: VoltAgent/awesome-design-md.

Taste Skill · 90K stars

Gives your agent taste. It infers the visual language from your prompt and sets three 1 to 10 dials: layout variance, motion intensity and visual density.

Terminal
npx skills add Leonxlnx/taste-skill --skill "design-taste-frontend"

Watch for lookalike copies. The original is Leonxlnx/taste-skill.

Impeccable · 71K stars

By Paul Bakaus, creator of jQuery UI and ex-Google. One skill whose commands become a shared vocabulary with your agent: critique, audit, polish, bolder, quieter, plus a detector for the most common AI-made site habits.

Terminal
npx impeccable install

Then run /impeccable init inside your agent (in Codex, $impeccable init). Full walkthrough in our design skills guide. Repo: pbakaus/impeccable.

Emil Kowalski's skills · 41K stars

Emil is a design engineer at Linear, previously on Vercel's design team, and created Sonner and Vaul. The pack teaches animation and micro-interactions: the right easing, the right duration, and reviews of animations you already have.

Terminal
npx skills@latest add emilkowalski/skills

Repo: emilkowalski/skills.

web-design-guidelines · Vercel's official skill

Reviews your UI code against Vercel's Web Interface Guidelines: accessibility, focus, forms, loading states. Ask it to "review my UI" and it returns what to fix. It lives in Vercel's official skills repo, 31K stars.

Terminal
npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Repo: vercel-labs/agent-skills.

Hallmark · 29K stars

An anti-slop skill from Together AI. For each brief it picks a structure and one of 21 themes, then runs the page through dozens of checks before handing it back. It also has audit, redesign and study, which extracts the style of a site you admire.

Terminal
npx skills add nutlope/hallmark

Repo: Nutlope/hallmark.

design.md · Google's official format

Google Labs' spec for describing a visual identity to an agent: exact tokens (colors, fonts, spacing) at the top of the file and the reasoning behind them in prose. It's the format behind item 3. The official package lints your file:

Terminal
npx @google/design.md lint DESIGN.md

Repo: google-labs-code/design.md.

Huashu Design · 24K stars

HTML prototypes, slides and animations straight from your agent. Before building, it proposes three visual directions for you to pick from. The docs are in Chinese, but the skill works with prompts in any language.

Terminal
npx skills add alchaincyf/huashu-design

Repo: alchaincyf/huashu-design.

Keep learning

Choose a practical next step.

Design skills for AI agents: sites that don't look AI-made Install Emil Kowalski's skills, Impeccable and Taste, then connect the Figma and Playwright MCPs so Claude Code, Codex or Cursor designs, builds, tests and screenshots its own work.ECC: a whole engineering team inside Claude Code, Codex and Cursor Install ECC, the free MIT-licensed harness with 68 agents and 292 skills, then use it for real: plan a feature, write it tests-first, attack your own app and close the test coverage.
Go back to Learn

Get the guide as a PDF

Get this guide as a PDF, plus future practical guides by email.

You get the PDF and future guides by email. Unsubscribe any time. Privacy

Comments

Comments

Have a question or something to add? Join the conversation.

No account needed. Select Sign in and choose a name to comment.

Loading the conversation…

Comment privacyCommenting guidelines