Design & Frontend
The craft of building beautiful, functional interfaces. Design systems at scale, component architecture, motion, and the intersection of design tools and code.
Using CSS Style Queries for Conditional Theming
CSS style queries allow components to adapt their appearance based on parent-defined custom properties, enabling cleaner, conditional theming without relying on manual modifier classes or JavaScript.
Kevin PowellEvaluating Figma AI Agents: Practical Utility and Limitations
Figma AI agents currently excel at generating mobile flows rather than desktop screens, but they struggle to consistently apply local design system variables and styles unless full component libraries are connected.
Brett Williams on Building Gather: A Designer's Journey
Visual designer Brett Williams shares how he moved from Figma-only workflows to building a production-ready Mac app using AI, proving that design taste and clear communication are more critical than traditional coding skills.
Dive ClubDesigning and Building with AI: A Designer’s Frontend Workflow
A practical look at how designers can own the frontend by using AI agents as a force multiplier, leveraging tools like Conductor and Paper to bridge the gap between visual exploration and production-ready code.
Dive ClubSmart Layout Patterns with Modern CSS
Modern CSS container queries and style queries offer a more robust, component-aware alternative to traditional media queries, enabling truly intrinsic and responsive layouts that adapt to their parent containers rather than just the viewport.
Smashing MagazineFixing AI Design Drift with Code-Based Design Systems
AI agents often reinvent UI components in every session, leading to inconsistent 'design drift.' The solution is to move design systems out of static mockups and directly into your codebase as a single source of truth that agents are instructed to reference.
Brian CaselThree Essential CSS Layout Primitives
Kevin Powell shares three reusable CSS patterns—Stack, Prose, and Pile—that simplify layout management by using flexbox and grid primitives with customizable spacing variables.
Kevin PowellBeyond Static Components: The Future of Generative UI
Current agent UIs rely on static components, but LLMs are now capable of generating high-fidelity, accessible frontend code on the fly. The future lies in sandboxed, collaborative generative interfaces delivered via protocols like MCP.
Design Engineering in the Age of AI: Lessons from Anthropic & Ramp
AI is shifting the role of designers from pixel-pushers to systems-thinkers. The most effective teams are those where designers have direct access to production codebases and leadership actively uses AI tools to maintain intuition for their product's capabilities.
Dive ClubAccelerating Design Workflows with ChatGPT and Codeex
Designers can significantly speed up ideation and prototyping by using ChatGPT for visual inspiration and Codeex for efficient, token-saving code generation that integrates with design systems.
UI CollectiveAndy Madrick: Owning the Last Mile of Design in the AI Era
Designers should stop treating Figma as the ultimate source of truth and start owning the final 10-20% of frontend polish in code, using AI to bridge the gap between design intent and production reality.
Dive ClubBeyond Chat: Building Agentic Interfaces as Infinite Canvases
Chat is the terminal of the agent era. To build truly usable AI software, developers should use MCP apps to render rich, interactive UI directly within agent interfaces, treating the web as an infinite canvas rather than a document reader.
AI EngineerModern Web UI: New CSS and Browser Primitives
The web platform is evolving to support high-quality, native-feeling experiences through new CSS functions like contrast-color(), element-scoped view transitions, and improved accessibility primitives.
Chrome for DevelopersBuilding Interactive UIs with the HTML-in-Canvas API
The HTML-in-Canvas API allows developers to render DOM elements directly into Canvas, WebGL, or WebGPU textures while maintaining full browser accessibility, interactivity, and integration features.
Chrome for DevelopersVibe Design: Building Web UIs with CSS and AI Agents
Vibe Design is a workflow that collapses design and development by using CSS vocabulary as a shared language for AI agents to generate production-ready, performant UI components.
Fixing Iframe Transparency Issues on Dark-Mode Sites
Chrome extension iframes often render a white background on dark-mode sites because the browser defaults to a light color-scheme. Setting 'color-scheme: light dark' or 'only light' on the iframe's root element forces the browser to respect your intended transparency.
5 Underrated CSS Properties for Better UI Control
Improve your CSS layouts and typography with these five practical properties: counters for auto-numbering, user-select for interaction control, tabular-nums for data alignment, multi-column for responsive text, and advanced text-decoration styling.
Figma Launches AI Agent for Collaborative Design
Figma has introduced an AI agent within its collaborative canvas that uses natural language prompts to generate designs, iterate on concepts, and automate tedious tasks.
The Future of Design: From Crafting Pixels to Building Systems
Designers are evolving into 'brand engineers' who build internal tools and context-rich AI workflows, shifting from manual pixel-pushing to directing probabilistic systems.
Dive ClubSolving Element Anchoring with the CSS Anchor Positioning API
The CSS Anchor Positioning API provides a robust, native way to tether elements like tooltips to dynamic anchors, replacing fragile absolute positioning hacks that break when elements resize or move.
Smashing MagazineBulletproof CSS Color Systems with contrast-color()
Use contrast-color() to auto-pick white or black text for any background, combined with private custom properties for fallbacks and color-mix() for dynamic hovers that adapt to light/dark modes.
Kevin PowellAI Mockups Free Teams for System-Level Design
AI enables anyone to generate mockups in minutes, shifting focus from pixel layouts to crucial discussions on data structures, feature relationships, and user mental models for product coherency.
Dessn: Design Prototypes in Live Cloud Codebases
Dessn runs existing codebases in the cloud with zero setup, letting designers prompt AI iterations directly in production for seamless dev handoffs—raised $6M to prioritize design as code commoditizes.
Shopify Shop's Big Design Bets: Vision, AI, Craft
Katarina Batina explains how Shopify's Shop app thrives by prioritizing bold visions like low-density feeds and AI prototypes over strict metrics, fostering delight through cross-functional craft sprints.
Stitch: Google's Free AI for Stunning UIs, No Design Needed
Google Labs' Stitch generates responsive, production-ready UIs from natural language prompts, exports HTML/Tailwind CSS, and integrates with agents like Gemini CLI—perfect for backend devs prototyping fast.
Google Cloud TechMobbin MCP Links 600k UI Screens to Claude/Codex for Pro Designs
Connect Mobbin's 600k app screens to Claude Code or Codex via MCP to generate realistic banking dashboards, competitive reports from 25+ apps, and client-ready mood boards in 5-10 minutes instead of 4 hours.
CSS Experts Google Basics, New Features Eat JS's Lunch
Even CSS pros look up list-style-type and view transition pseudo-elements; declarative CSS like anchor positioning and scroll-driven animations handles states JS once owned, reducing code and complexity.
CSS In-N-Out: Animating display:none with 3-2-1 Pattern
Pure CSS animations for elements entering/exiting DOM (e.g., dialogues from display:none) use transition-behavior: allow-discrete, @starting-style, and 3-2-1 source order: out styles first, then open, then in styles last.
4 UX Lessons from Qwen's AI Agent Study
Support agent discoverability with redundant entry points, mirror familiar UIs, handle data access transparently, and ensure pricing transparency to build trust and reduce abandonment.
UX Writing Rules: 6th-Grade Level, Literal Headings, No Learn More
Target 6th-8th grade readability since users read only 20-28% of pages; use literal headings, spell out acronyms every time, descriptive links, and edit AI drafts heavily for user context and brand voice.
Showing 30 of 131