提示词小卡

做按钮、列表项等交互态颜色时用：浅色/暗色模式共用一套 token，换背景也不「脏」。

交互色别写死 hex，按浅/深色模式用半透明黑/白叠在背景上，按钮始终能从底上「浮」起来。

💡design engineering tip: when working with interactive colors, do not use hardcoded hex codes  

📷 instead, use translucent b/w colors (based on light/dark mode) to always raise the buttons from the underground.

𝚕𝚒𝚗𝚔 𝚊𝚗𝚍 𝚌𝚘𝚍𝚎 𝚋𝚎𝚕𝚘𝚠 ↓

给产品加暗色模式、且界面大量用浅阴影时用：反转阴影会失效或发灰。

暗色模式不要简单反转阴影；仍需深度的元素用约 0.5–1px inset shadow。

💡design tip: if you are building a new dark mode, and you are using subtle shadows throughout the app, you might see, that inverting the shadow is not going to work.   

➡️instead, use a 0.5px/1px inset shadow for the elements that still need some depth on the app.

卡片、输入框、分隔边要「细线感」又怕实线 border 显钝时用。

边框用实线 border 还是 ring-shadow？Nick 站 ring-shadow 队。

border 🗑️ or ring-shadow ✨ as border – always a huge discussion, i am team ring-shadow

@grok what do you think?

按钮有 leading/trailing 图标，左右 padding 一样会显得图标侧太空时用。

带 leading/trailing 图标的按钮，图标侧用更小 padding；可用 span 包文字统一内边距。

💡design engineering tip: when using leading or tracking icons on buttons, do not just use the same padding as without

📷 instead, use a lower padding on the icon's side to make it visually pleasing.

✨ to make this easier, place a <𝚜𝚙𝚊𝚗 /> for the text, and use padding on it for more consistency

𝚌𝚘𝚍𝚎 𝚜𝚗𝚒𝚙𝚙𝚎𝚝 𝚋𝚎𝚕𝚘𝚠 ↓

设置页/卡片标题贴容器边缘、和正文不对齐时用。

卡片标题不要贴容器边，应与卡片内容同一水平 padding，保持视觉一致。

💡design engineering tip: when working with cards (especially in settings, but also anywhere else), do align the titles with the container itself  

📷 instead, give the title the same horizontal padding, as the content in the card, this helps maintaining visual consistency

𝚌𝚘𝚍𝚎 𝚜𝚗𝚒𝚙𝚙𝚎𝚝 𝚋𝚎𝚕𝚘𝚠 ↓

UI「说不出哪里怪」、组件类型/颜色都对但仍显挤或散时：先查间距。

UI 说不出哪里怪，先查间距：同组件只改 padding/gap 观感可完全不同。

Design tip: 
if your UI feels off but you can't say why, check the spacing first. Same chat widget, same type, same colors. Only padding and gaps changed.

工具栏/图标组上多个 tooltip 相邻切换，出现「淡出再淡入」闪烁时用。

同组 tooltip 不要淡出再开另一个；用 grouped tooltip（如 base-ui）无缝过渡，改动小、提升大。

💡design engineering tip: when using tooltips, that belong to "one group", do not let the tooltip fade out, and open another one  

✨ instead, use a grouped tooltip (base-ui makes this easy to use) and animate it seamlessly. small adjustment, huge uplift.

𝚌𝚘𝚍𝚎 𝚜𝚗𝚒𝚙𝚙𝚎𝚝 𝚋𝚎𝚕𝚘𝚠 ↓

操作频繁、toast 叠成一摞挡住内容、用户看不清「是否已完成」时用。

Toast 不要无限堆叠；用循环动画 + 轻微 bounce 表示任务已完成，减少视觉噪音。

💡design engineering tip: if you are using toasts, don't just create new toasts and stack every toast on each other. it confuses users, and creates a lot of visual noice.

