mcpField
D
design-engineering

design-engineering

github.com/rohitg00设计与 UI2.9k114 次安装5 周前更新
代码仓库

关于 design-engineering

design-engineering 是面向界面设计与实现工作的技能指南，帮助开发者依据使用频率、动效目的和交互状态调整界面细节。它还规定了 UI 代码审查的表格格式。

主要功能

  1. 01按频率判断是否使用动效
  2. 02提供缓动曲线与时长建议
  3. 03指导弹簧与组件动效
  4. 04强调减少动态效果支持
  5. 05规范间距、色彩与交互状态
  6. 06规定 UI 审查输出格式

适用场景

  1. 01决定快捷操作是否应有动效
  2. 02为弹窗和下拉菜单选择动画参数
  3. 03检查按钮反馈与减少动态效果支持
  4. 04按统一格式审查 UI 代码

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/rohitg00/pro-workflow --skill design-engineering

安装后在 Claude Code 中输入/design-engineering确认已加载。

详细介绍

设计工程

在大多数软件都足够好用的世界里，体验感才是差异化所在。 界面给人的恰到好处的感觉，大多来自用户不会有意识注意到的细节—— 也就是一系列细微而正确的选择所带来的整体效果。着眼于整体效果进行设计。

动效决策框架

编写任何动画前，按顺序回答以下问题。

1. 是否真的需要动画？

决定因素是使用频率。用户看到得越频繁，动效就越应该减少。

用户看到的频率决策
每天 100 次以上（快捷键、命令面板）绝不使用动画
每天数十次（悬停、列表导航）移除动画或大幅减少
偶尔（模态框、抽屉、Toast）使用标准动画
罕见或首次出现（引导、庆祝效果）可以增添惊喜

绝不要为键盘触发的操作添加动画。用户可能整天重复操作；动画会让操作显得迟缓，也让反馈与按键脱节。

2. 动画的目的是什么？

每个动画都必须能回答“它为什么要动？”合理的目的包括：保持空间一致性（从同一边进入和退出）、呈现状态变化、提供反馈（按下后确认界面已收到操作），或避免突兀地出现或消失。 “看起来很酷”并不是用户经常看到的动画的合理目的。

3. 使用什么缓动？
  • 进入或退出 -> ease-out（快速开始，感觉灵敏）。
  • 在屏幕上移动或变形 -> ease-in-out。
  • 悬停或颜色变化 -> ease。
  • 匀速运动（跑马灯、进度条） -> linear。

在 UI 中绝不要使用 ease-in。它会延迟动效开始的时刻——恰好是用户正在关注的时候——因此，300ms 的 ease-in 下拉菜单会比 300ms 的 ease-out 下拉菜单感觉更慢。内置曲线的效果较弱；请使用更强劲的自定义曲线：

--ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* UI interactions */
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* on-screen movement */
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* iOS-like drawer */
4. 动效多快？
元素时长
按钮按压反馈100-160ms
工具提示、小型弹出层125-200ms
下拉菜单、选择器150-250ms
模态框、抽屉200-500ms

频繁使用的交互式 UI 动效应控制在 300ms 以内；上表中模态框和抽屉的时长范围（最高 500ms）是特意为偶尔出现、首次出现的界面留出的例外。感知速度确实存在：在加载时长相同的情况下，转得更快的加载指示器会让加载感觉更快；而用户见过一次后，立即出现的工具提示会让整个工具栏都显得更灵敏。

弹簧动画

弹簧动画依据物理规律停止，而不是采用固定时长，因此显得更灵动；与 CSS 关键帧不同，即使被中断，也能保持速度。适用于用户可以在运动过程中反向操作的拖动和手势交互，以及装饰性、跟随鼠标的动效。弹跳应轻微（0.1 到 0.3），通常不使用——只在拖动关闭和有趣的时刻使用，不要用于功能性 UI。

组件体验感

  • 按压反馈。 任何可按压元素在 :active 状态下都应设置 transform: scale(0.97)，并添加约 160ms 的 ease-out 过渡。效果要微妙（0.95 到 0.98）；这会让界面显得有所响应。
  • 绝不要从 scale(0) 开始动画。 现实中的事物不会凭空出现。应从 scale(0.9) 或更高的值开始，并结合不透明度变化，让进入动效有形可感。
  • 以触发点为缩放原点。 弹出层和下拉菜单应从其原点缩放，而不是从中心缩放。模态框则保持居中。
  • 遵循 prefers-reduced-motion。 移除或缩短非必要动效。

视觉基础

  • 使用一套间距比例和一套字体比例。一致性体现用心；随意选取的数值则显得杂乱。
  • 克制使用颜色：角色明确的小型配色方案胜过繁多的点缀色。
  • 明确呈现每种交互状态——悬停、激活、键盘焦点可见、禁用。缺少状态反馈的控件会显得毫无生气。

审查格式

审查 UI 代码时，请输出一个 Markdown 表格，每个问题占一行，包含 Before | After | Why。不要另起单独的“Before:”／“After:”行。

BeforeAfterWhy
transition: all 300mstransition: transform 200ms ease-out明确指定属性；避免使用 all
transform: scale(0)scale(0.95); opacity: 0不会凭空出现
下拉菜单使用 ease-in强烈的 ease-outease-in 给人的感觉很迟缓
没有 :active 状态在 :active 上使用 scale(0.97)按下时必须有灵敏的响应

评论

支持 Markdown