#ui-ux
Every summary, chronological. Filter by category, tag, or source from the rail.
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.
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.
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 localization.
Pick UX Study Participants with Inclusion, Exclusion, Diversity Criteria
Define behavioral inclusion criteria, exclude bias sources like pros, and use a recruitment matrix for diversity to ensure external validity and avoid misrecruits costing time, incentives, and bad decisions.
China's Info Seeking: Mobile GenAI + Social, Mirrors West
Chinese users abandon ad-clogged Baidu for mobile genAI (DeepSeek, Doubao) and social apps (Douyin, Rednote) but exhibit identical prompting, trust, and AI-literacy patterns as North Americans.
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 minutes.
Better StackOpen 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 includes 31 skills plus 72 pre-built design systems.
Chase AI