📷 instead, use a cycling animation (a single animation won't work due to the browsers nature) with a slight bounce to visualize, that the task is already completed.

Tooltip 贴视口边缘被浏览器翻到另一侧，入场动画方向却还按原方向时用。

Tooltip 贴边会 fallback；用 Anchored Container Queries 让动画方向跟真实落点一致。

Design Engineering Tip

Your tooltip doesn't always end up where you placed it?

When it reaches the viewport edge, the browser automatically chooses a fallback position. Anchored Container Queries let your CSS detect that chosen position, so your tooltip can animate from the correct direction.

@ container anchored(fallback: flip-block) {

.tooltip {

animation-name: slide-from-top;

}

}

图标按钮、关闭叉、小开关等视觉很小、鼠标/手指难点准时用。

小点击目标务必加 hit slop；可用 ::before/::after 绝对定位扩大可点区域。

✍️ design engineer tip: always use hit slop areas on small elements, that are too small to click with the mouse or even pointers on mobile with your finger

👉 you can use pseudo elements for this such as `::after` or `::before` with a absolute positioning.

列表/侧栏项 hover 加了 transition-colors 后感觉拖沓、不跟手时用。

别给列表项乱加 transition-colors（显拖沓）；hover 即时上色、离开再淡出，形成类似鼠标拖尾的效果。

💡design engineering tip: do not randomly use `transition-colors` on all your elements – especially not on list items. it makes the UI not feel polished & laggy

📷 instead, remove the transition on hover, so that it fades out the color smoothly, and creates a subtle effect of a mouse trail (windows xp, I see you).

做下拉菜单/上下文菜单，点选后瞬间关掉、用户不确定点没点上时用。

学 macOS：菜单选中项先闪一下再关，确认点对了；Web 多数同帧就关。

Design Engineering Tip:
On macOS, a menu item blinks once before the menu closes. It confirms your click landed on the right item. Most web menus close on the same frame. 

A quick blink is enough:

async function select(item) {
setHighlighted(false)
await wait(90)
setHighlighted(true)
await wait(90)
closeMenu()
}

实现下拉刷新、抽屉/面板越界拖拽，线性橡皮筋越拉越远、失控时用。

弹性拖拽别用线性橡皮筋；用 iOS 式曲线，越拉越难且有上限。

Design Engineering Tip:
Try giving elastic drags a limit.
Most rubber-band effects are linear, so the further you pull, the further it stretches. iOS uses a curve instead: it resists more the further you go and never passes a maximum.

const rubberBand = (x, d, c = 0.55) =>
(1 - 1 / ((x * c) / d + 1)) * d

可拖分栏（IDE、邮件、文档预览）用户很难刚好拖到一半时用。

可拖分栏加 25/50/75 snap，松手轻靠，既可精确又可省心。

Design Engineering Tip:

If your UI has a draggable split view, don't make users land on perfect proportions by hand. Add sensible snap points—25 / 50 / 75—and let the handle gently settle on release. Users get precision when they need it, and a calmer interface when they don't.

按钮/操作暂时不可用，又不想用灰态文案打断流程时用。

不可用操作用短 shake 表达「还不行」，别让用户猜。

Design Engineering Tip:

Visual cues reduce uncertainty.

Instead of making users guess why an action isn't available, communicate it through motion. A small shake instantly signals "not yet" without interrupting the flow.

css .locked:hover{   animation:shake .28s cubic-bezier(.22,1,.36,1); }

元素位移动画走直线显得机械（卡片飞入、共享元素转场）时用。

直线运动偏机械；用 Motion 的 arc() 更像抛物线、更自然。

Design Engineering Tip:
Straight-line motion can feel a bit mechanical.
A subtle arc often makes it feel more natural, closer to how things move when you toss them.

Motion has arc() for this:
transition={{ path: arc({ strength: 0.9, rotate: 0.8 }) }}

用 Motion layout 做容器缩放/展开时，里面文字被一起「拉大」像图片时用。

Layout 动画别让文字被 scale；子节点用 layout="position" 只跟移、不变形。

Design Engineering Tip:

If text inside your container scales when the container animates, that's Motion's layout. It doesn't re-typeset the text - it scales it, like an image.

<motion.div layout> 
<motion.p layout="position"> “Your Text” </motion.p> </motion.div>
layout="position" moves the text with the container but keeps it at its real size.

网格/相册切换布局、筛选后卡片跳到新槽位显得「闪一下重渲」时用。

重排卡片用稳定 layoutId 动画位置/尺寸/圆角，像界面在重组而非重渲染；可加 arc()。

Design Engineering Tip

Make reordered cards keep their identity.
When a layout changes, cards shouldn't pop into new slots. Keep each item mounted with a stable ID and animate its position, size, and corner radius. The result feels like the interface is rearranging itself not re-rendering.
Add Motion's arc() to the movement path for a subtle curve. That small deviation from a straight line makes the transition feel more natural and physical.

<motion.div
  layoutId={card. id}
  animate={{
    left: layout.left,
    top: layout. top,
    width: layout.width,
    height: layout.height,
    borderRadius: layout.radius,
  }}
  transition={{ duration: 0.6, ease: "easeOut" }}
>
  <img src={card.image} alt="" />
</motion.div>

用户快速来回 hover/按压，动画还没播完就反向、出现顿挫时用。

用户可能中途反向；用 spring 保留当前速度，别从 0 重启。

Design Engineering Tip:

Most UI animations are built for a single uninterrupted transition. Real users might reverse direction before the animation finishes.

Use a spring transition that preserves the element's current velocity instead of restarting from zero. This keeps rapid hover, press, and state changes smooth and responsive.

transition={{
   type: "spring",
   stiffness: 520,
   damping: 38,
}}

仪表盘/作品集网格初次出现时「整屏同时弹出」太硬时用。

网格别一次全亮；用 stagger() 逐项延迟，可加轻微 rotate swing。

Design Engineering Tip:

Don't reveal a grid all at once.
Use stagger() to give every item a tiny delay.
You can add an extra motion detail to give the reveal more character, like this tiny swing.

import { stagger } from "motion"

animateView(update)
  .add(".item")
  .enter(
    { opacity: [0, 1], y: [12, 0], rotate: [-2, 0] },
    { delay: stagger(0.05, { from: "center" }) }
  )

多步向导/设置流程步骤切换只有淡入淡出、方向感不清时用。

多步流程别纯 fade；用 shared-axis（translateX）让下一步有「从哪来」。

Design Engineering Tip:
Don't just fade between steps.
Show users where the next step comes from.

Shared axis transitions make multi-step flows feel clearer and more intentional.
Snippet below shows how to structure it.

.step-enter {
  opacity: 0;
  transform: translateX(24px);
}

.step-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: 260ms ease;
}

