05_MeticsMedia_Tested_Claude_Skills

7 min read

Overview

MeticsMedia tests which Claude “skills” actually matter for web design and how they eliminate the generic, obviously-AI-generated look that most Claude output has. A skill is a saved markdown instruction set that Claude reads before doing any work — the equivalent of giving Claude a job description before assigning a task. The host demonstrates a before/after with the same open-ended prompt, runs four essential skills (front-end design, Impeccable, UI/UX Pro Max, web design guidelines from Vercel Labs), then shows how to explore skill libraries (UI Skills, Type UI, MCP Market) and how to build a custom skill (“SaaS UI Design”) through a guided Claude conversation. Core takeaways: skills fix AI-slop by teaching Claude what not to do, and output quality still depends on how specifically you communicate direction.

Key Insights

  1. Skills are saved instruction sets Claude reads before acting — they encode your preferences, design system, tone, and client context so you don’t re-explain them every time. (0:32)
  2. The same prompt + same Claude produces dramatically better output with a skill loaded — skills stop Claude feeling like a “generic AI designer” and make it feel like “a collaborator who knows your actual work.” (0:54)
  3. AI-slop signals are recognizable and repeatable: purple gradients, white background, soft shadows, improper vertical card alignment, and emojis — “nothing about this screams creative, it just screams AI-generated.” (3:42)
  4. The front-end design skill (by Anthropic) tells Claude exactly what not to do — it explicitly forbids “generic AI-generated aesthetics like overused font families, clichéd color schemes.” (3:02)
  5. Skills ship with defaults you’re not locked into — you can edit the underlying .md file via “Edit with Claude” (e.g., “I only ever want to use sans-serif fonts — Geist, Google Sans, DM Sans”). (5:35)
  6. Impeccable teaches the AI how design works before any command runs — typography, color/contrast, spatial design, responsiveness, interaction, motion design, and UX writing. (6:18)
  7. UI/UX Pro Max makes Claude do much more thinking — it runs a “design system search,” tells Claude to think about what to do, not just what to do, producing more intentional results. (11:16)
  8. Claude does not always consider accessibility on its own — a clear, extensive guideline list (Vercel’s) makes prioritizing accessibility far more efficient. (16:00)
  9. You don’t need 20 skills — the four core skills cover ~90% of what a real web design project involves. (16:12)
  10. Skills encode judgment about what “good design” looks and feels like — once Claude knows how a real web designer thinks, output stops feeling AI and “starts feeling produced by an actual expert web designer.” (22:27)

Actionable Techniques

  1. Use the / slash command to force a skill — typing / and selecting the skill is “the easiest and fastest way to make sure Claude actually uses the skill you want.” (4:42)
  2. Install skills via GitHub zip → Skills panel → + → Create skill → Upload a skill — then make sure the toggle in the upper right is ON. (4:14)
  3. Edit any skill’s markdown file to customize it — open the drop-down → “Edit with Claude” to change instructions (e.g., force sans-serif), or delete keywords you never want (e.g., remove “glassmorphism”). (5:45, 13:56)
  4. Use Impeccable’s subcommands for targeted fixes — animate to add animations, colorize to add color intelligently, quieter to reduce loudness. (6:44)
  5. Run Impeccable’s audit for a five-dimension technical/accessibility quality check that ranks issue severity. (6:56)
  6. Use Impeccable’s document command to generate a design.md that captures your full design system so any AI agent (including Claude Code) can read it. (7:05)
  7. Use the quieter command to reduce AI-loudness — it runs an audit (gradient text everywhere, heavy font weights, emojis), ranks severity, and explains its fix plan before executing. (8:17)
  8. Study Impeccable’s “slop tab” to learn what design patterns scream AI (e.g., side-tab accent borders, typography patterns) so you can avoid them in manual design too. (9:30)
  9. Be specific with content when using UI/UX Pro Max — the best chance of nice sections is giving Claude exact content so it can “enhance that direction” rather than inventing everything. (11:38)
  10. Ask for a “more drastic redesign” explicitly and tell the skill to use its library of palettes and font pairings to the full advantage — you must communicate how much change you want. (12:21)
  11. Ask Claude to annotate the landing page itself with accessibility issues (via web design guidelines) so you can see visually what’s wrong (outlined in orange with counts) instead of reading a list. (15:22)
  12. Build a custom skill through Claude’s guided conversation — describe your approach (e.g., “always identify the product type first — dashboard, landing page, mobile app”), infer the screen’s goal before designing, default to a restrained neutral palette, one primary body font + one display font. (19:00)
  13. Be thorough when answering Claude’s skill-builder questions (what should it govern, primary audience, spacing/sizing rules, preferred tech output) — it produces a far more detailed skill, plus a references folder (e.g., Tailwind design tokens, typography pairings). (20:04)

