Video summary

Turn Claude Into A Design GENIUS In 3 Simple Steps

Main summary

Key takeaways

Technology

Tech/Design Concept: Beating “AI slop” with human taste in AI web design

The video argues that AI tools (e.g., Claude Code) often produce generic, repetitive UI patterns—sometimes recognizable by things like stock gradients, default fonts, and template-like styling. This “AI slop” can be reduced by injecting human taste and running a repeatable workflow to generate web pages that look intentional and uniquely “you.”

The 3-Step Workflow

Step 1 — Cultivate taste via a curated inspiration library

Core idea: AI has no taste. Instead of asking for “a landing page,” you give AI taste signals using examples you genuinely like.

How to build the library:

  • Collect screenshots/links from:
    • Dribbble (e.g., search “web design,” sort by popular)
    • Pinterest (search “web design”)
    • Twitter/X (follow designers doing UI work not easily found elsewhere)
  • Organize screenshots by:
    • Design type
    • The design’s vocabulary/keywords
  • For each reference, include notes so you can later copy:
    • an image prompt and/or brief
  • Optionally:
    • Save references to a folder, or
    • Have Claude Code generate a simple web app to organize them.

Emphasis: don’t brainstorm from nothing—use real references that reflect your preferences.

Step 2 — Improve outputs with external tools/skills (and MCPs) for Claude

Core idea: Claude Code can be helpful, but additional tools can detect slop, improve component quality, and generate assets.

Recommended tools/skills

  1. Impeccable (impeccable.style)

    • Open-source; reported ~50k GitHub stars and integration into GitHub AI tooling (per subtitles)
    • Offers 23 commands to critique and refine designs (e.g., “bolder,” “clarify,” “overdrive”)
    • Aims to remove AI slop across 7 areas:
      • Typography, color, spatial design, responsiveness, interaction, motion, and UX writing
    • Mentions a “slop” breakdown (46 patterns)
    • Includes a dev server / live mode to inspect improvements component-by-component
    • Runs via CLI installation

  2. Taste Skill (experimental v2)

    • Reported ~66k GitHub stars (per subtitles)
    • Also targets AI slop reduction—stronger layout, typography, motion, and spacing
    • Framed as more flexible than overly prescriptive tools, though it still relies on prompting/taste injection

  3. Higgs Field MCP (higgsfield.ai)

    • Used as an MCP to add capabilities Claude doesn’t have by default
    • Provides access to image and video generation
    • Requires CLI install + authentication
    • Example generators mentioned:
      • Images: “GPT images two”
      • Video: “SeaDance” (availability changes “every few weeks,” per subtitles)
    • Used for hero imagery and other custom assets

  4. 21st.dev (component inspiration)

    • A component library for specific UI elements (buttons, cards, pricing sections, borders/backgrounds, pagination variants, etc.)
    • Lets you copy prompts and feed them into Claude Code to generate targeted components

Warning / guidance

  • Don’t get stuck in tool rabbit holes expecting one tool to solve everything.
  • Some tools are narrow or overly prescriptive and may only output one “look”—flexibility matters.

Step 3 — Build + iterate with a wide net (not one-shot prompting)

Core idea: Instead of “one prompt → perfect design,” do this:

  1. generate multiple style directions
  2. pick one
  3. iterate down to components/typography/assets
  4. keep tweaking until it feels right

Prompting strategy (use four inputs)

Rather than a huge prescriptive design.md prompt, the video recommends four prompt inputs:

  1. Aesthetic (design family)
  2. Reference image(s)/URLs (from your taste library; match feel, not content)
  3. Intent (what it’s for + audience + goal, e.g., “book a demo”)
  4. Guardrails (explicit “never do” items, e.g. “no purple gradients,” “no Inter font”)

Iteration strategy (build sequence)

  • First pass: cast a wide net
    • Example: generate five landing page versions in five distinct styles
    • Optionally refine with different tools:
      • e.g., Impeccable vs Taste Skill for different outputs
  • Second pass: narrow the choice
    • After picking one style (e.g., “PrintTech”), generate three variations within that style
  • Third pass: focus on key assets first
    • Pick a hero image direction
    • Use Higgs Field MCP to generate multiple hero/background options
      • e.g., 4 designs, 2K quality
    • Evaluate “hero → body” transitions to ensure they feel premium, not abrupt
  • Then: tweak further with an interactive “tweak bar”
    • The video references a “Claude design”-style workflow and generating a dev-server tweak UI
    • Adjust:
      • font type/size, accent colors, motion, reveal distance, hero assets, etc.
  • Continue iterating using references
    • Feed Claude screenshots and/or actual website URLs for body layout formatting

Example scenarios from the demo

  • Argus: a fake AI company landing page used to demonstrate multi-style generation.
  • Kestrel: an AI analytics platform landing page with intent to book a demo.
  • Guardrails were used to avoid “AI slop” (e.g., avoiding purple gradients, Inter font, and common slop tropes).
  • The process ended by selecting a minimal style direction described as “vast quiet” / “ledger,” then refining:
    • hero imagery (including color accents like “alpenglow”)
    • transitions and styling via the tweak bar.

Main speakers / sources (as inferred from subtitles)

  • Speaker/author: Not explicitly named in the subtitles. The outro references “Chase AI Plus” and a “Claude code masterclass,” suggesting the speaker may be affiliated with Chase AI Plus.
  • Product/tools referenced:
    • Claude Code (Anthropic)
    • Impeccable (impeccable.style)
    • Taste Skill (GitHub; experimental v2)
    • Higgs Field MCP (higgsfield.ai)
    • 21st.dev
    • Inspiration sites: Dribbble, Pinterest, Twitter/X

Original video