> Canonical URL: https://codingcat.dev/course/impeccable-automated-design-critique # Impeccable: Automated Design Review & Polish for AI UI and Motion | CodingCat.dev Course ๐Ÿงถ CodingCat.dev Course5 Lessons[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai)[![](/logos/tags/design-symbol-light.svg)![](/logos/tags/design-symbol-dark.svg)Design](/topic/design)[![](/logos/tags/web-technologies-symbol-light.svg)![](/logos/tags/web-technologies-symbol-dark.svg)Web Standards](/topic/web-technologies)[โ–ถ Watch Course Playlist on YouTube โ†—](https://www.youtube.com/@codingcatdev/playlists?sub_confirmation=1)[Start Course โ†’](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-1-slop-trap) # Impeccable: Automated Design Review & Polish for AI UI and Motion ![CodingCat.dev tutorial cover image](https://cdn.sanity.io/images/hfh83o0w/production/d398e67f5c5ec25fb4da89237f46b9ea7755ec01-1376x768.png?w=1376&q=82&fit=max&auto=format)[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson) ## Course Architecture Overview Stop shipping generic AI slop. Integrate Paul Bakaus's Impeccable design review rules to enforce W3C tokens, typographic hierarchy, and tactile chalkboard aesthetics. > Primary Open-Source Repository: github.com/pbakaus/impeccable ## course lessons. 1 ### Core Architecture & Deterministic Implementation - [1.1Lesson 1: Why Default LLM Prompts Produce Centered Gradient Slop ('Brief Contagion')Welcome to Lesson 1 of Impeccable: Automated Design Review & Polish for AI UI and Motion on CodingCat.dev. Today we break down Why Default LLM Prompts Produce Centered Gradient Slop ('Brief Contagion') and see how it powers our deterministic 3D AJ and code-rendered video pipeline.![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents![](/logos/tags/design-symbol-light.svg)![](/logos/tags/design-symbol-dark.svg)Design![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Video๐Ÿ“– Written LessonStart Lesson โ†’](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-1-slop-trap) - [1.2Lesson 2: Installing `pbakaus/impeccable` & Wiring Design Gates into `CLAUDE.md`Welcome to Lesson 2 of Impeccable: Automated Design Review & Polish for AI UI and Motion on CodingCat.dev. Today we break down Installing `pbakaus/impeccable` & Wiring Design Gates into `CLAUDE.md` and see how it powers our deterministic 3D AJ and code-rendered video pipeline.![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents![](/logos/tags/anthropic-symbol-light.svg)![](/logos/tags/anthropic-symbol-dark.svg)Anthropic![](/logos/tags/design-symbol-light.svg)![](/logos/tags/design-symbol-dark.svg)Design+1๐Ÿ“– Written LessonStart Lesson โ†’](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-2-impeccable) - [1.3Lesson 3: Enforcing One Display Face, One UI Face, and W3C Color Contrast TokensWelcome to Lesson 3 of Impeccable: Automated Design Review & Polish for AI UI and Motion on CodingCat.dev. Today we break down Enforcing One Display Face, One UI Face, and W3C Color Contrast Tokens and see how it powers our deterministic 3D AJ and code-rendered video pipeline.![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents![](/logos/tags/design-symbol-light.svg)![](/logos/tags/design-symbol-dark.svg)Design![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Video+1๐Ÿ“– Written LessonStart Lesson โ†’](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-3-type-scale) - [1.4Lesson 4: Spring Hierarchy: Snappy Micro-UI vs. Gliding Camera vs. Bouncy MascotWelcome to Lesson 4 of Impeccable: Automated Design Review & Polish for AI UI and Motion on CodingCat.dev. Today we break down Spring Hierarchy: Snappy Micro-UI vs. Gliding Camera vs. Bouncy Mascot and see how it powers our deterministic 3D AJ and code-rendered video pipeline.![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents![](/logos/tags/design-symbol-light.svg)![](/logos/tags/design-symbol-dark.svg)Design![](/logos/tags/video-symbol-light.svg)![](/logos/tags/video-symbol-dark.svg)Video๐Ÿ“– Written LessonStart Lesson โ†’](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-4-spring-tiers) - [1.5Lesson 5: Automated Pre-Export Polish Passes on Storyboards & Contact SheetsWelcome to Lesson 5 of Impeccable: Automated Design Review & Polish for AI UI and Motion on CodingCat.dev. Today we break down Automated Pre-Export Polish Passes on Storyboards & Contact Sheets and see how it powers our deterministic 3D AJ and code-rendered video pipeline.![](/logos/tags/react-native-symbol-light.svg)![](/logos/tags/react-native-symbol-dark.svg)React Native![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents![](/logos/tags/design-symbol-light.svg)![](/logos/tags/design-symbol-dark.svg)Design+1๐Ÿ“– Written LessonStart Lesson โ†’](/course/impeccable-automated-design-critique/lesson/impeccable-automated-design-critique-lesson-5-polish-gate) โœ๏ธ Visual Architecture Diagram ## how this course connects together. Follow AJ from first principles to production-ready architecture. Letโ€™s build it!โœ๏ธ Visual Diagram: Impeccable: Automated Design Review & Polish forโ€ฆโœ“ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Impeccable: Automated Design Review & Polish for AI UI and Motion: start with Core Architecture & Deterministic Implementation, implement Hands-On Implementation, and ship to production.AAA Contrast Verified ## related deep dives. [View All→](/blog)[![Flagship 3: Deterministic HTML Motion & Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP](https://cdn.sanity.io/images/hfh83o0w/production/b155eb490d8cc1576c7332ce9294f612cbc917aa-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/deterministic-html-motion-hyperframes-gsap-devtools-mcp)November 4, 2026[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai) ### [Flagship 3: Deterministic HTML Motion & Critique with HyperFrames, GSAP, Impeccable & Chrome DevTools MCP](/course/deterministic-html-motion-hyperframes-gsap-devtools-mcp) Build framework-agnostic HTML-to-video pipelines for AI agents. Combine HyperFrames, paused GSAP timelines, Impeccable design linting, and Chrome DevTools MCP self-healing visual inspection. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Alex Patterson and AJ the Cat presenting the Dual-Plane Agent-Ready Web Stack with WebMCP and Streamable HTTP MCP](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/dd8b89a42ee37457891b58d39c6273a31ac013e4-1376x768.jpg?w=1376&q=82&fit=max&auto=format)](/post/agent-ready-web-architecture-webmcp-streamable-mcp-llms-txt)September 22, 2026[![](/logos/tags/cloudflare-symbol-light.svg)![](/logos/tags/cloudflare-symbol-dark.svg)Cloudflare](/topic/cloudflare)[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html) ### [Architecting the Agent-Ready Web: Combining Client-Side WebMCP, Streamable HTTP MCP, and RFC 9727 Discovery](/post/agent-ready-web-architecture-webmcp-streamable-mcp-llms-txt) A complete walkthrough of CodingCat.dev's dual-plane Agent-Ready Web Architecture: pairing client-side W3C WebMCP tools (document.modelContext and declarative HTML forms) with edge Streamable HTTP MCP endpoints, RFC 9727 API catalogs, and Markdown content negotiation. [![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)