10 Design Skills for Code Agents: Quit the Purple Gradient First

X user Alexendre (@pato__project) posted a list, saying he had had enough of a certain kind of app: interfaces that you can tell at a glance were assembled by AI. He prepared 10 Skills for code agents, covering design direction, animation, mobile details, and browser QA. The original post is here.

These Skills work by breaking the design process into callable commands: set direction, find references, audit, fix animations, test mobile, and run browser tests. They won't automatically turn an agent into a designer.

1. frontend-design (Anthropic): Set the art direction first, including typography, color, and composition, and require it to fit the specific product. Link: SKILL.md

2. UI UX Pro Max: Find palettes, font pairings, and UX suggestions by project type. The repo includes a design system generator covering 192 product categories and 79 searchable UI styles. Link: GitHub

3. Impeccable: Audit design, clarify copy, and polish. Common commands are critique, clarify, and polish. It also includes 62 deterministic detection rules specifically aimed at common problems in AI-generated frontends. Link: GitHub

4. emil-design-eng (Emil Kowalski): Handles buttons, transitions, and the small details that make an interface feel smooth. Link: SKILL.md

5. create-design-md (ibelick): Write visual rules into DESIGN.md to give the agent a stable framework and avoid re-guessing the style every round. Link: SKILL.md

6. review-animations (Emil Kowalski): Find animations that are too slow, wrong easing curves, and meaningless motion. Link: SKILL.md

7. mobile-native (Emil Kowalski): Fix annoying details in mobile web apps, including touch, scrolling, input zoom, and notch occlusion. Link: SKILL.md

8. break-ui (Emil Kowalski): Test screens with extremely long names, empty lists, and overflowing data to see when the interface breaks. Link: SKILL.md

9. web-design-guidelines (Vercel): Check accessibility, forms, keyboard focus, and UI states. Link: SKILL.md

10. webapp-testing (Anthropic): Use Playwright to run paths in the browser, check for errors, and take screenshots. Link: SKILL.md

The real value of this list is in constraints and QA. Generation is only the first half; whether you can catch purple gradients, rounded cards nested inside rounded cards, and gray text on colored backgrounds is the dividing line. Impeccable's README also lists similar anti-patterns: don't use overused fonts, don't use pure black or pure gray, don't stuff everything into cards, and don't use bouncy easing.

One reply made a very practical suggestion: first pin two colors and two fonts in a brand file. Without that, the agent will apply good methods to defaults and end up back at purple gradients everywhere. Another commenter said that just quitting the default purple gradient is half the battle. Another reply poured cold water: UI UX Pro Max was disappointing after using it this summer.

So don't install ten at once. Pick three or four for your project and get the brand colors, fonts, DESIGN.md, and QA Skill working first. Installing ten Skills won't automatically grow taste, but at least it can make the agent look in the mirror before handing in its work.