8 min read
Design Engineering Resources
A curated index of tools, references, communities, and people at the intersection of design and engineering. Source: desengs.com.
For the discipline and decision model, start with Design Engineering. This page is the resource shelf: people, references, tools, skills, and communities agents can consult when translating product taste into shipped UI.
The @remvze bookmark is useful because it proves the shelf should be cross-functional, not "component library" only. Design Engineer Tools has 120+ live links across inspiration, AI coding tools, component sources, web utilities, desktop utilities, capture, whiteboards, organization, fonts, visual tools, interface tools, motion, audio, volumetric capture, 3D, glTF, research, browsers, and emoji. That makes it a working routing map for design-engineering sessions: start by naming the job, then inspect the shelf before asking an agent to invent a tool or component from memory. Source: Design Engineer Tools, 2026-06-30
People
This page is a curated resource index. The base source is the DesEngs clipping; local additions are included when they have become recurring references in Kevin's design-engineering work. Source: Obsidian-LLM-Wiki/Clippings/DesEngs Resources for Design Engineers.md; https://desengs.com/
| Person | Role | Links |
|---|---|---|
| Rauno Freiberg | Staff Design Engineer, Vercel | rauno.me, Web Interface Guidelines |
| Emil Kowalski | Design Engineer, Linear | emilkowal.ski, animations.dev |
| Raphael Salaja | Author, userinterface.wiki | userinterface.wiki |
| Josh Puckett | Creator of DialKit | joshpuckett.me |
| Maggie Appleton | Design engineering taxonomy | Collection of Design Engineers |
| Flo Guo | Flo Guo | Founding Design Engineer, Paradigm; previously Vercel |
| Dan Hollick | Design Engineer, Tailwind Labs (ex-Raycast) | makingsoftware.com, threads |
Reference Manuals
| Resource | What it covers |
|---|---|
| Web Interface Guidelines | Non-exhaustive list of details for good web interfaces (Rauno) |
| Animations.dev (animations.dev) | Emil Kowalski's course/source for animation taste, easing, timing, springs, performance, and motion judgment. |
| userinterface.wiki | Living manual: motion, typography, pseudo-elements, animation principles |
| Devouring Details (devouringdetails.com) | Interactive reference manual for interaction-curious designers: Principles, Prototypes, Resources, and downloadable React component source |
| Interface Craft | Josh Puckett's working library for designing with uncommon care: 40+ detailed articles, walkthroughs, interactive videos, skill files, references, and custom tools. Use it when an interface principle should be inspected through a working example, not another static checklist. |
| Detail | Rene Wang's curated library of microinteractions — why great software feels great; has an official agent skill |
| Laws of UX | Psychological principles behind interfaces that feel right |
| Design Principles | Curated collection of design principle frameworks |
| UI Playbook | Documented collection of UI components |
| Component Gallery (component.gallery) | Repository of interface components from real design systems; use it to learn component names before prompting agents |
| Design Engineer Tools | Broad source shelf for web-focused design engineers: inspiration, AI code tools, component sources, motion, 3D, capture, and utilities |
| Making Software (makingsoftware.com) | Illustrated "how everyday software works" manual — screens, Gaussian blur, beziers, rasterization, compression; hand-drawn Figma diagrams (Dan Hollick) |
| Interfaces.dev | Design Engineering Magazine: design-engineering references, essays, and practitioner framing. |
| interface-design.dev | Claude Code design plugin/reference that keeps interface decisions from being re-decided every conversation. |
| Refero Styles | Gallery of DESIGN.md-style visual systems for AI agents and design-spec capture. |
| TasteSkill | Anti-slop frontend framework for AI agents; study for design-skill structure and critique language. |
Tools
| Tool | Purpose |
|---|---|
| DialKit | Floating control panel for tuning UI values in real-time |
| shadowLab | Playground for creating box shadows |
| Kigen Palette | Kigen (kigen.design/color) |
| OKLCH.fyi | Convert, generate, explore OKLCH colors |
| OKLCH bulk convert | Batch convert color palettes into OKLCH when retokenizing references. |
| Pretext | Text-measurement utility for typography and fitting problems; see Canvas Text Layout (Pretext). |
| Easing Graphs | Curated collection of easing curves |
| Torph | Dependency-free animated text component |
| Calligraph | Fluid text transitions powered by Motion |
| Liveline | Real-time animated line chart for React |
| Sonner (sonner.emilkowal.ski) | React toast and notification component |
| cmdk | Fast, unstyled command menu React component |
| soundcn | 700+ curated UI sound effects for web apps |
| @web-kits/audio | Declarative audio for the web - sounds as plain data, JSON patches, React hooks (Raphael Salaja) |
| WebHaptics | Haptic feedback for mobile web |
| Radix UI | Accessible React primitive layer for design systems and shadcn-compatible behavior |
| Base UI | Unstyled accessible React primitive layer and Base-backed ecosystem route |
| Astryx Design System | Meta's agent-ready React/StyleX design-system substrate |
| Cloudflare Kumo | Cloudflare's accessible Base UI-backed app component library |
| Blocks.so | shadcn/Radix/Base UI block catalog for product sections |
| Kokonut UI | Animated Tailwind/shadcn/Motion components for React and Next.js |
| Bklit UI | shadcn chart and data-visualization components for dashboard UI |
| Sonner | React toast and notification component for compact non-blocking feedback |
| Magic UI | React/Tailwind/Motion animated components and structural effects for shadcn-style surfaces |
| Motion.dev | Default production UI motion engine route for Motion.dev / Framer Motion |
| Chanh Dai Components | Pixel-exact Tailwind/shadcn component craft and showcase reference |
| Evil Charts | Chart and dashboard component treatments for shadcn/Recharts-style products |
| Fancy Components | Ready-to-use animated React components and playful microinteractions |
| Skiper UI (skiper-ui.com) | Uncommon components for shadcn/ui and Next.js projects |
| Cult UI (cult-ui.com) | Open-source shadcn/ui components, animated blocks, templates, and AI-agent artifact patterns |
| Origin UI | Copy-paste React/Tailwind app UI variants in the shadcn ecosystem |
| Shaders.com | Composable shader/effect component source for WebGPU/WebGL visual material |
| Unicorn Studio | No-code WebGL/effect editor for dither, glyph texture, mouse trails, god rays, embeds, and visual proofs. |
| theSVG | 6,000+ brand/logo SVGs (mono/light/dark/wordmark variants + brand hex); npm/CLI/API/MCP — Kevin's default icon source (The SVG) |
| Iconify icon sets | Large open-source icon-set browser and implementation source. |
| LobeHub Icons | Brand/product icon collection useful for AI/devtool surfaces. |
| Charcuterie | Unicode/glyph exploration surface for text texture, icons, and loading-state ideas. |
| Box ASCII | ASCII box/diagram reference for terminal-style UI and docs artifacts. |
Agent Skills
| Skill | What it does |
|---|---|
| UI Skills | 132-entry external skill directory for polishing agent-built interfaces; use after Kevin-owned local UI/design skills |
| Impeccable | 1 skill, 20 commands, curated anti-patterns for frontend design |
| rams | Automated design reviews for AI-generated code |
Design System Checklists
| Resource | Purpose |
|---|---|
| Design System Checklist | Open-source checklist for planning, building, and growing design systems |
| 12 Principles of Animation | Foundational animation principles applied to interfaces |
| SVG Guide | Interactive mini-course on creating SVG animations |
Communities
| Community | Focus |
|---|---|
| Design Engineering Club | Community for design engineers |
| Design Engineer Jobs | Job board for design engineering roles |
Timeline
- 2026-07-07 | Promoted Sonner from an external tool row into a first-class component-library route for React toast and notification feedback. Source: User request, 2026-07-07; https://sonner.emilkowal.ski/; https://github.com/emilkowalski/sonner
- 2026-07-07 | Added the audited component/motion source routes from Component Library Sources, including Base UI, Astryx Design System, Cloudflare Kumo, Kokonut UI, Bklit UI, Magic UI, and Motion.dev, so the broad design-engineering shelf matches the component-library and motion rankings. Source: User request, 2026-07-07
- 2026-07-02 | Refreshed Interface Craft after the launch artifact review: the site is now a broader library with articles, walkthroughs, interactive videos, skill files, references, and custom tools, not only the earlier leading/measure figure. Source: X/@AliGrids, 2026-06-16; Source: Interface Craft, 2026-07-02
- 2026-06-30 | Promoted Devouring Details from an external row to a dedicated reference page and added Design Inspiration Stack so Kevin's personal-site inspirations route through this shelf. Source: User request, 2026-06-30; https://devouringdetails.com/
- 2026-06-30 | Deep-reviewed @remvze's Design Engineer Tools bookmark and local screenshot. Promoted it from a one-line community row into the broader design-engineering source shelf and connected it to Component Library Sources, UI Component Vocabulary, and current Stitch/design-tool routing. Source: X/@remvze, 2026-03-14; https://designengineer.tools/
- 2026-06-30 | Added Animations.dev and Unicorn Studio from the X bookmark artifact review: course-backed motion taste plus no-code WebGL/dither proofing. Source: X bookmark artifact audit, 2026-06-30
- 2026-06-26 | Promoted Radix, Blocks.so, Chanh Dai components, Evil Charts, Fancy Components, Origin UI, and Shaders.com into the design-engineering resource shelf. Source: User request, 2026-06-26
- 2026-06-25 | Added Kevin's design-folder manuals and tools: Interfaces.dev, interface-design.dev, Refero Styles, TasteSkill, OKLCH bulk convert, Pretext, Iconify, LobeHub Icons, Charcuterie, and Box ASCII. Source: raw/notes/design-folder-sites-2026-06-25.md
- 2026-06-25 | Added Skiper UI and Cult UI as active component-library sources and linked the broader Component Library Sources router. Source: User request, 2026-06-25; https://skiper-ui.com/; https://www.cult-ui.com/
- 2026-06-17 | Added source model and timeline, clarifying that this is a curated index rather than a researched profile for every listed resource. Source: Obsidian-LLM-Wiki/Clippings/DesEngs Resources for Design Engineers.md; https://desengs.com/
- 2026-06-19 | Linked to Design Engineering as the canonical concept page for the discipline. Source: whole-wiki concept review, 2026-06-19
- 2026-06-13 | Added newer design-engineering resources from bookmark and wiki maintenance passes. Source: Wiki Log
- 2026-04-07 | Created design-engineering resource index from the DesEngs clipping. Source: Obsidian-LLM-Wiki/Clippings/DesEngs Resources for Design Engineers.md
- 2026-06-24 | Promoted Flo Guo from a plain external row to a person link and added her Design Engineering note plus Flo Guo People I Admire people graph. Source: Flo Guo, https://www.floguo.com/notes/design-engineering and https://www.floguo.com/notes/people-i-admire, accessed 2026-06-24
Related Pages
Design EngineeringFrontend and Design SkillsFrontend and Design SkillsInterface Micro-PolishDesign SystemUI Skills PackDesign Inspiration StackDevouring DetailsMaking SoftwareDan HollickFlo GuoFlo Guo People I AdmirePersonal Website ReferencesMoodboard SitesDesign Effects and Motion SourcesComponent Library SourcesUI Library RankingMotion Library RankingWeb3D Library RankingUI Component VocabularyGoogle StitchAnimations.devUnicorn StudioRadix UIBase UIBlocks.soAstryx Design SystemCloudflare KumoKokonut UIBklit UISonnerMagic UIMotion.devChanh Dai ComponentsEvil ChartsSkiper UICult UIFancy ComponentsOrigin UIShaders.comThe SVGCanvas Text Layout (Pretext)
38 pages link here
@web-kits/audioToolsActionable Tools IndexToolsArcotype Font BrowserToolsCharcuterieToolsCoder Apps BundleToolsComponent Library SourcesDesignCult UIToolsDan HollickPeopleDeclarative Web Audio (Raphael Salaja)ToolsDesign EngineeringConceptsDesign Engineering as Bilingual CreationPhilosophiesDesign Inspiration GalleriesDesignDesign Inspiration StackDesignDesigntools.fyiToolsDevouring DetailsToolsDialKitToolsFlo GuoPeopleFlo Guo People I AdmireDesignInterface Micro-PolishDesignJosh PuckettPeoplelucide-animatedToolsMaking SoftwareToolsMoodboard SitesToolsPersonal Website ReferencesDesignProduct Site Reference GalleryDesignRetired Skill Article LedgerMetaSkill ResolverSkill ResolverSkiper UIToolsSonnerToolsTaste Skill Framework (Leonxlnx/taste-skill)ToolsThe SVGToolsType Foundries ReferenceDesignUI Component VocabularyConceptsUI Library RankingDesignUI Primitives ShortlistDesignUI Skills PackToolsUserinterface.wikiDesignX Bookmarks: Design & UI (Feb–Jun 2026)Design