.step-exit {
  opacity: 1;
  transform: translateX(0);
}

.step-exit-active {
  opacity: 0;
  transform: translateX(-24px);
  transition: 220ms ease;
}

作品卡片 hover 遮罩/标题出现动画总是同一方向、缺少空间感时用。

Hover 按光标进入方向驱动内容位移，卡片更有空间感。

Design Engineering Tip
Make hover interactions respond to where the cursor actually comes from.

Instead of revealing content with the same animation every time, detect the cursor entry direction and move the image + content accordingly. It makes a simple card feel much more spatial and responsive.

const direction = getDirection(event, ref.current);

const variants = {
  top: { y: 20 },
  bottom: { y: -20 },
  left: { x: 20 },
  right: { x: -20 },
};

元素有 idle 浮动，再叠加 hover shake 时浮动突然被掐断、弹回时用。

Idle 与交互动画同属性会互相顶掉；用 animation-composition: add 叠加。

Design Engineering Tip:

Ever wondered why an idle animation suddenly snaps back when you trigger another interaction?

It's often because both animations target the same property. By default, the later animation replaces the earlier one.

Instead of replacing your floating animation, compose the second one on top.

animation:
float 6s ease-in-out infinite,
shake 250ms ease;

animation-composition: replace, add;

打开 Modal 时整页横向跳一下（约 15px）时用：多半是滚动条被藏掉。

