06_AILABS_Claude_Design_Skills

9 min read

Overview

AI Labs (a software company) argues that AI models have gotten much better at design but that AI-generated sites all drift toward the same safe, generic “AI slop” because the model always reaches for the most common design choices. The fix is packaging proven prompting workflows into reusable skills. The video walks through Anthropic’s front-end design skill (which forces a real design direction and outs AI-slop patterns in its skill.md), AI Labs’ two-skill design system (functional vs. marketing UI), shadcn + its MCP for professional-grade dashboards, the GSAP skill for smooth animation, taste-preset skills (minimalist, brutalist, premium/luxury), Higgs Field for image/video visuals, and mobile design skills (thumb zone, Material 3, SwiftUI, Expo). The core theme: give the model a decision and a design system before it writes code, and pull from pre-built, professional parts rather than generating from scratch.

Key Insights

  1. AI-generated sites all feel the same — the model learned from a huge dataset full of the same patterns, so on any design call it reaches for the most common one and drifts toward safe, generic choices no matter what the project is. (0:55)
  2. Anthropic’s front-end design skill forces a design direction before the model writes anything — instead of defaulting to the safe common look, the model must pick a direction and stay consistent with it. (1:18)
  3. The skill’s skill.md outs AI slop directly — it names the overused fonts, purple gradients, and white backgrounds the model keeps reaching for, so it stops defaulting to them. (1:35)
  4. Models optimize to be “correct”; this skill pushes them to commit to a point of view — reach for it mainly on landing pages and portfolios where the design itself is part of the product. (1:49)
  5. The Anthropic design skill does NOT work well with functional UI — for real products the problem shifts from “make it look good” to “make components behave properly,” which is where shadcn comes in. (2:46)
  6. shadcn means starting from parts built to ship, not from a rough first draft — instead of the model hand-building every component and configuring animations, it pulls pre-built professional-grade components from the registry, so the result feels like a real product. (3:52)
  7. Shadcn skill + MCP are complementary — the skill (a rulebook loaded only when needed) provides rules, patterns, and project context; the MCP is a live connection to the registry for browsing/pulling real components. The skill isn’t in the context window constantly, unlike MCP. (4:37)
  8. Dashboards have a different core problem than normal apps — it’s less about component consistency and more about how information is arranged on screen (grouping data, how much fits before it clutters), which is what the separate “dashboard” skill focuses on. (5:00)
  9. UI UX Pro Max runs an actual engine before writing code — it fires off five searches at once across its open-source GitHub database, pulls styles from 161 industry categories, and picks a color palette, font pairing, and layout that suit the industry, handing the model a tailored design system. (6:01)
  10. Animation is where AI code falls apart — models almost always do the same scroll-reveal, “the only move it knows,” which is the same animation on half of AI-built sites; it’s also janky because the model moves things by changing size/position, forcing the browser to rebuild the page every frame. (8:11)
  11. Mobile is not a smaller web — models shrink web habits down, but mobile has its own rules (how you hold the phone, thumb reach, navigation), and each platform has its own design language the model usually ignores. (11:25)

