Resources | Design Engineers

Start here

Maggie Appleton's Design Engineer Collection· 8m read

Curated essays, talks, and resources on the design engineering craft.

Becoming a design engineer (hub)· 2m read

Learning resources and jobs for aspiring design engineers.

What is a Design Engineer?· 3m read

Jim Nielsen on the role of design engineers.

The Design Engineer

Trys Mudford on working across design and engineering.

Design Engineering· 1m read

David Hoang’s early take on the software design engineer role.

Design Engineering 101· 7m read

An introduction to the role, with learning paths for designers and engineers.

Design Engineering at Vercel· 5m read

How Vercel thinks about the design engineer role and team structure.

Essays

On AI, systems, taste and the human filter· 9m read

Why judgment still wins when agents make shipping cheap.

Limit the number of details· 11m read

Geoff Teehan on complexity as a craft tax — earn every control, don’t accumulate free buttons.

Design Principles· 3m read

Design principles from product teams.

Details that make interfaces feel better· 10m read

Interactive craft notes on wrap, radii, interruptible motion, and optical alignment.

Invisible Details of Interaction Design· 15m read

The details behind familiar interface interactions.

Lessons of Design

Long-form craft lessons from product design practice.

Front-of-the-front-end and back-of-the-front-end· 6m read

Brad Frost on the different kinds of frontend development.

userinterface.wiki

A reference for interface design, motion, and typography.

Craft· 2m read

Indexed craft notes on UI polish.

How I Design with AI

Engineer playbook for shipping UI with agents without drowning in slop — lock constraints, generate variants, then judge on real-data previews.

Becoming a Design Engineer· 4m read

A designer’s experience learning to work in code.

Anatomy of AI Input· 5m read

Layer-by-layer prompt input: grow field, context bar, files, assist, states.

Design Engineering (Flo)· 4m read

A design engineer’s personal collection of learning resources.

The Gap (Design Engineering)· 3m read

Where visual design and implementation diverge, and why.

I Think I'm a Design Engineer· 9m read

Early essay naming the design–engineering gulf.

Using AI as a Design Engineer· 9m read

Practical DE agent workflow — accelerate craft without outsourcing taste.

Is AI going to steal my job as a design engineer?· 2m read

Tim Wilson on where the design-engineer gap still needs a human.

Design Engineering — a State of Mind· 8m read

Design engineering as an approach to building software.

ui.land· 1m read

Interviews and resources on design engineering.

The Attributes of a Design Engineer· 11m read

Kathryn Gonzalez on autonomy, craft, and shipping at higher fidelity.

Developing Taste· 3m read

Taste as trained judgment — study great work, explain why, then practice.

You Don't Need Animations· 5m read

Emil on when UI motion earns its keep, and when stillness is the move.

Family Values· 18m read

Craft essay on building Family around simplicity, fluidity, and delight — trays, shared-element motion, and when to spend polish.

The Rosetta Stone of Design Engineering· 1m read

On translating design intent into working software.

For designers learning code

JavaScript for Designers

Learn JavaScript fundamentals with design-focused examples.

Design Engineer Course

Structured HTML/CSS/JS/React for designers who ship in code.

React for Designers· 2m read

Framer's guide to building interactive prototypes with React.

Interactive coding screencasts. Great for visual learners picking up React.

The Odin Project· 2m read

Free full-stack curriculum with hands-on projects. Start with Foundations.

CSS for JavaScript Developers· 33m read

Josh Comeau's deep dive into CSS mental models for engineers.

UI Engineering 101 for Designers· 4m read

Cohort course: polished UI into HTML/CSS.

For engineers learning design

Making Software

Illustrated reference for how software media works.

Interface Cheat Sheet· 10m read

Tight craft checklist — type, motion, tokens, a11y.

Laws of UX· 3m read

Psychology principles applied to interface design.

A Five-Minute Guide to Better Typography

Short type checklist: hierarchy, measure, rhythm, no textbook.

Ahmad Shadeed· 2m read

Production-grade CSS essays—layout, RTL, systems.

HTML Can Do That· 5m read

Native HTML demos — popover, dialog, exclusive details, invokers — for what you can drop JS for.

How to choose a UI font· 7m read

Cap-centered metrics and tall x-height as the two filters, with ten Inter alternatives.

Design for Engineers· 6m read

Living syllabus for engineers dual-classing into design — type, color, UX, systems, and practice drills.

Web Interface Guidelines· 10m read

Vercel’s guidelines for building web interfaces.

Refactoring UI· 11m read

Practical interface design advice for developers.

Design Books· 5m read

Curated reading list for product, interaction, and visual design.

Practical Typography· 3m read

Matthew Butterick's opinionated guide to making text look good.

mkdir· 10m read

A vote-ranked directory of design inspiration directories. No paywall, no account.

Design for Developers· 10m read

Sarah Drasner's Frontend Masters course on visual design fundamentals.

Thinking with Type

Ellen Lupton’s introduction to typography.

Defensive CSS· 1m read

Patterns that stop dynamic content from breaking your layout.

Motion & craft

Transitions.dev

Reusable transitions for applications.

Interactive SVG Animations· 4m read

A course on SVG shapes and animation.

Real-time animated React line charts.

Interactive box-shadow lab with presets and CSS export.

