Resources | Design Engineers

Design Engineers

Start here

Maggie Appleton's Design Engineer Collection

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

Becoming a design engineer (hub)

Learning resources and jobs for aspiring design engineers.

Design Engineering at Vercel

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

The Design Engineer

Trys Mudford on working across design and engineering.

What is a Design Engineer?

Jim Nielsen on the role of design engineers.

Design Engineering

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

Design Engineering 101

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

Essays

Front-of-the-front-end and back-of-the-front-end

Brad Frost on the different kinds of frontend development.

Details that make interfaces feel better

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

Using AI as a Design Engineer

Practical DE agent workflow — accelerate craft without outsourcing taste.

Design Engineering (Flo)

A design engineer’s personal collection of learning resources.

The Gap (Design Engineering)

Where visual design and implementation diverge, and why.

The Attributes of a Design Engineer

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

userinterface.wiki

A reference for interface design, motion, and typography.

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

Is AI going to steal my job as a design engineer?

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

You Don't Need Animations

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

Limit the number of details

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

Interviews and resources on design engineering.

On AI, systems, taste and the human filter

Why judgment still wins when agents make shipping cheap.

Design Principles

Design principles from product teams.

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.

Invisible Details of Interaction Design

The details behind familiar interface interactions.

Anatomy of AI Input

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

Developing Taste

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

Becoming a Design Engineer

A designer’s experience learning to work in code.

The Rosetta Stone of Design Engineering

On translating design intent into working software.

Design Engineering — a State of Mind

Design engineering as an approach to building software.

For designers learning code

React for Designers

Framer's guide to building interactive prototypes with React.

Design Engineer Course

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

UI Engineering 101 for Designers

Cohort course: polished UI into HTML/CSS.

JavaScript for Designers

Learn JavaScript fundamentals with design-focused examples.

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

The Odin Project

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

CSS for JavaScript Developers

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

For engineers learning design

HTML Can Do That

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

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

Practical Typography

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

Practical interface design advice for developers.

Thinking with Type

Ellen Lupton’s introduction to typography.

Psychology principles applied to interface design.

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

Interface Cheat Sheet

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

Design for Engineers

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

Patterns that stop dynamic content from breaking your layout.

Web Interface Guidelines

Vercel’s guidelines for building web interfaces.

How to choose a UI font

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

Design for Developers

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

Motion & craft

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

Transitions.dev

Reusable transitions for applications.

The 12 Principles of Animation

Disney's foundational principles applied to UI motion design.

A magazine about interface design, typography, and motion.

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

React as a motion-graphics runtime.

Interactive box-shadow lab with presets and CSS export.

Morph any SVG icon into any other with spring physics.

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

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

@web-kits/audio

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

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

Haptic feedback for the mobile web.

An animation library for React.

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

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

Emil Kowalski’s course on web animation.

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

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

Interaction components for React.

Interactive SVG Animations

A course on SVG shapes and animation.

Images in motion

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

Devouring Details

Interaction principles with downloadable React prototypes.

Professional-grade animation toolkit for complex sequences.

Understanding SVG Paths

An interactive guide to SVG path commands.

Design systems & tokens

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

Style Dictionary

Amazon's tool for transforming design tokens across platforms.

Design Systems Surf

A collection of design systems from technology companies.

Figma plugin for managing design tokens that sync with code.

Design Tokens Generator

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

Design System Checklist

Open-source design system planning checklist (multilingual).

Perceptually even OKLCH palette tooling.

Design Systems Checklist

Comprehensive checklist for building and maintaining design systems.

Radix Primitives

Unstyled, accessible components for building design systems.

Pattern libraries

Search shadcn blocks and templates across registries.

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

Interface Craft

A library of interface design references.

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

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

Catalog of micro-interactions and extra UI details.

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

A collection of product A/B test results.

An unstyled command menu for React.

Interface patterns and flows from published products.

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

Audition local fonts in-browser.

The Component Gallery

Same component patterns across many design systems.

The Shape of AI

Pattern language for AI UX.

Documented collection of UI components with rationale.

A toast notification component.

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

Fluid Functionalism

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

Fancy Components

Open-source React microinteractions.

Components for building landing pages.

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

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

AI tools

before-and-after

PR skill that attaches before/after screenshots and video.

Annotate the DOM once; hand selectors to coding agents.

Open agent-skills directory for procedural taste.

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

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

AI-generated UI designs from text descriptions.

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

emilkowalski/skills

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

Constraint packs so agents ship less 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.

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

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

Native AI features in Figma for design generation and editing.

Generate UI components from text prompts. Good for exploration.

Jobs & community

Design Engineers Club

Community Slack for design engineers to share work and opportunities.

Design Engineer Jobs

Job board focused on next-gen software companies.

Compact people + resource map.

Weekly newsletter covering frontend development and design.

Design Eng Club

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

designengineer.io

Community and resources specifically for design engineers.

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.