Modal 打开页面跳 15px 多半是滚动条消失；先用 scrollbar-gutter: stable 占位。

Design Engineering Tip:

If your whole page shifts 15px the moment a modal opens, it isn't the modal.

It's the scrollbar disappearing, because the library sets overflow: hidden on
the body to lock scrolling.

Reserve the space before you ever need it:

html {
  scrollbar-gutter: stable;
}

Modal/抽屉内容滚到顶或底时，背后页面跟着滚（滚动穿透）时用。

Modal 滚动穿透：加 overscroll-behavior: contain。

Design Engineering Tip
If your modal scrolls like this,
you're probably missing one CSS property:

overscroll-behavior: contain;

It prevents the page behind the modal from scrolling when users reach the top or bottom.

Modal 带动画且整层用了 backdrop-filter，打开/关闭卡顿或掉帧时用。

别把 backdrop-filter 直接打在 modal 上；放到伪层，动画时更省 paint/composite。

Design Engineering Tip:
Don't apply backdrop-filter directly to your modal.
Move the blur to a separate pseudo-layer instead.
Separating the blur from the content can reduce paint and compositing work, especially when animating the modal.

Code snippet below.

导航链接 hover 加粗后把旁边项挤开、布局抖动时用（需可变字体 GRAD 轴）。

Nav hover 加粗会挤布局；用可变字体 GRAD 轴变重不变宽。

Design Engineering Tip:
Making nav links bold on hover pushes everything next to them. Heavier weights are also wider.
Variable fonts with a grade axis get darker without getting wider:
a:hover {
font-variation-settings: "GRAD" 150;
}

FAQ/文档 Accordion：关闭态内容未渲染导致 ⌘F / Ctrl+F 搜不到时用。

Accordion 关着的内容用 hidden="until-found"，⌘F 仍可搜且匹配时自动展开。

Design Engineering Tip:

Your accordion breaks ⌘F.
If closed answers aren't rendered, the browser can't find them. hidden="until-found" hides the content but keeps it searchable, and the browser opens it on a match.

向 Claude/Codex 描述弹层组件、却说不清 Modal/Sheet/Drawer 区别时用。

给 Claude/Codex 用的 overlay 术语表：Modal、Popover、Tooltip、Toast、Sheet、Drawer（正文以视频为主）。

公开文字仅引导句；视频画面术语：Modal / Popover / Tooltip / Toast / Sheet / Drawer。

As more and more designers move into Design Engineering, here are some commonly used overlay terms that help you describe your UI to Claude or Codex more precisely. Save this for later.

让 AI 写滚动视差/吸顶/进度联动等动效，但描述词不准时用。

描述滚动动效给 Claude/Codex 用的常用术语（正文以视频为主；该帖 bookmark 过万）。

公开文字仅引导句；术语在视频内。

If you struggle to describe scroll animations in Claude or Codex, these commonly used terms can help. Save this for later.

做 AI Chat / Agent 界面：信息适合探索、却只回纯文本时用。

Chat 别总停在纯文本；信息可探索就上交互 UI。

Design Engineering Tip:
Chat interactions shouldn't always end with plain text.
Use interactive UI when it helps users explore, understand, or visualize information.

Don't just explain it. Make it explorable.

页面布局改动时要移动仍在播放的视频/嵌入 iframe，用 appendChild 会重播时用。

播放中的 iframe 用 moveBefore 挪位，避免 appendChild 重插导致重启。

Design Engineering Tip: 
Moving a playing embed to another spot with appendChild restarts it. The iframe is removed, then inserted again. moveBefore() moves it, and it keeps playing:

if ("moveBefore" in slot) slot.moveBefore(player, null)
else slot.insertBefore(player, null)

想要立体纸浪/轻 3D 装饰，但不想引入 Three.js 等重库时用。

不必上 3D 库：纯 SVG 逐帧投影也可做纸浪等 3D 感。

You don't always need a 3D library to create 3D effects.

This paper wave is pure SVG. Every point is projected into 3D space and redrawn frame by frame.