Visual reference for easing curves. Pick one, copy it.

Haptic feedback for the mobile web.

Floating panel to live-tune springs, colors, and layout knobs while you build.

Interaction components for React.

Images in motion

Continuous multi-lane image mosaics — pure CSS motion, tiny JS core.

Fluid text transitions powered by Motion.

An animation library for React.

React as a motion-graphics runtime.

@web-kits/audio

Declarative Web Audio synthesis for building product sounds as data, not sample packs.

Animated number component for React. Dependency-free, accessible.

Devouring Details

Interaction principles with downloadable React prototypes.

Tiny Web Audio cues you bind with attributes — no sample packs.

Ten-part interactive manual on how icon morphing actually works.

Understanding SVG Paths

An interactive guide to SVG path commands.

The 12 Principles of Animation

Disney's foundational principles applied to UI motion design.

Morph any SVG icon into any other with spring physics.

Emil Kowalski’s course on web animation.

Headless React lens that refracts live DOM in Chrome, Safari, and Firefox.

A magazine about interface design, typography, and motion.

Splits text on the browser’s real line boxes so motion doesn’t invent breaks.

Dependency-free text-morph component for continuous copy transitions.

React liquid/gooey UI effects (npm liquid-gooey); moved off gooey.jakubantalik.com.

Professional-grade animation toolkit for complex sequences.

Curated UI sounds for clicks, whooshes, and product feedback.

Design systems & tokens

Style Dictionary

Amazon's tool for transforming design tokens across platforms.

Design Tokens Generator

Browser-local pipe from brand colors or Figma paste to CSS variables, Tailwind v4 @theme, and DTCG tokens.json.

Radix Primitives

Unstyled, accessible components for building design systems.

Design System Checklist

Open-source design system planning checklist (multilingual).

Nested radii calculator so inner/outer corners stay optically tight.

Design Systems Surf

A collection of design systems from technology companies.

Copy-paste component collection built on Radix. Own your code.

Design Systems Checklist

Comprehensive checklist for building and maintaining design systems.

Gradient Border Plugin

Tailwind gradient borders via mask-composite, including animated variants.

Figma plugin for managing design tokens that sync with code.

Perceptually even OKLCH palette tooling.

Pattern libraries

Interactive UI blocks you can explore, tweak, and take into a project.

A curated catalogue of interface craft, component libraries, and portfolios.

Open-source React in-app feedback (shots, video, notes) routed to Slack/Linear/GitHub.

Fluid Functionalism

Open-source React kit with fluid motion and system-level components.

The Shape of AI

Pattern language for AI UX.

Drawer component for React. Mobile-native feel on the web.

Interface Craft

A library of interface design references.

Search shadcn blocks and templates across registries.

Free React layout and interaction components (Motion + Tailwind) you copy and own.

Fancy Components

Open-source React microinteractions.

Ordered-dither charts with a recharts-style compose API.

A toast notification component.

Documented collection of UI components with rationale.

The Component Gallery

Same component patterns across many design systems.

Themeable payment-card UI across frameworks.

An unstyled command menu for React.

A collection of product A/B test results.

Tiny themeable fluid stepper for React.

Long-running UI experiment library on Tailwind v4 + Base UI you can browse and copy.

Interface patterns and flows from published products.

React, Tailwind, and Motion tutorials from Sam and Ryan.

Curated AI UX patterns across discover, instruct, observe, and refine.

Components for building landing pages.

Catalog of micro-interactions and extra UI details.

55+ shadcn-registry dot loaders you own as local code.

In-browser studio shots and video of live product UI.

Audition local fonts in-browser.

AI tools

Design-eval for agents/PRs against craft + a11y.

Native AI features in Figma for design generation and editing.

Open agent-skills directory for procedural taste.

Agent skills and anti-patterns so coding agents ship less generic UI.

jakubkrehel/skills

Agent skill packs for interface craft (motion, type, layout, color).

Copy-paste agent UI: thinking traces, approvals, tool chips, streaming chat.

before-and-after

PR skill that attaches before/after screenshots and video.

Dotted thought-orb loaders for agent waiting states.

AI-first code editor. Useful for rapid prototyping and pair programming.

Constraint packs so agents ship less generic UI.

AI-generated UI designs from text descriptions.

emilkowalski/skills

Agent skills from Emil for animation taste and interface craft calls.

Generate UI components from text prompts. Good for exploration.

Annotate the DOM once; hand selectors to coding agents.

Open SKILL.md packs that push coding agents off generic UI.

Before and After

Vercel Labs CLI/skill for before/after screenshots in PRs.

Agent-conversation kit (thinking, tools, citations) for React, Vue, and Svelte.

Jobs & community

Design Engineers Club

Community Slack for design engineers to share work and opportunities.

Weekly newsletter covering frontend development and design.

designengineer.io

Community and resources specifically for design engineers.

Design Engineer Jobs

Job board focused on next-gen software companies.

Design Engineer Tools

Curated toolbox for web design engineers.

Design Eng Club

Invite-first community, newsletter, and events for design engineers.

Compact people + resource map.

Living radar of DE tools and essays.

People to follow

People Directory

Browse design engineers in our opt-in community directory.

A reference for learning and day-to-day work, from interface design to implementation. Resources are published by their respective authors; access and pricing may change.