19_JackRoberts_Design_Genius

5 min read

Overview

Jack Roberts shows three techniques to turn Claude into a design genius and “destroy AI slop.” Level 1 is using a design-inspiration website with 2,000+ real designs (each with an annotated design hierarchy, color palette, typography, design tokens/Tailwind/CSS variables) to feed Claude — either to generate a new site or to run a ruthless comparison between your site and a great one (like Linear) to get a concrete HTML breakdown of what to improve. Level 2 is the design loop skill: provide a benchmark design, and Claude spins up multiple critic sub-agents that iterate around a loop until it hits the mark — outputting usable HTML/CSS (even an email campaign). Level 3 is a local design operating system for Claude Code: a library that indexes every image/video on your computer (searchable by content via a model), lets you create reusable style recipes for consistent branding, and routes image generation across platforms (Higgsfield, KAI, OpenRouter, OpenAI).

Key Insights

  1. “Why is slop so apparent? It stopped but didn’t stop being recognizable.” — the classic tells are typography, imagery, hierarchy, color, spacing. Give Claude the same prompt as everyone else and you get the same results. [1:24]
  2. Level 1 = a 2,000-design inspiration site with structured annotations — each design includes an extended design-hierarchy view, color palette, typography, design tokens, and Tailwind/CSS variables you can “grab and go.” This is what clients would pay a lot of money for. [1:57]
  3. Use the inspiration site to build, not just admire — paste an Apple design architecture prompt into Claude and it builds a gorgeous landing page (generating its own images) from text alone. [3:36]
  4. Level 1 use-case 2 = ruthless site critique — give Claude your site + a great site (Linear), ask it to compare and be ruthless; it returns a beautiful HTML breakdown of gaps (letter-spacing too loose, no elevation ladder, hero art competing with the product), with an interactive slider to see the difference. [5:46]
  5. “Knowing what’s happening is one thing, but being able to articulate it is something else” — great designers know it looks good but can’t explain why; Claude can articulate the small details (corner radius, line height, letter spacing, white space, hierarchy). [5:34]
  6. Level 2 = the design loop — give Claude a benchmark (“design like this”) and it spawns multiple critic sub-agents (e.g. “does it hit the brief?”, “is the design great?”, “visual impact”) that iterate around the loop until the output hits the mark. [9:46]
  7. The design loop outputs usable HTML — e.g. recreate a product-launch email in HTML that looks beautiful when pasted into an email; then send it via a Zapier integration from Claude. [10:25]
  8. Level 3 = a local design operating system for Claude Code — a memory/chat environment where you can pick platforms (Higgsfy, KAI, OpenRouter, OpenAI) and models to generate images, tracking the exact credit cost per generation. [13:33]
  9. The design OS has a searchable local image library — indexed with a (Karuchi-style) model so you can type “burger” and see every burger image on your computer, not just metadata matches; copy any into chat. [15:01]
  10. Create reusable “style recipes” — describe a consistent brand/thumbnail style (“Jack design”), attach example images, and regenerate with tweaks (e.g. “replace with a giant protein shake”) for consistent output. [16:01]

Actionable Techniques

  1. Use an annotated design-inspiration site (2,000+ designs) to feed Claude real design architecture, color palettes, typography, and tokens — don’t rely on Claude’s default aesthetic. [1:57]
  2. Run a ruthless critique of your site vs. a great one — copy the URL of a site you admire (e.g. Linear), paste into Claude with your site, ask for a concise HTML breakdown of the differences and how to improve. [5:46]
  3. Apply the design loop — screenshot a benchmark design, run the “/design loop” skill, let Claude spawn critic sub-agents and iterate until it hits the desired mark; output is usable HTML. [9:46]
  4. Use the generated HTML in email campaigns — have Claude build an HTML product-launch email from a reference, then send it via a Zapier connection. [11:58]
  5. Build a local design OS — index your computer’s images so you can search by content and copy them into chat; tag in different generation services (Higgsfy, OpenAI) and models, seeing per-run credit cost. [13:33]
  6. Save style recipes — define a brand/thumbnail style with example images so you can regenerate with consistent branding and swap individual elements. [16:01]

Tools & Skills Mentioned

  • A large design-inspiration website (~2,000+ annotated designs) — design hierarchy, palettes, typography, Tailwind/CSS tokens. [1:57]
  • The design loop / “gauntlet loop” skill — benchmark-driven, multi-critic-sub-agent iteration. [9:46]
  • Claude Design / Claude Code / Zapier — generation and delivery. [11:58]
  • Higgsfy, KAI, OpenRouter, OpenAI / Nano Banana 2 — image/video generation platforms in the design OS. [13:50, 14:15]
  • Hermes Agent — mentioned as one of the many agents you can connect via Zapier. [12:25]
  • Linear — used as the reference “gorgeous website.” [5:14]

Quotes Worth Keeping

  • “Why is slop so apparent? … It stopped being recognizable. It’s typography, imagery, hierarchy, color, spacing — some classic telltale signs.” [1:24]
  • “If we just give Claude a prompt the same as everybody else, we’re just going to get the same results as everybody else.” [1:46]
  • “Knowing what’s happening is one thing, but being able to articulate it is something else.” [5:34]
  • “We only like our AI ruthless, guys.” [5:59]
  • “Technique is one thing, output is everything.” [10:15]
  • “You can build it and you can connect everything.” [12:55]

Graph View

Backlinks