设计资源
为 Design Engineer 精选的阅读、工具、组件、课程、社区与职位资源。
79 条资源更新于 2026.08.13
Interior专注加载、切换与反馈时序的交互组件，行为经过细致打磨，视觉样式可自由定义。构建Beautiful UI一组带有精致动画与交互效果的 UI 组件，可直接参考或用于产品界面。构建Fluid Functionalism探索 fluid layout、响应式比例与功能主义视觉系统的交互实验。构建crd-ui一组强调创意动效与现代视觉的 React UI 组件，可直接用于产品原型。构建Thinking orbs为 AI thinking 状态提供可定制的动态 orb 视觉组件与灵感。构建jakubkrehel/skillsJakub Krehel 的 AI coding skills，聚焦更好的界面细节、动画与实现质量。工具ZedZed 的 Product Designer 职位，参与设计高性能协作代码编辑器。职位AutumnAutumn 的 Design Engineer 职位，从概念到代码打造完整产品体验。职位Agentation直接在网页上标注 UI 问题，并生成适合交给 AI coding agent 的反馈。工具abtest.design浏览真实产品的 A/B test 案例，理解设计变化与业务结果之间的关系。浏览dither-kit在 Canvas 中生成实时抖动图像效果的开源 JavaScript 工具包。构建emilkowalski/skillsEmil Kowalski 为 coding agent 编写的动画、交互与界面品质技能集。工具NumberFlow为数字变化提供顺滑过渡的 Web component，适合价格、指标和计数器。构建Design Books精心整理的设计书单，覆盖视觉、交互、产品、品牌与创意方法。浏览You Don't Need Animations讨论什么时候动画真的有用，以及如何避免为动而动的过度设计。阅读Rockstar GamesRockstar Games 的 Design Engineer 职位，参与打造高品质数字产品与内部体验。职位ResendResend 的 Design Engineer 职位，连接品牌、产品设计与前端实现。职位Magic UI为 React、Next.js 与 Tailwind CSS 提供可复制的动画组件和视觉效果。构建Design Spells收集能让产品更好用、更有趣的微型设计技巧与交互灵感。浏览@web-kits/audio用于 Web Audio 的轻量 TypeScript 工具包，简化声音加载、播放与控制。构建Design Systems Surf浏览真实产品的 Design System、组件文档与品牌规范。浏览Front-of-the-front-end and back-of-the-front-end web developmentBrad Frost 对前端角色的经典划分：一端更关注界面体验，另一端更关注数据与架构。阅读Gradient Border Plugin为 Figma 快速生成渐变描边与边框效果的实用插件。构建Taste Skill为 AI agent 提供审美与界面判断规则，减少模板化、缺乏层次的输出。工具Hashvatar根据任意字符串稳定生成独特头像，适合用户、团队或占位场景。构建Interfaces从优秀数字产品中收集界面截图与交互模式，适合做设计研究。浏览Jakub Krehel专注交互、动画和产品细节的 Design Engineer 与独立创作者。关注Design for Engineers为工程师整理的设计基础与实用方法，帮助提升界面判断和表达能力。浏览The Concept of Taste探讨 taste 的定义、形成方式，以及它为什么会影响设计决策。阅读Remediate用于构建可访问且精致界面的 React primitives 与组件工具。构建Transitions.dev浏览真实产品中的页面转场与微交互案例，快速建立 motion 参考库。浏览devl.dev面向 Design Engineer 的开放组件与实验集合，强调细节和交互品质。构建ui.land收集高质量 Web UI 案例，为组件、动效和产品细节提供灵感。浏览Using AI as a Design EngineerJakub Krehel 分享 Design Engineer 如何把 AI 用于探索、实现与品质把关。阅读Torph一个小巧的 Web 动效库，用简洁 API 制作顺滑、可组合的过渡。构建shadowLab可视化调试和生成 CSS box-shadow，让阴影层次更自然。工具A Collection of Design EngineersMaggie Appleton 整理的 Design Engineer 名单与角色观察。浏览UI Skills面向 AI coding agent 的 UI 设计技能规则，帮助生成更可靠的产品界面。工具rams用 AI 审阅网页界面，从可用性、视觉层级与细节方面给出改进建议。工具Fancy Components收集带有细腻动画与新颖交互的 React 组件，可直接参考或复用。构建Design Principles搜索和浏览不同公司、团队与设计师公开的设计原则。浏览DialKit把可调参数面板嵌入产品原型，方便实时微调视觉与交互数值。构建Impeccable一套让 AI 生成界面更有审美和产品感的提示词与设计规则。工具Laws of UX用简明卡片解释影响用户体验的心理学规律，并给出设计应用方式。浏览Design System Checklist一份可执行的 Design System 检查清单，帮助补齐基础、组件与文档。工具The Attributes of a Design Engineer总结优秀 Design Engineer 的关键属性：品位、技术、沟通与迭代能力。阅读Calligraph用于创建流畅、可交互 SVG 文字路径动画的 React 工具。构建Details That Make Interfaces Feel Better通过具体案例展示哪些细小调整能让界面感觉更自然、更成熟。阅读Design Engineering从实践视角介绍 Design Engineering 的价值、技能组合与工作方式。阅读Becoming a Design EngineerMarcel Pociot 分享自己成为 Design Engineer 的路径、经验与建议。阅读Design EngineeringFloguo 的 Design Engineering 笔记与资源集合，适合继续延伸阅读。浏览floguo专注产品设计、前端开发与 Design Engineering 的独立创作者。关注Easing Graphs用可视化曲线探索 CSS easing，快速找到合适的动画节奏。工具userinterface.wiki用百科式条目解释 UI 组件、交互模式与产品设计概念。浏览Design Engineer Tools为 Design Engineer 整理的工具目录，覆盖设计、开发、动画与创作流程。浏览OKLCH.fyi了解并试用 OKLCH 色彩空间，创建更一致、更符合感知的颜色系统。工具Interactive SVG Animations一本交互式指南，从基础到实战讲解 SVG 动画的设计与实现。学习Invisible Details of Interaction Design拆解那些看不见却能显著改善产品体验的 interaction design 细节。阅读Interface Craft一门聚焦高质量界面实现的课程，涵盖布局、动效、组件与打磨方法。学习The Component Gallery跨 Design System 浏览和对比组件模式，快速寻找结构与交互灵感。浏览Web Interface GuidelinesRauno 整理的 Web 界面准则，覆盖交互、动画、排版、表单与响应式细节。阅读⌘K可组合、无样式且可访问的 React command menu 组件库。构建UI Playbook用清晰案例整理常见 UI 模式、设计决策与实现注意事项的参考手册。浏览Devouring Details通过拆解真实产品，学习界面细节、设计工程与高质量前端实现。学习Family ValuesBenji Taylor 分享 Family 工作室的价值观，以及他们如何做出更好的数字产品。阅读Liveline为 React 应用提供动态、可交互实时折线图的开源组件。构建Design Engineering Club面向 Design Engineer 的社区，汇集文章、访谈、工作机会与行业讨论。社区Design Engineering: A State of Mind从思维方式出发理解 Design Engineering，而不只是把它当作一个职位名称。阅读soundcn一组可直接用于 Web 产品的 UI 声音，让交互反馈更清晰、更有个性。构建Design Engineer Jobs专门收集 Design Engineer、Creative Developer 等相关岗位的招聘网站。浏览Rauno FreibergVercel 的 Design Engineer，长期分享交互设计、原型与界面工艺。关注Design Engineering 101一份 Design Engineering 入门指南，梳理角色定位、核心能力与日常工作。阅读WebHaptics让网页通过移动设备振动反馈获得触觉体验的 JavaScript 工具。构建animations.devEmil Kowalski 的交互动画课程，学习怎样设计并实现更有质感的 UI motion。学习Emil Kowalski专注动画、交互与界面细节的 Design Engineer，Sonner 与 animations.dev 的作者。关注Sonner为 React 打造的轻量 Toast 组件，默认样式精致，也支持灵活定制。构建Developing Taste解释为什么审美品位不是天赋，而是一种可以通过观察、练习与反馈培养的能力。阅读12 Principles of Animation用网页交互示例讲清动画十二原则，以及它们如何让数字界面更自然。阅读Design Engineering at Vercel了解 Vercel 的 Design Engineering 团队如何把设计、工程与产品思维融合在一起。阅读