Bookmarks That Make Me Faster: A Design Engineer’s Toolkit

Design engineering is half craft and half speed. The craft comes from taste and practice. The speed comes from not rebuilding things that already exist, and from knowing exactly where to look when you need an idea, a color, an icon or an animation.

This is my bookmarks folder, cleaned up and sorted by what each link helps me do. Save the ones that fit your workflow and ignore the rest.

Start here: curated hubs

When I don’t know what I’m looking for, I begin with a hub. Someone has already done the filtering.

• designengineer.tools is a list of useful tools for web-focused design engineers, curated by James Warner. It’s sorted by inspiration, components, web utilities and motion.
• DesEngs collects tools, articles, videos, communities and inspiration for design engineers, plus a jobs board.
• designtools.fyi compares design tools by capability and by role, including design engineers.
• Toolfolio is a tool discovery platform covering design, AI, coding and more.
• Designeer is a curated collection of interface craft, component libraries, AI tools and resources for builders.

Color

• Realtime Colors lets you test a palette on a live-looking site instead of a row of swatches.
• oklch.fyi is an OKLCH color picker, generator and converter. It’s good for building palettes that look even across hues.

Visual effects and textures

• Tooooools applies lo-fi effects to images and videos: dithering, halftone, gradients, patterns and more. It’s free and needs no sign-up.
• Grainrad gives you free WebGPU-powered ASCII, dithering and retro effects running at 60fps.
• SVG Patterns by Nucleo has ready-made SVG patterns for backgrounds and textures.
• 3 Pixel Grid is a tiny 3x3 animated indicator driven by simple delay arrays. You browse the patterns, copy the config and drop it in.
• Scrollbar BUT Cooler is a custom scrollbar experiment. A small detail like this is what makes an interface feel considered.

Icons and logos

• Logos by lndev offers over 15,000 free SVG logos for apps, dev tools and tech brands. You can search, filter, then download or copy.
• Reicon is a free, open-source library of 2,700+ handcrafted SVG icons. It works with React, Vue, Svelte, Angular, Flutter and Figma.
• Isocons is a set of carefully crafted isometric icons.
• Logo Lattice helps you draw logos quickly on snapped square and isometric grids.
• Logosystem is a logo inspiration library with 1,600+ logos, wordmarks, symbols and animated logos. You can filter by color, style, shape and industry.

Inspiration

• Collect UI is a daily source of UI design inspiration.
• Supahero is a curated library of website hero sections. It’s useful when the hero is the part you’re stuck on.
• Interfaces is another place to see how good interfaces are put together.
• Layers is a library of web templates, 3D WebGL scenes, animated backgrounds and gradients. Each one can be copied as a single prompt for your AI tool.
• Lander Blocks has free Figma blocks: website sections, app screens, dashboards and logos. You can pull them apart to see how they were built.

Components and motion

This section is where most of my speed comes from.

• useHooks is a collection of modern, server-safe React hooks from the ui.dev team, including useDebounce, useLocalStorage, useMediaQuery and many more.
• slot-text is a tiny, dependency-free text roll animation for buttons, counters and status labels. You can roll by character or by word. It’s the closest thing I’ve seen to that smooth button text shift.
• Torph is a dependency-free animated text component.
• loading.dev is a lightweight library of loading indicators for React.
• Generative Loaders is another loader collection for when the usual spinner won’t do.
• Easing.dev is a curated collection of easing graphs. Good easing is most of what makes an animation feel right.
• WebHaptics brings haptic feedback to the mobile web.
• DialKit is a floating control panel for React, with sliders, toggles, color pickers and spring editors wired to your UI values. It lets you tune an interface by feel.
• Cobe is a lightweight WebGL globe component.
• Input OTP is a one-time-password input component for React.
• Facehash is an npm package for generating faces and avatars.
• Pasito and Bloom are two more experiments from Josh Puckett, alongside DialKit.

Mockups and presentation

• Mockups Design has free premium PSD mockups for private and commercial work, with no registration. It covers studio, packaging and urban scenes.
• Showroom opens Photoshop mockups in your browser with no Photoshop needed. You see your design in every mockup at once and export images or video. Your files are never uploaded.

Reading and personal vaults

These are less about tools and more about developing taste.

• Using AI as a Design Engineer by Jakub Krehel covers how he uses AI in his daily work.
• Details That Make Interfaces Feel Better is a collection of small details that improve how an interface feels.
• Arlan’s Vault, Sahil’s bookmarks, Libraries.dev, Directoryyy and spreadsheet of resources are worth browsing when you want to see what other builders keep.