Tools & Skills Mentioned

  • Claude Desktop skills — accessed via Customize → Skills; browse Anthropic’s official skills via the + button.
  • Theme Factory (Anthropic official) — pre-packaged themes incl. color palettes and typography systems. (1:47)
  • Canvas Design (Anthropic official) — folder of fonts Claude is instructed to use as it sees fit. (1:58)
  • Brand Guidelines (Anthropic official). (2:10)
  • Web Artifacts Builder (Anthropic official). (2:10)
  • front-end design — Anthropic-developed, most popular skill for designers; embeds anti-slop + design guidance. (2:30)
  • Impeccable — 1 main slash command + 22 subcommands (animate, colorize, audit, document, quieter); features coming incl. live (browser UI iteration) and a “slop tab.” (6:10)
  • UI/UX Pro Max — UI styles, color palettes, font pairings, 8 tech stacks; runs a design-system search + quality/accessibility checklist. (10:00)
  • web design guidelines (Vercel Labs) — audits against Vercel’s long list of web interface guidelines: keyboard navigation, never disable zoom, don’t block paste, button loading indicators, animations, layout, content, forms. (14:15)
  • UI Skills library (for design engineers; includes front-end design, UI/UX Pro Max, Impeccable; plus “fixing accessibility,” “WCAG audit patterns,” shadcn component access, “design taste front-end”). (16:30)
  • Type UI library — visual previews of each skill’s output style (elegant, modern sophisticated, neo-brutalism). (17:37)
  • MCP Market — categories → design tools for many free web-design skills (design systems, design reviewer, web animations). (18:16)
  • “Complete Guide to Building Skills for Claude” — official slide deck on guidelines, principles, and getting the most out of created skills. (22:15)

Quotes Worth Keeping

  • “Instead of explaining your preferences, your design system, your tone, every single time, a skill holds all of that. You write it once, Claude loads it automatically.” (0:36)
  • “It stops being a generic AI designer and starts feeling like a collaborator who knows your actual work.” (1:04)
  • “From the purple gradients to the white background to the soft shadows, nothing about this screams creative. It just screams AI generated.” (3:45)
  • “Never use generic AI-generated aesthetics like overused font families, clichéd color schemes.” (3:09)
  • “Just because a skill comes with a bunch of preset instructions, doesn’t mean you’re locked into them.” (6:03)
  • “You don’t need 20 different skills because these cover 90% of what you’re going to be doing on an actual design project.” (16:12)
  • “It doesn’t just tell Claude what to do, it tells Claude to think about what to do, which ultimately gets you a much more intentional-looking result.” (11:22)
  • “You don’t just need to know which skills are going to be helpful… You also need to understand how to use them by communicating to Claude exactly what you want from it.” (12:43)
  • “Claude is not a super impressive designer by default… skills are one of the ways that you give Claude more guidance and instruction about what good design looks and feels like.” (22:29)
  • “Once Claude knows how a real web designer thinks and works, the output stops feeling like AI and starts feeling produced by an actual expert web designer.” (22:50)

Graph View

Backlinks