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
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.
Claude Design Enables Visual Web Prototyping
Claude Design provides a graphical interface for building interactive prototypes, mockups, and slides with Claude, allowing visual tweaks and exports to code or PowerPoint, addressing frontend design gaps in Claude Code.
Claude Code + Free Tools: 10-Min Pro Websites
Build stunning landing pages in 10 mins using Claude Code with Three.js, Spline, and AI videos from Higgsfield—no design or coding skills required, deploy free on Vercel.
10 Tools to Fix Claude Code's Frontend Slop
Claude Code excels at code but generates generic 'AI slop' (purple gradients, Inter font, bento grids)—equip it with these 10 skills, CLIs, and tools for tasteful, production-ready UIs via anti-patterns, reverse-engineer…
10 Fresh CSS/HTML APIs for Smarter Layouts and Effects
Wes Bos and Scott Tolinski unpack new CSS features like native masonry grids, HTML-in-canvas for accessible effects, and scoped queries, solving longstanding UI pain points with simple, powerful APIs.
7 Traits of World-Class Designers vs Okay Ones
World-class designers intrigue with clear intent in portfolios, share the painful texture of projects, prioritize user needs over artifact polish, validate ideas early with users, own strategy and impact, lead decisively…
Brian Lovin: Code Prototypes Over Figma for AI Design
Designers must prototype AI interfaces directly in code to grasp real behaviors, as Figma mocks fail to capture agentic workflows—Brian Lovin's Notion playbook.
Claude Code Workflow: Design to Deployed Compliant Site
Build professional client sites in Cursor with Claude: pull AI designs from GetDesign.md/Neuform, deploy to Vercel previews, auto-publish SEO blogs via Arvow API, add Cookiebot for FDBR/GDPR compliance—all end-to-end.
Train Claude on Tokens & Components for On-Brand AI UI
Prep Figma design tokens with descriptions, build Claude skills for tokens/components, attach Mobbin screenshots, generate HTML locally then push to Figma for production-ready designs matching your system.
Build Converting Sites in 10 Mins: Stitch + Claude Code
Clone competitor designs in Google Stitch, code full sites pixel-perfect in Claude Code, add CRO like video testimonials (7x cheaper leads), deploy free on Vercel for 15-20% conversions.
Muse Spark Excels at UI Replication from Screenshots
Muse Spark replicates designs into frontend code by preserving layout, spacing, and visual feel while extracting assets—ideal for UI from screenshots, but average on backend; pair with Verdant for full-stack.
Claude Code's 5 Levels Build $10K Landing Pages
Advance through 5 Claude Code design levels—from basic prompts to skills, audience research, pro components, and branded elements—to create conversion-optimized landing pages worth $10K, like one for a $97/mo masterclass…
CSS Hack Enlarges Next Slide in Google Slides Presenter View
Google Slides presenter mode shows a tiny next-slide preview; inject this CSS via Stylish to resize it to 400x300px for easy viewing.
Tripo AI HD V3.1 Turns Photos into Production 3D Assets
Tripo's HD Model V3.1 generates detailed, PBR-enabled 3D models from single smartphone photos in 3-4 minutes at ultra settings, excelling on fur textures, text, and unseen angles over Copilot 3D.
64% UI Match in 10-Min CSS Challenge
Inspect custom properties first, code backgrounds/paddings/structure before alignments, use flex/grid for fast layouts—hits 64% match without early pixel tweaks.
OpenAI Design: Models Over Pixels
Ian Silber explains how OpenAI designers treat AI models as the core product, prototype with code over Figma, and build reusable primitives around chat interfaces.
Fail Whale to Dumpling Emoji: Art's Power in Tech Crises
Yiying Lu's Fail Whale illustration turned Twitter outages into community-building opportunities, leading to emojis, workshops, and a career bridging art, tech, and human connection—proving crises hold fun and creativity…
Claude Code + Figma: Designer's Workflow
Connect Claude Desktop to Figma via MCP to generate iterative designs, push prototypes, create docs/audits—boosted by custom skills and research, despite Figma Skills inconsistencies.
Evolving Visa's Data Viz Library into an Insight Language
Visa data team built an accessible web components chart library, then iterated to a design system handling messy real-world data, enforcing best practices for faster, better visualizations across teams.
awesome-design-md Fixes AI UI Inconsistency
Place a design.md file from awesome-design-md in your Verdant project root and prompt it as the visual source of truth to generate coherent frontends inspired by Vercel, Linear, and 50+ other sites.
Animate Nano Banana Designs in Remotion with AI Prompts
Generate graphics via Nano Banana (Gemini), upload to AI-powered Remotion in Cloud Code, prompt for animations like glowing text or pop-ins, add manual controls, and export reusable 'skills' markdown for fast video edits…
Claude App Generates Figma Components Using Design Tokens
Link Claude Code app to Figma via MCP and your tokens library to auto-create variant components that match your design system spacings, colors, and typography—taking 2-5 minutes per simple component vs. 20-25 minutes man…
Shopify's Studio: Misfit Experts Fuel Design Magic
Shopify's Product Design Studio runs like an agency of specialists—motion, product, engineering—who collaborate without hierarchy in a fun environment where great design emerges inevitably.
Show all 131 in Design & Frontend →