#ui-ux
Every summary, chronological. Filter by category, tag, or source from the rail.
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.
Kevin PowellDeepMind's 4 Principles for Contextual AI Pointers
DeepMind's Gemini-powered mouse pointer captures visual/semantic context at cursor to enable natural pointing + speech interactions, guided by 4 principles that eliminate prompt-heavy AI detours.
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.
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.
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.
Chatbot Harms Are Designed In: Designers Must Own Them
AI chatbots exploit loneliness for engagement because hyper-individualistic design ignores systemic risks; use NIST and EU AI Act frameworks to add friction, cap emotions, and question decisions in every sprint.
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 styles.
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 changes.
Build Reactive Multi-Page Web Apps with NiceGUI in Python
NiceGUI lets you create full web apps with shared state, routing, real-time charts, CRUD todos, validated forms, file uploads, and async chat using pure Python—no JS or HTML needed.
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, use body/html pseudos for overlays.
MCP Apps: Interactive Branded UI in AI Chats
MCP Apps let tools return interactive HTML UI chunks over MCP instead of text, enabling branded experiences in ChatGPT, Claude, VS Code; interactions route through hosts to stay in context.
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 feel that drives design features and traffic.
EveryRafa 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 projects.
AI Creates New Cognitive Biases Eroding Human Skills
AI induces automation bias dropping diagnostic accuracy from 80% to 20%, sycophancy agreeing 50% more than humans, cognitive atrophy weakening reasoning in 25%+ of heavy student users, emotional dependence in 1/3 of Americans, and filter bubbles—counter with UI nudges surfacing uncertainty.
Design Agentic AI Like a Manager: Job, Autonomy, Escalation
Build agentic AI by defining its job scope, autonomous decisions, and escalation points—mirroring management to set boundaries and build user trust.
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.
Showing 30 of 113