Actionable Techniques

  1. Use Anthropic’s front-end design skill as the foundation for landing pages and portfolios — it forces the model to commit to a real design direction and stay consistent instead of drifting into defaults. (0:45)
  2. Inspect and customize a skill’s skill.md file — the skill.md is the skill’s instruction sheet; it’s where patterns like AI-slop fonts and purple gradients are explicitly called out. (1:32)
  3. Keep two separate skills in your design system: one functional, one marketing — use the functional skill for UI people actually use (dashboards) and a marketing skill for landing-page/marketing UI, since the design goals differ completely. (2:12)
  4. Use a “break the default” prompt inside your marketing UI skill — AI Labs runs Anthropic’s front-end design skill (modified) via a prompt literally named “break the default,” and folded in newer-model prompting guides because the original got outdated for newer models. (2:26)
  5. For dashboards, use shadcn’s skill + MCP — pull components from the registry instead of generating them from scratch; the skill (rulebook) + MCP (live registry connection) together give the model the judgment to use components correctly and produce clean output the first time. (4:01)
  6. Add a separate “dashboard” skill for information arrangement — for analytics/dashboard UIs, reason through data grouping and on-screen density first so the result feels like a real analytics tool instead of being cluttered. (5:18)
  7. Use UI UX Pro Max when you want the model to make industry-tuned design decisions — it runs an engine that picks a palette, font pairing, and layout from 161 industry categories and hands the model a tailored design system, instead of treating design as one generic “good.” (6:01)
  8. Use the GSAP skill (from the GSAP team) for animations — it teaches the model the correct patterns (from basic movement to scroll-driven storytelling) and steers it toward browser-friendly motion so animations stay smooth instead of janky. (8:29)
  9. Wire GSAP into your marketing skill — in AI Labs’ design system, the marketing UI skill explicitly states that whenever animations are required, it should use the GSAP skill to implement them on landing pages. (9:21)
  10. Use taste-preset skills one at a time, not stacked — pick the single one matching your vibe: minimalist UI (newspapers/blogs, content breathes), industrial brutalist UI (raw, heavy, anti-corporate), front-end UI/UX (safe all-rounder for product/business), or premium front-end UI (luxury fashion look). (9:33)
  11. Plug in Higgs Field for real image/video visuals — it pipes image/video generation into your agent so you can ask for a hero image or background clip from the terminal instead of the model grabbing mismatched stock images. (10:47)
  12. Use See Dance for video generation — cited as one of the best video generation models right now; pair it with Higgs Field for real visuals rather than gray placeholder boxes. (11:05)
  13. For mobile, apply the “mobile app UI design” principles layer — it bakes in the thumb zone (main buttons within thumb reach), consistent spacing, and a clean limited set of font sizes — the same rules behind Airbnb, Duolingo, and Spotify. (11:49)
  14. Use Material 3 for Android/Pixel — Google’s design system (bold, colorful, rounded, springy); give it one color and it builds a full matching theme and checks how closely your app follows Google’s guidelines. (12:16)
  15. For native iOS, use the SwiftUI skill — it pulls Apple’s own documentation straight out of Xcode on your Mac to use as the rules, producing a native-feeling app matching Apple’s restrained “liquid glass” aesthetic instead of a rough approximation. (12:51)
  16. For cross-platform mobile, use the official Expo skill — build one app that runs on both Android and iOS, covering navigation, styling, and platform features in one place. (13:18)

Tools & Skills Mentioned

  • Anthropic front-end design skill — basis of many other design skills; shapes the design direction of a site; the “break the default” prompt is a modified version of it. (0:45)
  • AI Labs design system — two skills: a functional skill (dashboards / UI people use) and a marketing UI skill; built for newer models (Opus 4.8 and Fable 5 shipped updated prompting guides). (2:12)
  • shadcn — component library with a registry; setup has two parts: the shadcn skill (rulebook, loads only when needed) and the shadcn MCP (live connection to the registry for pulling real components). (3:19)
  • “dashboard” skill — third-party skill (not by shadcn) that focuses the model on arranging information on the dashboard screen. (5:18)
  • UI UX Pro Max — runs an engine first; 5 parallel searches across an open-source GitHub database; 161 industry categories; produces a tailored design system. (5:35)
  • GSAP skill — animation library from the team that builds GSAP; correct motion patterns + browser-friendly performance habits. (8:29)
  • Taste preset skills — minimalist UI, industrial brutalist UI, front-end UI/UX (general all-rounder), premium front-end UI (luxury fashion look). (9:39)
  • Higgs Field — pipes image and video generation into the agent; not tied to one model (covers most good image/video models). (10:47)
  • See Dance — video generation model, cited as one of the best currently. (11:05)
  • mobile app UI design — principles layer covering thumb zone, spacing, limited font sizes. (11:49)
  • Material 3 — Google’s design system for Android/Pixel apps. (12:16)
  • SwiftUI skills — native iOS design using Apple’s documentation from Xcode. (12:51)
  • Expo (official skill) — cross-platform framework for one app on Android and iOS. (13:18)
  • AI Labs Pro — the community where all the skills/workflows/starter packs shown in the video live. (13:41)

Quotes Worth Keeping

  • “So, whenever it has to make a design call, it reaches for the most common one. So, the design keeps drifting toward the same safe, generic choices, no matter what the project actually is.” (1:07)
  • “Instead of defaulting to the safe, common look, it has to pick a direction and stay consistent with it.” (1:28)
  • “You get clean output the first time instead of having to go back and fix the same mistakes over and over.” (4:22)
  • “The answer is that the skill only loads when it’s actually needed instead of being in the context window all the time like MCP does.” (4:43)
  • “You’re not starting from a rough first draft and slowly fixing it up. You’re starting from parts that were already built to ship.” (3:55)
  • “The others give the model better taste, while this one gives it a decision before it starts tuned to the kind of product you’re actually making.” (6:46)
  • “That one scroll reveal is basically the only move it knows. But it’s also the same animation on half the AI-built sites out there and it’s nowhere near what real motion can do.” (8:18)
  • “Mobile isn’t a smaller web. It’s its own thing with its own rules.” (11:31)

Graph View

Backlinks