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
Keep the source roles separate. Design Engineer Tools is a broad cross-category shelf; Designtools.fyi is an editorial role-ranked comparison; this page is Kevin's routed shortlist; and the selected tool's official repository, license, docs, release, source, and measured target behavior are the adoption authority. No catalog score, “open source” label, star count, or community mention can replace that final pass. Source: Design Engineer Tools and designtools.fyi, reviewed 2026-08-12
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 |
| Flint Chart | Adopted MIT semantic chart-intent route for agent-authored, human-editable ChartAssemblyInput that can compile across Vega-Lite, ECharts, Chart.js, Plotly, and Excel. Use flint-chart-author; keep data transformation, policy, storage, renderer choice, accessibility, and export proof in the host. |
| Tweakpane | MIT, dependency-free parameter and monitor pane for isolated prototypes or Fieldwork artboards: typed bindings, monitors, folders/tabs/buttons, themes, plugins, mobile support, and JSON import/export. It does not own design state, annotations, versions, or approvals. |
| Agentation | Desktop React 18+ visual-feedback adapter/reference with element, text, multi, and area annotations; animation pause; structured selectors/context; optional React component/source hints; and an MCP annotation queue. PolyForm Shield prohibits competing-product use, so Fieldwork may study or use it only within that license boundary and must independently implement overlapping product behavior. |
| 墨 Ink / Ink Inky | Hosted Chinese/Japanese calligraphy authoring reference with physical brush controls, write/trace and teaching modes, multiple surfaces, deterministic replay, and PNG/JPEG/SVG/MP4/WebM/GIF/self-contained React export. A live 天下 export passed. Recommend the hosted tool when this exact output is useful, but do not call the client source reusable: no public repository or license was found. |
| Softle | Track as a physics-native vector-authoring interaction model: organic shapes bend, pack, collide, and reflow while the frame is manipulated. The current public product is still a coming-soon canvas preview with no editor, export/API, public repository, or license, so it is not yet an available stack recommendation. |
| 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-09-11 | Re-reviewed the resource ladder through Interface Craft, Flo Guo, UI Skills, Devouring Details, SVG Guide, Rams, and userinterface.wiki. Kept galleries as inspiration and routed implementation learning through vocabulary, source, and verification. Source: X/@ImranUxi
2097929685565096303; local media and linked-source review -
2026-08-12 | Added the direct Flint source artifact and adopted semantic-chart route after exact-revision repository and executable-skill review; the saved post is discovery evidence, while the MIT source and host proof own the recommendation. Source: X
2083584357940506741;microsoft/flint-chart@84a8e8d -
2026-08-12 | Added Ink Inky as a tested hosted calligraphy/export route and Softle as a high-signal physics-native authoring reference that remains unavailable as a production tool. The distinction comes from exercising the live sites and exports, not from launch-post engagement. Source: X
2084239175105024337, X2086995635526345076; live browser/runtime replay -
2026-08-12 | Added the exact-source DOM-to-design tool split: Tweakpane is a narrow MIT parameter/monitor candidate; Agentation is a capable visual feedback and MCP reference but remains constrained by PolyForm Shield, React/desktop assumptions, and non-independent fixer resolution. Clarified broad shelf versus role-ranked catalog versus official-source authority. Source: X
2079178687409279303;benjitaylor/agentation@8158a97;cocopon/tweakpane@50a18c3 -
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