Design Engineering Tools

Cuelume. Interaction sounds for the web

Cuelume is a tiny, dependency-free library of carefully designed interaction sounds, synthesized live with Web Audio.

@web-kits/audio

Declarative audio synthesis for the web.

Design Engineer Tools

A list of useful tools for web-focused design engineers; curated by James Warner.

msllrs/relay

A macOS menu bar app that lets you build rich LLM prompts by combining files, clipboard captures, and voice notes.

Recent — Design Inspiration

The best design inspiration on the Internet.

Highlighters

Realistic, customizable highlighter-pen marks for the web. Bindings for React, Vue, and Svelte.

RatioBuddy - Aspect ratio calculator

RatioBuddy is a fast, simple aspect ratio calculator. Designed & built by Damn Fine.

Rampa — A color toolkit for AI agents and humans

One tool generates palettes, analyzes contrast, mixes colors, and exports to any format. No plugins, no dependencies.

Front-end Inspiration, Resources, and Design References | Frontpedia

Curated frontend inspiration, design references, UI patterns, and development resources for modern web teams.

Stop settling for overused fonts

Visual font discovery for designers. Explore fonts by similarity, vibe, use case, and popularity.

Design Strategies

Draw a card to spark creative thinking

Josh Puckett

Personal site for Josh Puckett

Agentation

The visual feedback tool for agents.

Tweakpane

A compact pane for fine-tuning parameters and monitoring value changes

emilkowalski/skills

Skills for Design Engineers.

Box Shadows - Generate CSS Box Shadows

A CSS box-shadow library and generator to create, test and share box shadows.

Easings - Generate, test and share custom easing curves.

Test common easing curves on a range of interfaces. Or generate and share your own cubic-bezier curves.