Design & Frontend
The craft of building beautiful, functional interfaces. Design systems at scale, component architecture, motion, and the intersection of design tools and code.
This pillar is for design engineers and the technical designers who blur into them. Coverage spans typography, color systems, accessibility, motion, and the architectural choices that make a product feel considered: token systems, primitive components, layout primitives, the right level of abstraction for a CSS-in-JS or Tailwind setup, and how design and code stay in sync past the first six months.
Recurring threads: design systems built with restraint rather than option overload; the boundary between design tool and codebase, including Figma plugins, Penpot exports, and round-trip workflows; the recent revival of CSS as a serious layout and animation surface; component patterns in React, Vue, Svelte, and the framework-agnostic primitives that survive a rewrite; the new AI tools entering the design loop and whether they help or hurt craft.
Expect summaries of long-form essays from Stratechery-adjacent writers and small-but-deep blogs, plus video walkthroughs from practitioners shipping at scale. Pair with Developer Productivity for the toolchain decisions and Product Strategy for the framing.
Filed under Design & Frontend
Artful Expression in Enterprise Design at ElevenLabs
Nev Flynn, Head of Design at ElevenLabs, explains how integrating specialist roles like WebGL experts and sound designers allows the company to maintain a creative, artful edge even as they scale into enterprise markets.
Designing in the Age of AI and Agents
Product design is shifting from static mockups to dynamic, agent-driven prototypes. Success in 2026 requires embracing AI-assisted workflows, multi-tasking, and a 'publicly curious' mindset to navigate rapid industry cha…
Scaling Design Operations with AI Agents
By treating design systems as strict foundations and using AI agents to automate repetitive tasks like data-driven asset generation and visual QA, a single designer can manage thousands of deliverables for large-scale ev…
Steering AI Design with Adjectives and Verbs
Design cannot be 'oneshotted' by AI because it requires context and taste. Instead of full automation, use a vocabulary of design-specific adjectives and verbs to steer AI agents toward intentional, high-quality outcomes…
Moving From AI Questions to AI Answers
Most AI interfaces force users to initiate with a question, creating a barrier to entry. Instead, provide immediate value by starting with an answer, which improves capability awareness and reduces user friction.
Engineering Brand Universes in the Age of AI
Building a brand today requires moving beyond static assets to creating dynamic, interactive 'universes' where AI-driven workflows and real-time interface generation redefine how we build and ship products.
Building Iconic Brands and Tools: A Conversation with Evil Rabbit
Evil Rabbit, founding designer at Vercel, shares his journey from a 12-year-old web designer in Argentina to shaping Vercel’s brand identity, emphasizing the power of minimalism, consistency, and building tools that empo…
Architecting Intent-Driven UX: Moving Beyond Static Interfaces
To build reliable generative UI, move away from letting LLMs generate raw markup. Instead, use an orchestrator that maps user intent to a predefined, schema-compliant component catalog, ensuring the output remains consis…
AI Design Patterns and the Rise of the Creative Technologist
The hosts explore how AI is shifting design workflows, emphasizing that the most effective AI tools are not fully automated but rather augment human decision-making and creative craft.
Rethinking UI Through Small-Scale AI Integration
Software is shifting from rigid, deterministic interfaces to adaptive, human-centric experiences by embedding small, fast, and inexpensive AI models directly into common workflows.
Designing Grok Bot: A Journey of Iteration and Agent UX
John Bai, an early designer at Cursor, shares the iterative process behind Grok Bot, explaining why the team ultimately settled on a chat-based interface despite initial explorations into ambient, OS-native UI patterns.
Building a Custom AI-Powered Prototyping Playground
Patrick Morgan built a custom, agent-native prototyping environment for Sublime Security that bridges the gap between static design tools and production code, enabling rapid, interactive iteration without the overhead of…
Evolving Design Workflows with AI-Driven HTML Artifacts
Designers are shifting from static tools to autonomous HTML-based workflows, using AI agents to generate, audit, and iterate on functional prototypes, motion, and UX copy in real-time.
Nate Parrott on Building Claude Design
Nate Parrott explains how Claude Design evolved from a personal side project into a powerful tool for rapid prototyping, enabling designers to build custom, interactive interfaces at the speed of thought.
Charlie Deets on Designing for Utility and Experience
Charlie Deets, designer of Safari and Dia, argues that in an era where execution is commoditized, a designer's true value lies in simplifying complex systems, maintaining clear personal design principles, and focusing on…
Pablo Stanley on Orchestration, AI, and Creative Agency
Designer Pablo Stanley explores the shift from hands-on creation to AI orchestration, arguing that while AI tools are powerful, designers must avoid delegating their critical thinking to maintain creative agency.
Architecting High-Performance Data Visualization Apps
To build performant data visualization apps in 2026, prioritize a lean stack using Preact, Valkey for caching, and WebAssembly for heavy computation to handle 100k+ data points efficiently.
Building Practical Figma Plugins with AI Agents
Avoid cluttering your workspace with redundant plugins. Instead, use AI agents to build custom tools that solve specific, repetitive manual tasks, following a structured prompt formula to ensure utility and maintainabili…
Loredana Crisan on Figma, AI, and the Future of Design Craft
Figma's CDO Loredana Crisan argues that AI is a tool for expression, not a replacement for human intent. The future of design lies in building systems and mini-apps that allow designers to maintain precision and soul in …
Figma Updates: Code Layers, Motion, and AI Agent Workflows
Figma is blurring the lines between design and engineering by introducing native code layers, built-in motion/shader support, and AI-driven agent workflows that connect to external tools like GitHub and Notion.
Exploring CSS Functions and Conditional Logic
CSS is evolving to support custom functions and conditional logic, allowing developers to create reusable, dynamic styles that reduce boilerplate and improve developer experience.
Building Scroll-Driven AI Animations for Web
Create high-end, scroll-triggered interactive web experiences by combining AI-generated video assets with frame-by-frame control in Claude 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.
Evaluating 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 sk…
Designing 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.
Smart 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 t…
Fixing 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 th…
Three 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.
Beyond 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 prot…
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…
Accelerating 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.
Andy 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.
Beyond 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…
Modern 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.
Building 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.
Vibe 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…
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 advan…
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.
Solving 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.
Bulletproof 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.
AI 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.
Mobbin 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…
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.
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.
Data-Centric Design Rules for Complex Apps
Center interaction design on data landscapes: learn Python and users' jobs, let data structure UIs, strip chrome, design empty states, and bridge mental/data models to align interfaces with real-world tasks.
DESIGN.md Makes AI UIs Consistent and On-Brand
Use DESIGN.md, a markdown file with colors, fonts, spacing rules, and intent explanations, to guide AI tools like Cursor and v0 toward generating clean, brand-specific interfaces without repetitive prompts.
Agentic Design Systems: Figma to Claude Code Metadata
Structure Figma components with props, relationships, tokens, and anti-patterns as queryable metadata using Claude Code + Figma MCP, enabling AI agents to generate accurate Storybook components without hallucinations.
9 Free Tools to Pro-Up AI Vibe Designs
Escape AI-generated UI blandness with 9 free tools: Open Design for styled prompts, Refero Styles' 2,000+ systems, Impeccable Style's 23 commands, and drop-in libraries like Cult UI and Untitled UI.
9 Sections to Fix AI UI Inconsistency with DESIGN.md
AI agents build functional code but incoherent UIs; Google's DESIGN.md spec uses 9 markdown sections to enforce design system consistency across pages.
Agile Demands Designing Small Value-Delivering Slices
Designers trained for holistic systems struggle in agile to create minimal, standalone features that deliver immediate user value and enable fast learning loops.
Motion.dev: GPU Animations with Springs and Independent Transforms
Motion.dev uses a hybrid engine blending WAAPI's GPU performance with JS capabilities for springs, sequencing, and SVG support, via a 2.3KB animate function in JS/React/Vue.
Design.md: AI's Blueprint for Consistent Custom Design
Google's Design.md files capture typography, colors, and effects as portable 'design DNA'—attach to prompts to eliminate drift and create unique outputs across web, slides, motion, and apps using AI agents.
TSRX Enables Native JS Flow in UI Components
TSRX compiles linear JS code with ifs, for-of loops, try-catch into JSX for React, Solid, Vue, Preact, Ripple—boosting readability via statement-based rendering without returns, while hoisting hooks and adding scoped sty…
GSAP Drives WebGL Shaders via Single Progress Uniform
Bridge GSAP timelines to WebGL shaders using one progress uniform (0-1) for stateless, reusable animations: control block reveals, warps, and aberrations in video carousels, flowmaps, and text scrambles without GLSL chan…
Recreate CSS Battles 251-253 in 15min with Divs, Shadows, Borders
Kevin Powell solves CSS Battles 251-253 live under time pressure: stacked divs/pseudos (5:40, 100%), ring shadows (4:16, 99.9%), rotated border diamond + cap circles. Measure precisely, center with margin-inline:auto, us…
Skeuomorphic Framer Sites Differentiate AI Landing Pages
Build visually bold, skeuomorphic landing pages in Framer to stand out from minimalist competitors: mirror product textures/shadows, embed shaders/Rive animations, and reuse assets for fast iteration and product-like fee…
Rafa Conde: Delight Through Surprise and Humanity
Design engineer Rafa Conde reveals how to craft memorable software via surprise moments, video storytelling, humor, and calculated risks—balancing delight against drop-offs, as seen in Retro's onboarding and his side pro…
Elevate Utility Tools with Emotional UX Design
Utility maintenance software must use human language, show progress, and celebrate completion to turn chores into positive experiences, matching Dyson/Method's physical product transformation.
Open Design: Free Open-Source Claude Design Clone
Open Design replicates Claude Design's AI-powered UI generation locally for free, using any model or CLI agent, with 31 skills and 72 design systems for production-ready landing pages, decks, and prototypes.
Consent Fatigue Drives Blind Compliance in UX
Repetitive consent prompts cause decision fatigue, habituation, and learned helplessness, turning informed choice into automatic 'Accept All' clicks—fix by using plain language, balanced reject options, contextual trigge…
Claude + Code-to-Design API Builds Editable Figma Files
Feed Claude screenshots, code, or prompts via Code-to-Design API to generate native Figma designs—clipboard for quick pastes, plugins for programmatic publishing—accelerating design iteration from research to localizatio…
Use Range Syntax to Fix Media Query Overlap Bugs
Replace min/max-width media queries with range syntax like (width <= 300px) to prevent elements from both hiding at shared breakpoints, improving readability and avoiding offset hacks.
AI Design Workflow: Claude, Codex, Stitch + Figma Stack
AI accelerates design from ideation to production UI via a multi-tool workflow—Claude for accurate code, Codex for token efficiency, Stitch for quick mobile layouts, Figma for refinements—not a single dream tool.
Impeccable's Workflow Makes AI Sites Look Custom, Not Generic
Impeccable equips AI like Claude with design expertise via teach-shape-craft-iterate commands, spotting 37 anti-patterns to avoid generic gradients and safe typography, building a full Astro/Tailwind landing page in 5 mi…
Open Design: GUI Claude Design Clone Without Usage Limits
Open Design replicates Claude Design's graphical interface for AI-generated prototypes and slide decks, built on Huashu Design, integrates with any LLM CLI like Claude Code to bypass Anthropic usage restrictions, and inc…
Claude Design Masterclass: Brand to Deploy in 2 Hours
Use Claude Design to build consistent design systems, pitch decks, websites, app prototypes, and videos for a full brand—while managing session limits for pro output.
CSS Grid: Scrollers, Auto-Grids, Adaptive Layouts
Build horizontal scrollers with grid-auto-flow: column + snap; prevent auto-grid overflow via minmax(min(300px, 100%), 1fr); adapt sidebars using container queries at 500px width.
Open Design: Local AI UI via Existing Coding Agents
Open Design runs locally, plugs into your Claude Code or Codex CLI setup, and uses 19 skills + 71 design systems to generate structured prototypes, dashboards, and decks without new subscriptions.
Impeccable Workflow: Words → Pictures → Code for Unique AI Sites
Impeccable in Claude Code uses teach-shape-visualize-craft to build branded landing pages with GPT Image 2 visuals, avoiding generic AI designs by prioritizing design before code.
Master DESIGN.md for AI Design Workflows
Google's DESIGN.md standardizes portable design systems for AI tools like Claude Design and Code, enabling inspiration-to-production landing pages without prompt drift or rebuilding.
Polly D’Arcy: IC to VP via Dogfooding, Spikes, and AI
Polly D’Arcy rose from IC to VP of Design at Wealthsimple by enforcing dogfooding, defining quality layers, hiring specialists with unique 'spikes,' and using AI to amplify craft—proving leadership bets on potential pay …
AI Excels at Complex Design Components, Not Basics
AI tools like Claude Design take 9-11 minutes per simple button or menu, burning tokens inefficiently. Build basics and tokens manually first, then use AI for complex modals/cards that ship to production design systems.
Claude Design: Animate UI into Promo Videos Instantly
Claude Design's animated video skill turns static app UI—AI-generated or Figma-imported—into 15-32s interactive HTML demos for social/stakeholders, bypassing manual animation (screen-record for MP4).
Penpot Fixes Dev Handoffs with Real CSS Output
Penpot builds designs on actual CSS, Flexbox, Grid, SVG, and HTML, so devs inspect and copy clean code directly—no Figma translation needed, cutting handoff friction dramatically.
Creating Taste: Brandon Jacoby on AI-Amplified Design
Top designers create taste by knowing when to break patterns and invent new ones; AI amplifies those who build custom tools and decide ruthlessly, enabling indie practices to push founders past 'good enough.'
Claude Design: AI Tool That Bridges Design-Dev Gaps
Theo tests Anthropic's Claude Design, an AI for generating UI prototypes from codebases. It streamlines wireframing, annotations, and code handoff, potentially disrupting Figma by empowering collaborative design without …
Claude Design: Rapid UI Prototypes via AI Agents
Claude Design uses agentic workflows with Socratic questions, sliders, and SVG rendering for fast design exploration, best for coders and marketers prototyping wireframes, sites, and assets—despite rate limits and export…
Claude Design + Seedance 2.0 Workflow for Animated Sites
Start with composition-planned hero image from NanoBanana Pro on Higgsfield, mockup and iterate variants/tweaks in Claude Design, animate subtly with Seedance 2.0, handoff zip to Claude Code for dev server—costs ~$5 extr…
Claude Design: Build & Iterate UI Prototypes Fast
Claude Design generates hi-fi prototypes from prompts, supports design system uploads for consistency, and exports to Figma/Code—accelerates ideation but watch token costs and bugs in complex setups.
Mouth Coding: AI-Facilitated Collaborative Web Building
Mouth coding uses real-time conversations with LLMs, transcription, and live previews to build websites collaboratively, prioritizing human judgment to create inclusive designs faster—ideal for small teams and non-profit…
Claude Design: Iterate UIs Fast Without Token Burn
Claude Design excels at visual iteration via tweaks and variants for web apps/slides, getting you to 90% UI readiness before exporting to code—far faster than Claude Code's text prompts, if you manage its heavy usage lim…
Embed Interactive HTML Textures in Canvas Scenes
HTML in Canvas renders live, interactive DOM elements as GPU textures in WebGL or 2D canvases, solving canvas's text/layout issues while preserving HTML's accessibility and performance.
Claude Design: Repo-to-UI in Minutes
Scan any repo to auto-generate a design system as HTML/CSS assets and docs, then one-shot high-fidelity pages like pricing with voice/DOM edits, exporting to code agents or Canva/PDF.
PDF4WCAG 1.8 Sharpens PDF Accessibility Checks
PDF4WCAG 1.8 aligns PDF/UA validation with PDF Association standards, adds PDF export and one-click refresh, plus CLI for 299 EUR/year commercial use.
Impeccable Skill Turns Claude Code into Design Pro
Install Impeccable skill in Claude Code to access /teach, /craft, /polish, /critique, and /animate commands, upgrading generic redesigns to polished sites scoring up to 40/40 on Nielsen's heuristics.
Build 5-Page Animated Site with Claude in 10 Mins
Copy free brand kits into Claude Design for instant design systems, generate 5 high-fidelity pages using screenshots for structure, handoff to Claude Code for Next.js + GSAP animations, deploy to Vercel—zero Figma, live …
Claude Design Masters Wireframes & Decks, Flops on Video
Claude Design delivers agency-level wireframes via smart PM-like questions and 90% solid pitch decks from minimal input, but video is only 5/10—prioritize low-fi wireframes first to save tokens and refine ideas.
Claude Design: Auto-Extract Design Systems, Prototype, Handoff to Code
Claude Design generates brand-specific design systems from websites in 15 minutes, builds editable prototypes via chat, and hands off directly to Claude Code, enabling founders to ship landing pages and decks without des…
Claude Design Redesigns Apps from Codebases in 7 Minutes
Attach your codebase to Claude Design; it analyzes it, generates a full interactive high-fidelity prototype following iOS standards, enables on-the-fly edits, and hands off directly to Claude Code—closing the design gap …
Claude Design Builds UIs from Sketches via Conversation
Paid Claude users generate responsive landing pages, prototypes, and slide decks by sketching wireframes, answering AI questionnaires, and refining via chat—powered by Opus 4.7, with exports to HTML, PDF, or Claude Code.
Claude Design Slashes Prototype Prompts 10x, Misses Sketch Input
Claude Design builds prototypes and slides via chat using Opus 4.7, with brand integration and refinement tools; Brilliant cut complex pages from 20 to 2 prompts, Datadog weeks to minutes, but lacks drawing input for lay…
Claude Design: AI Builds Systems and Prototypes Fast
Claude Design ingests Figma files to auto-generate full design systems, wireframes, high-fi interactive prototypes, and animations via iterative prompts—taking 10-15 mins for complex outputs.
Show all 153 in Design & Frontend →