Tech Skills

UI/UX Design

User research, Figma, wireframing, design systems, prototyping and usability

21,534
lessons
Skills in this topic
View full skill map →
UX Research
beginner
Facilitate a usability test session
UI Design
beginner
Create a consistent 8pt spacing grid
Prototyping
intermediate
Build a click-through prototype in Figma
AI Design Tools
intermediate
Generate and iterate on UI concepts with AI
All Reads (12,378) Articles (6128)Blog Posts (5209)Tutorials (462)Research Papers (24)News (555)
The <ExperienceSlot /> pattern: Decoupling marketing copy from React components
Dev.to · Pavan S Poojary 🖌️ UI/UX Design ⚡ AI Lesson 9h ago
The <ExperienceSlot /> pattern: Decoupling marketing copy from React components
Every SaaS team starts the same way: a simple boolean column in PostgreSQL (has_seen_v2_modal), a...
Figma published 10 skills
Dev.to · Kacper Zawojski 🖌️ UI/UX Design ⚡ AI Lesson 13h ago
Figma published 10 skills
Figma published 10 skills their community https://dub.sh/ZfYjDlg A few that stuck with...
Choosing the Right LINE Message UI: Confirm, Buttons, Quick Replies, Carousel, or Flex?
Dev.to · unifyport 🖌️ UI/UX Design ⚡ AI Lesson 1d ago
Choosing the Right LINE Message UI: Confirm, Buttons, Quick Replies, Carousel, or Flex?
You are building a LINE customer flow and start with a confirm template. Then the requirements...
Measuring Layout Shift When Live Odds Update
Dev.to · Juju Gamez 2.0 🖌️ UI/UX Design ⚡ AI Lesson 4d ago
Measuring Layout Shift When Live Odds Update
Live odds can update perfectly and still make a sportsbook feel broken. The price changes, the new...
Why Scroll-First Date Pickers Work Better on Mobile
Dev.to · RollDate 🖌️ UI/UX Design ⚡ AI Lesson 5d ago
Why Scroll-First Date Pickers Work Better on Mobile
Most date pickers still use the same interaction model they have used for years: Open the...
Your canvas "A4 export" is not A4: DPI, print size, and the number nobody checks
Dev.to · BellSal 🖌️ UI/UX Design ⚡ AI Lesson 6d ago
Your canvas "A4 export" is not A4: DPI, print size, and the number nobody checks
When I added an "A4" preset to a browser-based collage tool, I thought the hard part was the layout...
AI isn’t replacing mobile UX designers—it's just saving us from infinite wireframe loops
Dev.to · Davidayo 🖌️ UI/UX Design ⚡ AI Lesson 6d ago
AI isn’t replacing mobile UX designers—it's just saving us from infinite wireframe loops
If you’ve been on tech Twitter or LinkedIn lately, you’ve probably seen the endless debate: Is AI...
React State Management in 2026 — Context API vs Redux Toolkit vs Zustand vs Jotai (Same Cart, Real Code + Benchmarks)
Dev.to · kirandeepjassal-crypto 🖌️ UI/UX Design ⚡ AI Lesson 6d ago
React State Management in 2026 — Context API vs Redux Toolkit vs Zustand vs Jotai (Same Cart, Real Code + Benchmarks)
The React state-management debate has produced more bad takes than any other frontend topic. "Just...
The CSS Grid vs Flexbox Showdown: A Jedi's Guide to Layout Mastery
Dev.to · Timevolt 🖌️ UI/UX Design ⚡ AI Lesson 1w ago
The CSS Grid vs Flexbox Showdown: A Jedi's Guide to Layout Mastery
The Quest Begins (The "Why") Honestly, I still remember the first time I tried to build a...
I built a Crisis Mode for moments when thinking becomes too much
Dev.to · Masked But Aware 🖌️ UI/UX Design ⚡ AI Lesson 1w ago
I built a Crisis Mode for moments when thinking becomes too much
Why I designed a low-stimulation browser tool that offers one small step at a time during sensory overload.
One Vue app, three homes: desktop with Tauri, Android with Capacitor, and the web
Dev.to · Léo Guillaume (Dibodev) 🖌️ UI/UX Design ⚡ AI Lesson 1w ago
One Vue app, three homes: desktop with Tauri, Android with Capacitor, and the web
I wanted a Reddit client that lived on my desktop and my phone — without maintaining two separate...
Semantic HTML Is a Shared Language for Accessibility, SEO, and AI
Dev.to · Bertrand Morel 🖌️ UI/UX Design ⚡ AI Lesson 1w ago
Semantic HTML Is a Shared Language for Accessibility, SEO, and AI
A page can look perfectly clear and still be structurally ambiguous. Visual design gives sighted...
Your realtime UI can lie to you, and nothing logs it
Dev.to · Dencio 🖌️ UI/UX Design ⚡ AI Lesson 1w ago
Your realtime UI can lie to you, and nothing logs it
Polling wastes requests. Push loses events. The failure that should scare you is the one where the page just quietly shows the wrong number — and the stream I b
How big is an component really? I measured it 3 ways and got 3 answers
Dev.to · Simon 🖌️ UI/UX Design ⚡ AI Lesson 1w ago
How big is an component really? I measured it 3 ways and got 3 answers
I wanted honest bundle sizes for my UI library and found out most size numbers are measured wrong....
The Grid Awakens: CSS Grid vs Flexbox — A Star Wars Tale
Dev.to · Timevolt 🖌️ UI/UX Design ⚡ AI Lesson 1w ago
The Grid Awakens: CSS Grid vs Flexbox — A Star Wars Tale
The Quest Begins (The "Why") I was building a dashboard for a side‑project last month. The...
Design prompts are part of the frontend spec
Dev.to · NiceDayUp 🖌️ UI/UX Design ⚡ AI Lesson 1w ago
Design prompts are part of the frontend spec
I used to separate “the design bit” from implementation. The design bit was a reference image and a...
Stop Writing Math.cos() in a Resize Listener
Dev.to · Parsa Jiravand 🖌️ UI/UX Design ⚡ AI Lesson 1w ago
Stop Writing Math.cos() in a Resize Listener
CSS learned trigonometry. Here's the radial menu that used to need a resize listener — and doesn't anymore.
The Angular pattern that needs no Provider
Dev.to · Michele Stieven 🖌️ UI/UX Design ⚡ AI Lesson 1w ago
The Angular pattern that needs no Provider
Services are often the default abstraction for reusable Angular logic. But what if the logic is local...
Noodle Nest — Comfort in Every Bowl | A Cozy Ramen Landing Page
Dev.to · Vaishnavi sahu 🖌️ UI/UX Design ⚡ AI Lesson 1w ago
Noodle Nest — Comfort in Every Bowl | A Cozy Ramen Landing Page
This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing This is a...
Portfolio Website Architecture for Dummies
Dev.to · Adam Belton 🖌️ UI/UX Design ⚡ AI Lesson 1w ago
Portfolio Website Architecture for Dummies
The shopping-centre mental model that lets me see my website's architecture with my eyes closed.
Then My Project Needed This
Dev.to · Neel-Vekariya 🖌️ UI/UX Design ⚡ AI Lesson 1w ago
Then My Project Needed This
Finally, I Integrated the Multiselect Autocomplete Dropdown In the past few months, I...
The cost of arbitrary values in AI-generated CSS
Dev.to · Renato Marinho 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
The cost of arbitrary values in AI-generated CSS
A deep dive into the technical debt created by AI-generated CSS and how MCP servers can enforce design system integrity using Tailwind v4 standards.
The "AI Design Fingerprint": Why every agent-generated frontend looks identical (and how to break it)
Dev.to · Renato Marinho 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
The "AI Design Fingerprint": Why every agent-generated frontend looks identical (and how to break it)
Stop letting AI agents build identical, boring websites. Learn how to break the 'AI Design Fingerprint' by forcing intentional design decisions through structur
CSS Grid vs Flexbox: When to Use Each – A Quest Inspired by The Matrix
Dev.to · Timevolt 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
CSS Grid vs Flexbox: When to Use Each – A Quest Inspired by The Matrix
The Quest Begins (The "Why") Honestly, I still remember the first time I tried to build a...
I Built a Design Skill to Make AI-Generated Websites Less Generic — FireBall v3
Dev.to · Lerat 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
I Built a Design Skill to Make AI-Generated Websites Less Generic — FireBall v3
I Built a Design Skill to Make AI-Generated Websites Less Generic — FireBall v3 AI can...
Stop Treating Web Accessibility (WCAG) Like a Software Bug
Dev.to · Mohd Irfan 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Stop Treating Web Accessibility (WCAG) Like a Software Bug
One thing I’ve noticed after years of working in accessibility is that many teams still treat...
Stop Fighting CSS Grids: Building Complex Responsive Layouts Without Losing Your Sanity
Dev.to · Joseph Salaki 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Stop Fighting CSS Grids: Building Complex Responsive Layouts Without Losing Your Sanity
We’ve all been there. You map out a gorgeous, asymmetric layout on your artboard—clean overlapping...
Build map guidance that follows the user without blocking pinch-to-zoom
Dev.to · Rene Larsen 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Build map guidance that follows the user without blocking pinch-to-zoom
A navigation map should help the user move through the world, not fight every gesture they make. I...
Understanding the CSS Box Model, Cascade & Specificity
Dev.to · Deepika Pusala 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Understanding the CSS Box Model, Cascade & Specificity
Understanding the CSS Box Model, Cascade & Specificity A simple guide to understanding how CSS...
Moved Hud outside
Dev.to · Weird Codes 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Moved Hud outside
🎮 MOKSHA Devlog — Commit 175ee207 Author: Weird Codes Date: August 8, 2026 Message: Moved...
Every web rich-text editor is missing a ruler
Dev.to · Sinny 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Every web rich-text editor is missing a ruler
Originally published on Medium. Word processors have had a horizontal ruler for forty years. You...
The Fastest Way I’ve Found to Build a Solid UI Without a Designer
Dev.to · João Forja 💭 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
The Fastest Way I’ve Found to Build a Solid UI Without a Designer
Over the years, I have built new products, redesigned existing ones, worked without a designer, and...
I got tired of reverse-engineering design systems by hand, so I built a Chrome extension
Dev.to · pop3zxcv 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
I got tired of reverse-engineering design systems by hand, so I built a Chrome extension
I spend a lot of time looking at how websites are put together. My usual process was slow: open...
Responsive Web Design
Dev.to · Abimanyu P 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Responsive Web Design
What is Responsive Web Design? Responsive web design means making a website that can...
Mobile Touch Controls: Scale-Independent Fix
Dev.to · Weird Codes 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Mobile Touch Controls: Scale-Independent Fix
Issue #46 — Mobile Touch Controls: Scale-Independent Fix Date: 2026-08-08 Label: UX...
I made a decision cube you rotate by scrolling — pure CSS, one JS listener
Dev.to · FSCSS 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
I made a decision cube you rotate by scrolling — pure CSS, one JS listener
Can't decide? Scroll a cube until it lands on an answer. This is a small demo built on cube.fscss,...
5 Simple Steps to Your Perfect Color Palette
Dev.to · TechShaala 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
5 Simple Steps to Your Perfect Color Palette
Use ChatGPT to discover your best colors and style tips instantly.
MUI to Shadcn: 7 Pitfalls We Hit (And the Fix for Each)
Dev.to · Ashish Patel 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
MUI to Shadcn: 7 Pitfalls We Hit (And the Fix for Each)
We replaced MUI with Radix + Shadcn across a multi-tenant SaaS dashboard over the last quarter....
You built your modal with a `<div>` and a focus trap library. The native `<dialog>` does all of that.
Dev.to · Parsa Jiravand 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
You built your modal with a `<div>` and a focus trap library. The native `<dialog>` does all of that.
The ` ` element ships with focus trapping, Escape-to-close, backdrop rendering, and correct ARIA semantics — no library, no boilerplate. It's been Baseline sinc
The image loads and stays invisible: the opacity: 0 is on the wrapper, not the image
Dev.to · Artur Smirnov 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
The image loads and stays invisible: the opacity: 0 is on the wrapper, not the image
Someone posted this on a support forum and got no answers for a week: The featured image is...
Your AI agent's UI is mediocre—and here's how to fix it
Dev.to · Renato Marinho 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Your AI agent's UI is mediocre—and here's how to fix it
Stop shipping mediocre, lifeless AI interfaces. Learn how to use the UI/UX Excellence Prover MCP to enforce professional design standards like spring physics, 8
Converting SVG strokes to fills in the browser: the geometry problem nobody warns you about
Dev.to · Oleksii 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Converting SVG strokes to fills in the browser: the geometry problem nobody warns you about
A while back I was building an icon font with IcoMoon. I dragged in my SVGs, hit generate, and about...
I scored 91 websites against a 40-check design contract. Zero got an A.
Dev.to · LE-VAI 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
I scored 91 websites against a 40-check design contract. Zero got an A.
We scored 91 websites across 5 industries — fintech, AI/ML, SaaS, design tools, and developer...
Your Figma icons are lying to you — currentColor, dark UI, and React SVG
Dev.to · Roman Riaboshtan 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Your Figma icons are lying to you — currentColor, dark UI, and React SVG
Why hard-coded #000 icons break dark mode, how to structure React SVG components properly, and when paste-JSX beats SVGR.
Stop Using Props + Watchers Just to Trigger Actions in Child Components (Vue 3.5 useTemplateRef + defineExpose)
Dev.to · Izak T 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Stop Using Props + Watchers Just to Trigger Actions in Child Components (Vue 3.5 useTemplateRef + defineExpose)
Replace the messy props and watchers anti-pattern in Vue 3 with direct child method execution using defineExpose and Vue 3.5's useTemplateRef.
Undo, Regenerate and Edit: Recovery Affordances
Dev.to · Multigrid 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Undo, Regenerate and Edit: Recovery Affordances
Three different recovery affordances, what each one is mechanically for, and the version stack that stops regenerate from destroying an answer the user wanted.
Loading States for Slow AI: The 40-Second Problem
Dev.to · Multigrid 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
Loading States for Slow AI: The 40-Second Problem
What to put on screen for the seconds before the first token, why a determinate progress bar would be a fabrication, and the state machine that replaces it.
I built an OKLCH palette generator for pixel art and UI
Dev.to · ivan kulkin 🖌️ UI/UX Design ⚡ AI Lesson 2w ago
I built an OKLCH palette generator for pixel art and UI
Hi! I built OKLCH Pixel Palette, a free and open-source browser tool for generating color palettes...