> Canonical URL: https://codingcat.dev/topic/design # Design Courses, Podcasts & Blog Posts | CodingCat.dev 🛡️ DevOps & Architecture Hub # Design. W3C Design Tokens, Dual-Theme UI Systems, Figma & Component Libraries Explore CodingCat.dev hands-on courses, video lessons, podcast episodes, and technical deep-dive blog posts covering Design: W3C Design Tokens, Dual-Theme UI Systems, Figma & Component Libraries. [Search All Design Content](/search?q=Design)![Design official logo](/logos/tags/design-lockup-light.svg)![Design official logo](/logos/tags/design-lockup-dark.svg)Official Design Brand Lockup (2 Blog Posts · 8 Episodes)✏️ Design Production Architecture Diagram✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]How Design fits into a modern, type-safe full-stack production architecture on CodingCat.dev.AAA Contrast Verified ## Design Courses. [All Courses→](/courses)[![Impeccable: Automated Design Review & Polish for AI UI and Motion](https://cdn.sanity.io/images/hfh83o0w/production/d398e67f5c5ec25fb4da89237f46b9ea7755ec01-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/impeccable-automated-design-critique)November 4, 2026[![](/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) ### [Impeccable: Automated Design Review & Polish for AI UI and Motion](/course/impeccable-automated-design-critique) Stop shipping generic AI slop. Integrate Paul Bakaus's Impeccable design review rules to enforce W3C tokens, typographic hierarchy, and tactile chalkboard aesthetics. [![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. [![The Odin Project 8: Backend APIs (Hono vs. Express), Auth & Getting Hired](https://cdn.sanity.io/images/hfh83o0w/production/0f323960dbbd1ad5c7c96a7be3e70a27c3b628ca-1376x768.png?w=1376&q=82&fit=max&auto=format)](/course/odin-nodejs-backend-and-getting-hired)November 4, 2026[![](/logos/tags/hono-symbol-light.svg)![](/logos/tags/hono-symbol-dark.svg)Hono](/topic/hono)[![](/logos/tags/nodejs-symbol-light.svg)![](/logos/tags/nodejs-symbol-dark.svg)Node.js](/topic/nodejs) ### [The Odin Project 8: Backend APIs (Hono vs. Express), Auth & Getting Hired](/course/odin-nodejs-backend-and-getting-hired) Build end-to-end typed backend APIs with Hono RPC and Zod, implement secure HTTP-only session cookies and OAuth, and master the 2026 engineering portfolio & system design interview. ## Design Blog Posts. Showing 2 of 2 blog postsFiltered: Design[Open Full Topic Hub →](/topic/design)[![Bridge the design to development gap with Builder.io and Firebase Studio: Web Architecture & Implementation Guide](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/e1aa9e03a1135b1afa951bbcefb484d6240de9c3-1200x630.svg?w=1200&q=82&fit=max&auto=format)](/post/firebase-2025-09-firebase-studio-builder-io-design-development)September 30, 2025[![](/logos/firebase/firebase-symbol.png)![](/logos/firebase/firebase-symbol.png)Firebase](/topic/firebase)[![](/logos/tags/google-cloud-symbol-light.svg)![](/logos/tags/google-cloud-symbol-dark.svg)Google Cloud](/topic/google-cloud) ### [Bridge the design to development gap with Builder.io and Firebase Studio: Web Architecture & Implementation Guide](/post/firebase-2025-09-firebase-studio-builder-io-design-development) Alex Patterson's hands-on web engineering breakdown of "Bridge the design to development gap with Builder.io and Firebase Studio" (2025-09-29). Learn how to wire up Firebase, Google Cloud, Web Dev, AI in production web apps. [![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)[![Design Systems with Web Components](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f13e901f6157a042ba6ceb021a00f56788286990-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/post/design-systems-with-web-components)May 25, 2022[![](/logos/tags/html-symbol-light.svg)![](/logos/tags/html-symbol-dark.svg)HTML](/topic/html)[![](/logos/tags/design-symbol-light.svg)![](/logos/tags/design-symbol-dark.svg)Design](/topic/design) ### [Design Systems with Web Components](/post/design-systems-with-web-components) How Stencil can build Web Components for any Design System. This is a developers view into how a design system will work in any size organization. [![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) No matching blog posts found for this filter. Try clearing the filter above to browse the full feed. Loading more blog posts...✓ All blog posts loaded ## Design Podcast Episodes. Showing 8 of 8 episodesFiltered: Design[Open Full Topic Hub →](/topic/design)[![AI for System Design and Architecture Documentation](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/b43bd666d412b682acb84db7ec9971753b1edf24-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/ai-for-system-design-and-architecture-documentation)July 8, 2024[![](/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) ### [AI for System Design and Architecture Documentation](/podcast/ai-for-system-design-and-architecture-documentation) Learn how AI transforms system design and architecture with insights from Multiplayer's CTO. Explore new tools and collaborative features for developers. [![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)[![Thomas Johnson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/78e9507c153e7fdc74e1bcf0aaa7babb97c85e1a-720x720.png?w=96&h=96&q=82&fit=max&auto=format)Thomas Johnson](/guest/thomas-johnson)[![Not a Designer: Design bites for devs](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/91264acdb1751425fa717b1c76958687de9fc8aa-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/not-a-designer-design-bites-for-devs)February 29, 2024[![](/logos/tags/cloudflare-symbol-light.svg)![](/logos/tags/cloudflare-symbol-dark.svg)Cloudflare](/topic/cloudflare)[![](/logos/tags/ai-symbol-light.svg)![](/logos/tags/ai-symbol-dark.svg)AI & Agents](/topic/ai) ### [Not a Designer: Design bites for devs](/podcast/not-a-designer-design-bites-for-devs) In the tech world, developers often find themselves stepping into the realm of design, a space that can feel both unfamiliar and daunting. Recognizing this challenge, Saron Yitbarek has crafted "Not a Designer" Design Bites, a series specifically tailored for developers who find themselves in need of design knowledge. [![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)[![Saron Yitbarek](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/e0b5e691d2184d124fef6481f819fe3cc97d83a8-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Saron Yitbarek](/guest/saron-yitbarek)[![Design Systems: From Atomic Design to a Global Solution](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/e30ed0fae3f33f21034b0235d98ebe493c7e63df-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/4-8-design-systems-brad-frost)February 28, 2024[![](/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) ### [Design Systems: From Atomic Design to a Global Solution](/podcast/4-8-design-systems-brad-frost) Dive into the world of creating and maintaining successful design systems, unpack the layer cake approach, and explore the potential future of a global design system. [![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)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Brad Frost](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/d353da9c34912440bfedbd3b062ec1fdf74f0875-600x600.png?w=96&h=96&q=82&fit=max&auto=format)Brad Frost](/guest/brad-frost)[![Creating a Standardized Design System for the Web](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/96a4d093a6575354e750ebf8b78abaf038d201db-1920x1080.jpg?w=1920&q=82&fit=max&auto=format)](/podcast/2-31-creating-a-standardized-design-system-for-the-web)July 13, 2022[![](/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) ### [Creating a Standardized Design System for the Web](/podcast/2-31-creating-a-standardized-design-system-for-the-web) Greg talks with us about running the OpenUI working group. We talk in detail and give demos on standardizing components across the major browser vendors. [![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)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Greg Whitworth](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/fe2833f4fa8aba77c460f47d47d67dcae6f74edd-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Greg Whitworth](/guest/greg-whitworth)[![Building & Maintaining Design Systems](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/1c30255287eb5e57cef6c748fc2e1c94d1fc77a3-1920x1080.jpg?w=1920&q=82&fit=max&auto=format)](/podcast/2-25-building-maintaining-design-systems)June 1, 2022[![](/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) ### [Building & Maintaining Design Systems](/podcast/2-25-building-maintaining-design-systems) Michael Chan talks all about how to build and maintain Design Systems. Brittney and I have a few ideas of our own too. [![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)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Michael Chan](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/6550c4bb327bfb8707731c726bf6ba54bc2cbb30-400x400.png?w=96&h=96&q=82&fit=max&auto=format)Michael Chan](/guest/michael-chan)[![Building Design Systems with Backlight.dev](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/becef36fbb5ef0cad7e91260cf8e4793ce9bc1bf-1920x1080.jpg?w=1920&q=82&fit=max&auto=format)](/podcast/2-7-building-design-systems-with-backlight-dev)February 16, 2022[![](/logos/tags/design-symbol-light.svg)![](/logos/tags/design-symbol-dark.svg)Design](/topic/design) ### [Building Design Systems with Backlight.dev](/podcast/2-7-building-design-systems-with-backlight-dev) We sit down with m4dz, developer advocate from the
RIOTS team. We talk all about the Backlight.dev design system. [![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)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![m4dz](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/fae142034961e906a3ba51a691ff2288f7fc54bf-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)m4dz](/guest/m4dz)[![Journey of a Freelance Designer & Developer](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/97e9213b6bff5259b7f12fc69908f300fcee99c5-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/1-30-journey-of-a-freelance-designer-developer)July 21, 2021[![](/logos/tags/design-symbol-light.svg)![](/logos/tags/design-symbol-dark.svg)Design](/topic/design) ### [Journey of a Freelance Designer & Developer](/podcast/1-30-journey-of-a-freelance-designer-developer) In this episode we sit down with Amy Dutton and to talk about freelancing and what it takes to be a designer and developer. We also talk about working for Zeal and making her awesome channel Self Teach Me. [![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)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Amy Dutton](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/822995112c621b246fe5bf7e2ced9b04690bfa19-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Amy Dutton](/guest/amy-dutton)[![Design for Developers](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/45451c7f5f930a090d6b0e76538ef138987174e1-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/1-8-design-for-developers)January 1, 2021[![](/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) ### [Design for Developers](/podcast/1-8-design-for-developers) Are you struggling to become a designer for web development? You don''t need formal web development training to be successful. Learn from the design group at OST how each of them found a path into design, coming from several different backgrounds. [![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)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Christy Ennis-Kloote](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/1e9e44f1065c00f43cc8a55c30df00590c5a69a3-399x399.jpg?w=96&h=96&q=82&fit=max&auto=format)Christy Ennis-Kloote](/guest/christy-ennis-kloote)[![Zoë Wilson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/35a3ce2a02dfebf2e6812f35c32698496f4ce242-573x573.jpg?w=96&h=96&q=82&fit=max&auto=format)Zoë Wilson](/guest/zoe-wilson)[![Elizabeth Bush](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/7a9da2e49f138e15c8ecd6baad9b25c0ba03656c-391x391.jpg?w=96&h=96&q=82&fit=max&auto=format)Elizabeth Bush](/guest/elizabeth-bush) No matching episodes found for this filter. Try clearing the filter above to browse the full feed. Loading more episodes...✓ All episodes loaded