Cell & Stack
TOPIC §02

给 AI Coding 的前端交互词典

不会写前端也没关系。这份专题把 20 个最关键的前端交互术语挨个跑给你看：每条都有可交互 demo + 提示词模板，让你在用 AI 写前端时把效果说清楚。

20 STEPS · INTERACTIVE WALKTHROUGHBEGIN

Step 01 · Hover · 鼠标悬停

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Hover Card</title>    <style>      :root {        --bg: #faf8f3;        --fg: #1a1815;        --muted: #6b6760;        --border: #e6e1d4;        --card: #ffffff;      }      * { box-sizing: border-box; }      html, body { height: 100%; margin: 0; }      body {        background: var(--bg);        color: var(--fg);        font:          14px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',          'Hiragino Sans GB', sans-serif;        display: grid;        place-items: center;        padding: 32px;      }      .stage { width: 100%; max-width: 320px; }      .stage-label {        font:          500 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;        letter-spacing: 0.22em;        color: var(--muted);        text-transform: uppercase;        margin-bottom: 14px;      }      .card {        background: var(--card);        border: 1px solid var(--border);        border-radius: 12px;        padding: 18px 18px 16px;        cursor: pointer;        transition:          transform 200ms cubic-bezier(0.2, 0, 0, 1),          box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),          border-color 200ms ease;        box-shadow: 0 1px 0 rgba(20, 18, 14, 0.02);      }      .card:hover {        transform: translateY(-4px);        box-shadow:          0 12px 24px -8px rgba(20, 18, 14, 0.12),          0 2px 6px -2px rgba(20, 18, 14, 0.06);        border-color: color-mix(in oklab, var(--border) 60%, var(--fg));      }      .row { display: flex; align-items: center; gap: 10px; }      .dot {        width: 8px; height: 8px; border-radius: 999px;        background: #5b8def; flex: 0 0 auto;      }      .title { font-weight: 500; font-size: 14.5px; }      .desc {        margin: 8px 0 14px;        color: var(--muted);        font-size: 13px;        line-height: 1.55;      }      .meta {        display: flex; align-items: center; justify-content: space-between;        font:          500 11px/1 ui-monospace, SFMono-Regular, monospace;        color: var(--muted);        letter-spacing: 0.04em;      }      .arrow {        opacity: 0;        transform: translateX(-4px);        transition: opacity 200ms ease, transform 200ms ease;      }      .card:hover .arrow { opacity: 1; transform: translateX(0); }    </style>  </head>  <body>    <div class="stage">      <div class="stage-label">Hover the card</div>      <article class="card" tabindex="0">        <div class="row">          <span class="dot" aria-hidden="true"></span>          <h3 class="title">Atlas Migration</h3>        </div>        <p class="desc">迁移用户数据到新的存储集群，预计 4 月底完成。</p>        <div class="meta">          <span>UPDATED · 2D AGO</span>          <span class="arrow" aria-hidden="true">→</span>        </div>      </article>    </div>  </body></html>

很多人用 AI 写前端时，最大的障碍不是 AI 不会写代码，而是你说不清楚。

你说「做得高级一点」，AI 收到的是一团模糊。它的解决方案是加渐变、加阴影、加毛玻璃、加弹跳动画——最后页面看起来像「产品经理梦里的 SaaS 官网」混着「初学者第一次学 CSS」。

问题不在 AI 不努力，在前端交互本身就是一组状态组合。一个按钮看似简单，至少要处理：默认 / hover / pressed / disabled / loading / success / error 七种状态。你只说「写一个按钮」，AI 大概率给你一个静态壳子。

所以这份词典只想做一件事：

让没系统学过前端的人，也能在 AI Coding 时把想要的交互效果说清楚。

每条目左侧是一个可交互 demo（点 Source 切到源码看实现），右侧是定义、适用场景、和直接能拷给 AI 的提示词模板。

下面开始。先从最基础的视觉反馈说起。

1 · Hover：鼠标悬停效果

Hover 是最基础的视觉反馈：鼠标移到元素上，元素发生轻微变化。它告诉用户「这里能点」。

常见场景：按钮、卡片、导航菜单、商品列表、操作入口。

常见效果：背景色变深、轻微上浮 + 阴影增强、图片放大、显示隐藏的操作按钮。

不要只说「卡片加点交互感」——「交互感」是虚词。把变化讲清楚：

text
为卡片添加 hover 效果：鼠标悬停时卡片向上位移 4px，阴影增强，过渡时间 200ms，动画要自然克制。同时显示原本隐藏的右上角操作按钮。

注意 hover 在触屏上不存在，移动端要给一个等价的 active 态。

Step 02 · Focus · 输入聚焦

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Focus State</title>    <style>      :root {        --bg: #faf8f3;        --fg: #1a1815;        --muted: #6b6760;        --border: #d8d3c5;        --card: #ffffff;        --ring: #5b8def;        --error: #c34a3b;      }      * { box-sizing: border-box; }      html, body { height: 100%; margin: 0; }      body {        background: var(--bg);        color: var(--fg);        font:          14px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',          'Hiragino Sans GB', sans-serif;        display: grid;        place-items: center;        padding: 32px;      }      .stage { width: 100%; max-width: 320px; display: grid; gap: 18px; }      .stage-label {        font:          500 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;        letter-spacing: 0.22em;        color: var(--muted);        text-transform: uppercase;      }      .field { display: grid; gap: 6px; }      label {        font-size: 12px;        color: var(--muted);        font-weight: 500;        letter-spacing: 0.02em;      }      input {        appearance: none;        background: var(--card);        border: 1px solid var(--border);        border-radius: 8px;        padding: 10px 12px;        font: inherit;        color: var(--fg);        outline: none;        transition:          border-color 160ms ease,          box-shadow 160ms ease;      }      input::placeholder { color: color-mix(in oklab, var(--muted) 70%, transparent); }      input:hover { border-color: color-mix(in oklab, var(--border) 50%, var(--fg)); }      input:focus {        border-color: var(--ring);        box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent);      }      .field.error input {        border-color: var(--error);      }      .field.error input:focus {        box-shadow: 0 0 0 3px color-mix(in oklab, var(--error) 18%, transparent);      }      .hint {        font-size: 12px;        color: var(--muted);        min-height: 1em;      }      .field.error .hint { color: var(--error); }    </style>  </head>  <body>    <div class="stage">      <div class="stage-label">Click to focus</div>      <div class="field">        <label for="email">EMAIL</label>        <input id="email" type="email" placeholder="you@example.com" autocomplete="off" />        <div class="hint">输入框 focus 时边框变蓝并出现 focus ring。</div>      </div>      <div class="field error">        <label for="email-bad">EMAIL（校验失败示例）</label>        <input id="email-bad" type="email" value="not-an-email" autocomplete="off" />        <div class="hint">请输入有效的邮箱地址。</div>      </div>    </div>  </body></html>

2 · Focus：聚焦状态

Focus 出现在输入框、搜索框、表单控件上。它让用户明确知道「我现在正在编辑这个字段」，同时也是无障碍的关键——键盘用户全靠 focus 导航。

常见效果：边框变色、出现 focus ring（轻微外发光）、label 上移、显示辅助文案。

很多 AI 生成的表单看起来像半成品，就是因为只写了默认状态，没处理 focus / error / disabled。把这些一起喂给 AI：

text
输入框需要明确的 focus 状态：聚焦时边框变蓝，并出现 3px 半透明蓝色 focus ring；失焦后恢复。校验失败时边框变红，下方显示错误文案，错误状态保留用户输入。

focus ring 不是「视觉污染」，是基础设施。不要让 AI 用 outline: none 简单粗暴地干掉它。

Step 03 · Pressed · 按下反馈

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Pressed State</title>    <style>      :root {        --bg: #faf8f3;        --fg: #1a1815;        --muted: #6b6760;        --border: #d8d3c5;      }      * { box-sizing: border-box; }      html, body { height: 100%; margin: 0; }      body {        background: var(--bg);        color: var(--fg);        font: 14px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;        display: grid;        place-items: center;        padding: 32px;      }      .stage { display: grid; gap: 18px; place-items: center; }      .stage-label {        font: 500 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;        letter-spacing: 0.22em;        color: var(--muted);        text-transform: uppercase;      }      .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }      .btn {        appearance: none;        cursor: pointer;        font: inherit;        font-weight: 500;        padding: 10px 18px;        border-radius: 8px;        border: 1px solid var(--fg);        background: var(--fg);        color: #faf8f3;        transition: transform 100ms cubic-bezier(0.2, 0, 0, 1), background-color 120ms ease;        user-select: none;      }      .btn:hover { background: #2a2722; }      .btn:active { transform: scale(0.97); background: #000; }      .btn.ghost {        background: transparent;        color: var(--fg);      }      .btn.ghost:hover { background: rgba(20, 18, 14, 0.05); }      .btn.ghost:active { transform: scale(0.97); background: rgba(20, 18, 14, 0.1); }      .hint {        font-size: 12px;        color: var(--muted);        text-align: center;        max-width: 240px;      }    </style>  </head>  <body>    <div class="stage">      <div class="stage-label">Press &amp; hold</div>      <div class="row">        <button class="btn">Primary</button>        <button class="btn ghost">Ghost</button>      </div>      <p class="hint">按住时按钮缩到 0.97，模拟物理按下感。</p>    </div>  </body></html>

3 · Pressed / Active：按下状态

Pressed 是用户按下按钮的瞬间反馈。细节很小，但缺了它，按钮就「死」了——用户不确定自己到底点上了没有。

常见效果：按钮缩小到 0.96–0.98、背景色加深、阴影减弱、模拟物理按压。

text
按钮按下时缩到 0.97 倍，背景色略微加深；松开后用 100ms 过渡恢复。不要做夸张的弹跳或跳色。

记住：按钮不是蹦床。pressed 反馈的尺度是「能感觉到」，不是「看得见」。一旦视觉上明显，就过头了。

Step 04 · Loading · 提交反馈

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Loading State</title>    <style>      :root {        --bg: #faf8f3;        --fg: #1a1815;        --muted: #6b6760;        --border: #d8d3c5;        --ok: #2f8f5a;      }      * { box-sizing: border-box; }      html, body { height: 100%; margin: 0; }      body {        background: var(--bg);        color: var(--fg);        font: 14px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;        display: grid;        place-items: center;        padding: 32px;      }      .stage { display: grid; gap: 16px; place-items: center; }      .stage-label {        font: 500 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;        letter-spacing: 0.22em;        color: var(--muted);        text-transform: uppercase;      }      .btn {        position: relative;        appearance: none;        cursor: pointer;        font: inherit;        font-weight: 500;        padding: 10px 22px;        min-width: 156px;        border-radius: 8px;        border: 1px solid var(--fg);        background: var(--fg);        color: #faf8f3;        display: inline-flex;        align-items: center;        justify-content: center;        gap: 8px;        transition: background-color 120ms ease, opacity 160ms ease;        user-select: none;      }      .btn:hover { background: #2a2722; }      .btn[disabled] { cursor: not-allowed; opacity: 0.85; background: var(--fg); }      .btn[data-state='success'] { background: var(--ok); border-color: var(--ok); }      .spinner {        width: 14px; height: 14px;        border-radius: 999px;        border: 2px solid rgba(250, 248, 243, 0.35);        border-top-color: #faf8f3;        animation: spin 0.7s linear infinite;      }      @keyframes spin { to { transform: rotate(360deg); } }      .check {        width: 14px; height: 14px; display: inline-block;      }      .hint {        font-size: 12px;        color: var(--muted);        text-align: center;        max-width: 240px;      }    </style>  </head>  <body>    <div class="stage">      <div class="stage-label">Click submit</div>      <button class="btn" id="btn" type="button">        <span id="label">提交</span>      </button>      <p class="hint">点击后按钮禁用，文案变为「提交中...」并显示 spinner，1.6s 后切到 success 状态。</p>    </div>    <script>      (function () {        var btn = document.getElementById('btn');        var label = document.getElementById('label');        var state = 'idle';        function render() {          if (state === 'idle') {            btn.removeAttribute('data-state');            btn.removeAttribute('disabled');            btn.innerHTML = '<span id="label">提交</span>';          } else if (state === 'loading') {            btn.setAttribute('data-state', 'loading');            btn.setAttribute('disabled', 'true');            btn.innerHTML = '<span class="spinner" aria-hidden="true"></span><span>提交中…</span>';          } else if (state === 'success') {            btn.setAttribute('data-state', 'success');            btn.setAttribute('disabled', 'true');            btn.innerHTML = '<svg class="check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 8.5 6.5 12 13 4.5"/></svg><span>已提交</span>';          }        }        btn.addEventListener('click', function () {          if (state !== 'idle') return;          state = 'loading';          render();          setTimeout(function () {            state = 'success';            render();            setTimeout(function () {              state = 'idle';              render();            }, 1400);          }, 1600);        });      })();    </script>  </body></html>

4 · Loading：加载状态

很多新手用 AI 写前端只关注正常路径。但真实产品里，请求数据、提交表单、上传文件都需要 loading 状态——否则用户点击按钮后不知道系统有没有收到。

Loading 不是「转个圈」，它是一组协同动作：禁用按钮防止重复提交、改文案告知正在做什么、视觉上给一个进行中的指示。

text
提交按钮点击后进入 loading 状态：按钮禁用、左侧显示 spinner、文案从「提交」变为「提交中...」。请求成功后切到 success 态（绿色 + 对勾 + 「已提交」文案），1.5s 后恢复到默认态；失败时切到 error 态并显示错误文案。

按钮自身就能承载完整的「idle → loading → success」状态机，比单独弹个 toast 更聚焦。

Step 05 · Skeleton · 骨架屏

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Skeleton Loading</title>    <style>      :root {        --bg: #faf8f3;        --fg: #1a1815;        --muted: #6b6760;        --border: #e6e1d4;        --card: #ffffff;        --shimmer-1: #ece8dd;        --shimmer-2: #f4f1e8;      }      * { box-sizing: border-box; }      html, body { height: 100%; margin: 0; }      body {        background: var(--bg);        color: var(--fg);        font: 14px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;        display: grid;        place-items: center;        padding: 32px;      }      .stage { width: 100%; max-width: 320px; }      .stage-label {        display: flex;        justify-content: space-between;        align-items: baseline;        font: 500 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;        letter-spacing: 0.22em;        color: var(--muted);        text-transform: uppercase;        margin-bottom: 14px;      }      .reload {        cursor: pointer;        background: none;        border: 0;        font: inherit;        color: var(--muted);        text-transform: uppercase;        letter-spacing: 0.22em;        padding: 4px 0;      }      .reload:hover { color: var(--fg); }      .list { display: grid; gap: 10px; }      .row {        background: var(--card);        border: 1px solid var(--border);        border-radius: 10px;        padding: 14px 16px;        display: grid;        gap: 8px;      }      .skeleton .bar {        height: 10px;        border-radius: 4px;        background: linear-gradient(90deg, var(--shimmer-1) 0%, var(--shimmer-2) 50%, var(--shimmer-1) 100%);        background-size: 200% 100%;        animation: shimmer 1.4s ease-in-out infinite;      }      .skeleton .bar.w-60 { width: 60%; }      .skeleton .bar.w-90 { width: 90%; height: 8px; }      .skeleton .bar.w-40 { width: 40%; height: 8px; }      @keyframes shimmer {        0% { background-position: 200% 0; }        100% { background-position: -200% 0; }      }      .real .title { font-size: 14px; font-weight: 500; }      .real .desc { font-size: 12.5px; color: var(--muted); }      .real .meta { font: 500 10.5px/1 ui-monospace, monospace; color: var(--muted); letter-spacing: 0.04em; }      .row { transition: opacity 220ms ease; }      .row[hidden] { display: none; }    </style>  </head>  <body>    <div class="stage">      <div class="stage-label">        <span>Loading list</span>        <button class="reload" id="reload" type="button">Reload</button>      </div>      <div class="list" id="list"></div>    </div>    <script>      (function () {        var list = document.getElementById('list');        var reload = document.getElementById('reload');        var data = [          { title: 'Atlas Migration', desc: '迁移用户数据到新存储集群', meta: 'UPDATED · 2D AGO' },          { title: 'Billing Refactor', desc: '订阅与发票模块重构', meta: 'UPDATED · 5D AGO' },          { title: 'Mobile Onboarding', desc: '新版引导流程改造', meta: 'UPDATED · 1W AGO' },        ];        function renderSkeleton() {          list.innerHTML = '';          for (var i = 0; i < 3; i++) {            var row = document.createElement('div');            row.className = 'row skeleton';            row.innerHTML = '<div class="bar w-60"></div><div class="bar w-90"></div><div class="bar w-40"></div>';            list.appendChild(row);          }        }        function renderReal() {          list.innerHTML = '';          data.forEach(function (item) {            var row = document.createElement('div');            row.className = 'row real';            row.innerHTML =              '<div class="title">' + item.title + '</div>' +              '<div class="desc">' + item.desc + '</div>' +              '<div class="meta">' + item.meta + '</div>';            list.appendChild(row);          });        }        function cycle() {          renderSkeleton();          setTimeout(renderReal, 1800);        }        reload.addEventListener('click', cycle);        cycle();      })();    </script>  </body></html>

5 · Skeleton：骨架屏

Skeleton 是另一种 loading 形态。不是简单地转个圈，而是用灰色占位块预先模拟真实页面结构。读者在数据回来前就能感知到「这里有 3 张卡片，每张卡有标题和描述」。

适合场景：列表页、卡片流、详情页、信息流。简言之，结构稳定、占位有意义的地方都比 spinner 强。

text
列表数据加载时使用 skeleton：占位结构需要接近真实卡片布局——标题 60% 宽、描述 90% 宽两行、底部 meta 40% 宽；用 1.4s 的 shimmer 动画提示加载中。数据回来后平滑替换为真实内容。

骨架屏的灵魂是「形状对得上」。如果 skeleton 和真实内容布局差太远，切换时会跳，反而比 spinner 更糟。

Step 06 · Empty State · 空状态

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Empty State</title>    <style>      :root {        --bg: #faf8f3;        --fg: #1a1815;        --muted: #6b6760;        --border: #d8d3c5;        --card: #ffffff;      }      * { box-sizing: border-box; }      html, body { height: 100%; margin: 0; }      body {        background: var(--bg);        color: var(--fg);        font: 14px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;        display: grid;        place-items: center;        padding: 32px;      }      .stage { width: 100%; max-width: 340px; }      .panel {        border: 1px dashed var(--border);        border-radius: 12px;        background: var(--card);        padding: 36px 24px 28px;        text-align: center;        display: grid;        gap: 14px;        place-items: center;      }      .icon {        width: 56px; height: 56px;        display: grid; place-items: center;        border-radius: 14px;        background: #f0ebde;        color: var(--muted);      }      .title { font-size: 15px; font-weight: 500; margin: 0; }      .desc {        font-size: 13px;        color: var(--muted);        margin: 0;        max-width: 240px;        line-height: 1.6;      }      .cta {        margin-top: 6px;        appearance: none;        cursor: pointer;        font: inherit;        font-weight: 500;        padding: 8px 16px;        border-radius: 8px;        border: 1px solid var(--fg);        background: var(--fg);        color: #faf8f3;        transition: background-color 120ms ease;      }      .cta:hover { background: #2a2722; }    </style>  </head>  <body>    <div class="stage">      <div class="panel">        <div class="icon" aria-hidden="true">          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">            <rect x="3" y="5" width="18" height="14" rx="2" />            <path d="M3 10h18" />            <path d="M9 15h6" />          </svg>        </div>        <h3 class="title">还没有项目</h3>        <p class="desc">创建第一个项目，把任务、文档和成员组织在一起。</p>        <button class="cta" type="button">+ 创建项目</button>      </div>    </div>  </body></html>

6 · Empty State：空状态

空状态是最容易被忽略的交互。用户第一次进入项目列表、还没创建任何项目时，页面不能只是空白——空白会让人怀疑：加载失败了？没权限？系统坏了？

好的空状态应该回答两件事：当前为什么是空的，以及下一步可以做什么。

text
当列表为空时显示 empty state：- 一个简洁的图标（线性风格，避免插画过度）- 一句说明文案，例如「还没有项目」- 一句副文案告诉用户这个页面是做什么的- 一个主 CTA 按钮，引导用户去创建搜索无结果场景：文案改为「没有找到匹配结果」，CTA 改为「清空筛选条件」。

空状态不是边角料。新用户的第一印象，就从这里开始。

Step 07 · Error State · 错误状态

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Error State</title>    <style>      :root {        --bg: #faf8f3;        --fg: #1a1815;        --muted: #6b6760;        --border: #d8d3c5;        --card: #ffffff;        --danger: #b9473d;      }      * { box-sizing: border-box; }      html, body { height: 100%; margin: 0; }      body {        background: var(--bg);        color: var(--fg);        font: 14px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;        display: grid;        place-items: center;        padding: 32px;      }      .stage { width: 100%; max-width: 360px; }      .panel {        background: var(--card);        border: 1px solid var(--border);        border-radius: 12px;        padding: 22px;        display: grid;        gap: 14px;        box-shadow: 0 1px 0 rgba(20, 18, 14, 0.03);      }      .icon {        width: 38px; height: 38px; border-radius: 10px;        display: grid; place-items: center;        background: #f5e4df;        color: var(--danger);      }      h3 { margin: 0; font-size: 15px; font-weight: 600; }      p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }      button {        justify-self: start;        appearance: none;        border: 1px solid var(--fg);        background: var(--fg);        color: var(--bg);        border-radius: 8px;        padding: 8px 14px;        font: inherit;        font-weight: 500;        cursor: pointer;        transition: transform 120ms ease, background-color 160ms ease, opacity 160ms ease;      }      button:hover { background: #2a2722; }      button:active { transform: scale(0.98); }      button[disabled] { opacity: 0.75; cursor: wait; }      .status { font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }    </style>  </head>  <body>    <section class="stage">      <div class="panel" id="panel">        <div class="status">Request failed</div>        <div class="icon" aria-hidden="true">          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">            <path d="M12 8v5" /><path d="M12 17h.01" /><path d="M10.3 4.4 2.7 17.5A2 2 0 0 0 4.4 20h15.2a2 2 0 0 0 1.7-2.5L13.7 4.4a2 2 0 0 0-3.4 0Z" />          </svg>        </div>        <h3>数据加载失败</h3>        <p>网络连接不稳定。保留当前页面结构，并给用户一个明确的重试入口。</p>        <button id="retry" type="button">重新加载</button>      </div>    </section>    <script>      (function () {        var retry = document.getElementById('retry');        retry.addEventListener('click', function () {          retry.disabled = true;          retry.textContent = '加载中...';          setTimeout(function () {            retry.disabled = false;            retry.textContent = '重新加载';          }, 1300);        });      })();    </script>  </body></html>

7 · Error State：错误状态

Error state 是请求失败、权限不足、表单校验失败时的展示状态。

很多 AI 生成的页面最大的问题是：只处理成功，不处理失败。但真实世界里，请求会失败，网络会抖，接口会报错，用户会乱填。所以错误状态不是异常情况，错误状态是产品体验的一部分。

text
请求失败时显示 error state，不要让页面空白。展示错误说明和「重新加载」按钮，用户点击后重新请求数据。

表单错误要更具体：

text
表单提交失败时，在对应字段下方显示错误文案，并保留用户已经输入的内容，不要清空表单。

权限错误也不要只丢一个 403：

text
如果用户没有权限访问该页面，显示权限不足状态，说明原因，并提供返回首页按钮。

Step 08 · Toast · 轻提示

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Toast</title>    <style>      :root { --bg:#faf8f3; --fg:#1a1815; --muted:#6b6760; --border:#d8d3c5; --card:#fff; --ok:#2f8f5a; }      * { box-sizing: border-box; }      html, body { height: 100%; margin: 0; }      body {        background: var(--bg); color: var(--fg);        font: 14px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;        display: grid; place-items: center; padding: 32px; overflow: hidden;      }      .stage { display: grid; place-items: center; gap: 14px; }      button {        appearance: none; cursor: pointer; font: inherit; font-weight: 500;        padding: 9px 16px; border-radius: 8px; border: 1px solid var(--fg);        background: var(--fg); color: var(--bg);        transition: transform 120ms ease, background-color 160ms ease;      }      button:hover { background: #2a2722; }      button:active { transform: scale(0.98); }      .hint { margin: 0; color: var(--muted); font-size: 12px; }      .toast {        position: fixed; top: 22px; right: 22px; width: min(300px, calc(100vw - 44px));        background: var(--card); border: 1px solid var(--border); border-radius: 10px;        padding: 12px 14px; display: flex; gap: 10px; align-items: flex-start;        box-shadow: 0 16px 32px -20px rgba(20, 18, 14, 0.35);        opacity: 0; transform: translateY(-8px);        pointer-events: none; transition: opacity 180ms ease, transform 180ms ease;      }      .toast[data-open='true'] { opacity: 1; transform: translateY(0); }      .dot { width: 18px; height: 18px; border-radius: 999px; background: #e0f0e6; color: var(--ok); display: grid; place-items: center; flex: 0 0 auto; }      .title { font-weight: 600; font-size: 13px; }      .desc { color: var(--muted); font-size: 12px; margin-top: 2px; }    </style>  </head>  <body>    <div class="stage">      <button id="copy" type="button">复制邀请链接</button>      <p class="hint">轻量操作成功后，用 toast 给短反馈。</p>    </div>    <div class="toast" id="toast" role="status" aria-live="polite">      <span class="dot" aria-hidden="true">        <svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 8.5 6.5 12 13 4.5"/></svg>      </span>      <div><div class="title">已复制到剪贴板</div><div class="desc">2 秒后自动消失，不打断当前流程。</div></div>    </div>    <script>      (function () {        var btn = document.getElementById('copy');        var toast = document.getElementById('toast');        var timer;        btn.addEventListener('click', function () {          clearTimeout(timer);          toast.setAttribute('data-open', 'true');          timer = setTimeout(function () { toast.setAttribute('data-open', 'false'); }, 2000);        });      })();    </script>  </body></html>

8 · Toast：轻提示

Toast 是一种轻量反馈，常用于保存成功、删除成功、复制成功、操作失败、网络异常。它通常出现在页面右上角、顶部或底部，几秒后自动消失。

text
操作成功后显示 toast 提示，位置在右上角，持续 2 秒后自动消失；失败时显示红色错误 toast，并保留明确的错误文案。

复制按钮可以这样写：

text
用户点击复制按钮后，显示 toast：「已复制到剪贴板」，持续 2 秒后自动消失。

Toast 适合轻提示，但不要什么都用 toast。删除项目、支付确认、重要配置变更这类不可逆操作，需要 modal 做二次确认。

Step 09 · Modal · 二次确认

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Modal Dialog</title>    <style>      :root { --bg:#faf8f3; --fg:#1a1815; --muted:#6b6760; --border:#d8d3c5; --card:#fff; --danger:#b9473d; }      * { box-sizing: border-box; }      html, body { height: 100%; margin: 0; }      body { background: var(--bg); color: var(--fg); font: 14px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif; display: grid; place-items: center; padding: 32px; }      .btn { appearance:none; cursor:pointer; font:inherit; font-weight:500; border-radius:8px; padding:9px 15px; border:1px solid var(--border); background:var(--card); color:var(--fg); transition:background-color 160ms ease, transform 120ms ease; }      .btn:hover { background:#f2eee5; }      .btn:active { transform:scale(0.98); }      .btn.danger { border-color:var(--danger); background:var(--danger); color:#fffaf5; }      .btn.danger:hover { background:#a63d35; }      .overlay { position:fixed; inset:0; display:grid; place-items:center; padding:24px; background:rgba(26,24,21,0.28); opacity:0; pointer-events:none; transition:opacity 180ms ease; }      .overlay[data-open='true'] { opacity:1; pointer-events:auto; }      .dialog { width:min(360px,100%); background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px; box-shadow:0 24px 50px -28px rgba(20,18,14,0.5); transform:translateY(8px) scale(0.98); transition:transform 180ms cubic-bezier(0.2,0,0,1); }      .overlay[data-open='true'] .dialog { transform:translateY(0) scale(1); }      h3 { margin:0 0 8px; font-size:16px; }      p { margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.6; }      .actions { display:flex; justify-content:flex-end; gap:8px; }    </style>  </head>  <body>    <button class="btn danger" id="open" type="button">删除项目</button>    <div class="overlay" id="overlay" aria-hidden="true">      <section class="dialog" role="dialog" aria-modal="true" aria-labelledby="title">        <h3 id="title">确认删除项目？</h3>        <p>这个操作不可撤销。删除前用 modal 打断流程，让用户明确确认。</p>        <div class="actions">          <button class="btn" id="cancel" type="button">取消</button>          <button class="btn danger" id="confirm" type="button">确认删除</button>        </div>      </section>    </div>    <script>      (function () {        var overlay = document.getElementById('overlay');        var open = document.getElementById('open');        var cancel = document.getElementById('cancel');        var confirm = document.getElementById('confirm');        function setOpen(value) { overlay.setAttribute('data-open', value ? 'true' : 'false'); overlay.setAttribute('aria-hidden', value ? 'false' : 'true'); }        open.addEventListener('click', function () { setOpen(true); });        cancel.addEventListener('click', function () { setOpen(false); });        confirm.addEventListener('click', function () { setOpen(false); });        overlay.addEventListener('click', function (event) { if (event.target === overlay) setOpen(false); });        document.addEventListener('keydown', function (event) { if (event.key === 'Escape') setOpen(false); });      })();    </script>  </body></html>

9 · Modal / Dialog：弹窗

Modal 是弹窗，通常用于需要用户集中注意力处理的事情。

常见场景：删除确认、创建项目、编辑信息、登录注册、重要提示、表单填写。

Modal 的特点是：它会打断当前流程，让用户先处理弹窗里的事情。

text
删除操作需要二次确认弹窗：点击删除后打开 modal，背景加半透明遮罩；弹窗包含标题、说明文案、取消按钮和确认删除按钮；点击取消或 ESC 关闭，点击确认后执行删除。

创建表单可以这样说：

text
点击「新建项目」后打开 modal，里面包含项目名称和描述输入框。提交时进入 loading 状态，成功后关闭 modal 并刷新列表，失败时在 modal 内显示错误信息。

Modal 不是万能容器。如果只是展示侧边详情，用 drawer 可能更合适。

Step 10 · Drawer · 侧边抽屉

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Drawer</title>    <style>      :root { --bg:#faf8f3; --fg:#1a1815; --muted:#6b6760; --border:#d8d3c5; --card:#fff; }      * { box-sizing: border-box; }      html, body { height: 100%; margin: 0; }      body { background:var(--bg); color:var(--fg); font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif; display:grid; place-items:center; padding:28px; overflow:hidden; }      .list { width:min(360px,100%); background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }      .row { width:100%; appearance:none; border:0; border-bottom:1px solid var(--border); background:transparent; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; text-align:left; cursor:pointer; font:inherit; color:var(--fg); transition:background-color 160ms ease; }      .row:last-child { border-bottom:0; }      .row:hover { background:#f4f0e8; }      .meta { color:var(--muted); font-size:12px; }      .overlay { position:fixed; inset:0; background:rgba(26,24,21,0.22); opacity:0; pointer-events:none; transition:opacity 180ms ease; }      .overlay[data-open='true'] { opacity:1; pointer-events:auto; }      .drawer { position:fixed; top:0; right:0; height:100%; width:min(360px,88vw); background:var(--card); border-left:1px solid var(--border); padding:22px; transform:translateX(100%); transition:transform 220ms cubic-bezier(0.2,0,0,1); box-shadow:-20px 0 40px -30px rgba(20,18,14,0.45); }      .overlay[data-open='true'] .drawer { transform:translateX(0); }      .top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }      h3 { margin:0; font-size:16px; }      .close { appearance:none; border:1px solid var(--border); background:var(--bg); border-radius:8px; width:32px; height:32px; cursor:pointer; }      p { margin:0 0 14px; color:var(--muted); font-size:13px; line-height:1.65; }      .chip { display:inline-flex; border:1px solid var(--border); border-radius:999px; padding:4px 9px; font-size:12px; color:var(--muted); }    </style>  </head>  <body>    <div class="list">      <button class="row" type="button"><span>Atlas Migration</span><span class="meta">查看详情</span></button>      <button class="row" type="button"><span>Search Rewrite</span><span class="meta">查看详情</span></button>      <button class="row" type="button"><span>Billing Audit</span><span class="meta">查看详情</span></button>    </div>    <div class="overlay" id="overlay">      <aside class="drawer" aria-label="项目详情">        <div class="top"><h3>Atlas Migration</h3><button class="close" id="close" type="button">×</button></div>        <p>Drawer 保留了列表上下文，适合详情预览、筛选面板和轻量编辑。</p>        <span class="chip">In progress</span>      </aside>    </div>    <script>      (function () {        var overlay = document.getElementById('overlay');        var close = document.getElementById('close');        function setOpen(value) { overlay.setAttribute('data-open', value ? 'true' : 'false'); }        Array.prototype.forEach.call(document.querySelectorAll('.row'), function (row) { row.addEventListener('click', function () { setOpen(true); }); });        close.addEventListener('click', function () { setOpen(false); });        overlay.addEventListener('click', function (event) { if (event.target === overlay) setOpen(false); });      })();    </script>  </body></html>

10 · Drawer：抽屉

Drawer 是从页面侧边滑出的面板，常见方向是从右侧或左侧滑出。

适合场景：详情预览、设置面板、筛选条件、移动端菜单、保持当前页面上下文的编辑操作。

Modal 是打断流程，Drawer 更像是在当前页面旁边展开一块内容。

text
点击列表项后，从右侧滑出 drawer 展示详情。drawer 宽度为 420px，背景页面保留但加遮罩，关闭时向右滑出。

移动端菜单可以这样说：

text
移动端点击汉堡菜单后，从左侧滑出 drawer 导航菜单，背景加遮罩，点击遮罩或关闭按钮时收起。

Drawer 很适合后台管理系统，因为它可以让用户在不离开列表页的情况下查看详情。

Step 11 · Dropdown · 下拉菜单

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Dropdown Menu</title>    <style>      :root { --bg:#faf8f3; --fg:#1a1815; --muted:#6b6760; --border:#d8d3c5; --card:#fff; --danger:#b9473d; }      * { box-sizing:border-box; }      html, body { height:100%; margin:0; }      body { background:var(--bg); color:var(--fg); font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif; display:grid; place-items:center; padding:32px; }      .card { width:280px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; position:relative; box-shadow:0 1px 0 rgba(20,18,14,0.03); }      .top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }      h3 { margin:0; font-size:15px; }      p { margin:6px 0 0; color:var(--muted); font-size:12px; }      .more { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); background:var(--bg); cursor:pointer; font:700 16px/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--muted); transition:background-color 160ms ease; }      .more:hover { background:#f0ebe1; }      .menu { position:absolute; top:50px; right:14px; min-width:148px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:6px; box-shadow:0 14px 30px -22px rgba(20,18,14,0.4); opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity 150ms ease, transform 150ms ease; }      .menu[data-open='true'] { opacity:1; transform:translateY(0); pointer-events:auto; }      .item { width:100%; border:0; background:transparent; border-radius:7px; padding:8px 9px; text-align:left; cursor:pointer; font:inherit; font-size:13px; color:var(--fg); }      .item:hover { background:#f4f0e8; }      .item.danger { color:var(--danger); }    </style>  </head>  <body>    <article class="card">      <div class="top">        <div><h3>Project Card</h3><p>更多操作放进 dropdown，避免卡片拥挤。</p></div>        <button class="more" id="more" type="button" aria-expanded="false">···</button>      </div>      <div class="menu" id="menu">        <button class="item" type="button">编辑</button>        <button class="item" type="button">复制</button>        <button class="item danger" type="button">删除</button>      </div>    </article>    <script>      (function () {        var more = document.getElementById('more');        var menu = document.getElementById('menu');        function setOpen(value) { menu.setAttribute('data-open', value ? 'true' : 'false'); more.setAttribute('aria-expanded', value ? 'true' : 'false'); }        more.addEventListener('click', function (event) { event.stopPropagation(); setOpen(menu.getAttribute('data-open') !== 'true'); });        document.addEventListener('click', function () { setOpen(false); });      })();    </script>  </body></html>

11 · Dropdown：下拉菜单

Dropdown 是点击某个入口后出现的菜单。

常见场景：用户头像菜单、更多操作、选择器、排序条件、批量操作。

text
头像点击后显示 dropdown 菜单，包含个人设置、账单、退出登录三个选项；点击页面其他区域时自动关闭，下拉出现时添加 150ms 的淡入和位移动画。

更多操作按钮可以这样说：

text
卡片右上角的更多按钮点击后显示 dropdown，包含「编辑 / 复制 / 删除」三个操作。删除操作使用危险色，并点击后打开确认 modal。

Dropdown 的细节别漏：点击外部要关闭、菜单项要有 hover 状态、当前选中项最好高亮、危险操作要有区分。

Step 12 · Tooltip · 悬浮提示

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Tooltip</title>    <style>      :root { --bg:#faf8f3; --fg:#1a1815; --muted:#6b6760; --border:#d8d3c5; --card:#fff; }      * { box-sizing:border-box; }      html, body { height:100%; margin:0; }      body { background:var(--bg); color:var(--fg); font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif; display:grid; place-items:center; padding:32px; }      .field { width:300px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; }      .label { display:flex; align-items:center; gap:7px; font-weight:500; margin-bottom:9px; }      .info { position:relative; width:18px; height:18px; border-radius:999px; border:1px solid var(--border); display:grid; place-items:center; color:var(--muted); cursor:help; font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }      .tip { position:absolute; left:50%; bottom:calc(100% + 9px); transform:translate(-50%, 4px); width:max-content; max-width:220px; background:var(--fg); color:var(--bg); border-radius:8px; padding:7px 9px; font:500 12px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC',sans-serif; opacity:0; pointer-events:none; transition:opacity 150ms ease, transform 150ms ease; }      .info:hover .tip, .info:focus-visible .tip { opacity:1; transform:translate(-50%,0); }      .input { height:40px; border:1px solid var(--border); border-radius:8px; padding:0 11px; color:var(--muted); display:flex; align-items:center; }    </style>  </head>  <body>    <div class="field">      <div class="label">        API Key        <span class="info" tabindex="0">i<span class="tip">只展示一次，请复制后妥善保存。</span></span>      </div>      <div class="input">sk_live_••••••••••••</div>    </div>  </body></html>

12 · Tooltip：悬浮提示

Tooltip 是鼠标悬停时出现的小提示，适合解释一个图标、字段、按钮的含义。

text
为信息图标添加 tooltip，鼠标悬停时显示字段说明，位置在图标上方，内容不要超过一行。

禁用按钮也可以用 tooltip 解释原因：

text
禁用按钮 hover 时显示 tooltip，解释为什么当前不可点击。

Tooltip 适合短内容。不要把一大段说明塞进 tooltip。如果内容比较长，可以用 popover。

Step 13 · Popover · 气泡卡片

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Popover</title>    <style>      :root { --bg:#faf8f3; --fg:#1a1815; --muted:#6b6760; --border:#d8d3c5; --card:#fff; }      * { box-sizing:border-box; }      html, body { height:100%; margin:0; }      body { background:var(--bg); color:var(--fg); font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif; display:grid; place-items:center; padding:32px; }      .wrap { position:relative; }      .trigger { appearance:none; cursor:pointer; font:inherit; font-weight:500; padding:9px 15px; border-radius:8px; border:1px solid var(--fg); background:var(--fg); color:var(--bg); }      .panel { position:absolute; top:calc(100% + 10px); left:50%; width:260px; transform:translate(-50%, -4px); background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow:0 18px 36px -26px rgba(20,18,14,0.45); opacity:0; pointer-events:none; transition:opacity 160ms ease, transform 160ms ease; }      .panel[data-open='true'] { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }      h3 { margin:0 0 7px; font-size:14px; }      p { margin:0 0 12px; color:var(--muted); font-size:12.5px; line-height:1.6; }      .filters { display:flex; flex-wrap:wrap; gap:6px; }      .chip { border:1px solid var(--border); border-radius:999px; padding:5px 9px; background:var(--bg); color:var(--muted); font-size:12px; }    </style>  </head>  <body>    <div class="wrap">      <button class="trigger" id="trigger" type="button">筛选条件</button>      <section class="panel" id="panel">        <h3>快速筛选</h3>        <p>Popover 可以承载比 tooltip 更复杂的轻量内容，比如说明、链接或小表单。</p>        <div class="filters"><span class="chip">全部</span><span class="chip">进行中</span><span class="chip">已归档</span></div>      </section>    </div>    <script>      (function () {        var trigger = document.getElementById('trigger');        var panel = document.getElementById('panel');        trigger.addEventListener('click', function (event) {          event.stopPropagation();          panel.setAttribute('data-open', panel.getAttribute('data-open') !== 'true' ? 'true' : 'false');        });        document.addEventListener('click', function () { panel.setAttribute('data-open', 'false'); });      })();    </script>  </body></html>

13 · Popover：气泡卡片

Popover 和 tooltip 有点像，但它能承载更多内容。Tooltip 通常是短文本，Popover 可以放说明、链接、小表单、快捷操作。

text
点击「更多信息」后显示 popover，内容包含一段说明和一个「查看详情」链接；点击外部区域时关闭。

筛选面板可以这样说：

text
点击筛选按钮后显示 popover，里面包含状态筛选、时间范围筛选和重置按钮。

Popover 适合轻量但不至于简单到 tooltip 的内容。

Step 14 · Tabs · 标签页

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Tabs</title>    <style>      :root { --bg:#faf8f3; --fg:#1a1815; --muted:#6b6760; --border:#d8d3c5; --card:#fff; }      * { box-sizing:border-box; }      html, body { height:100%; margin:0; }      body { background:var(--bg); color:var(--fg); font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif; display:grid; place-items:center; padding:32px; }      .panel { width:min(360px,100%); background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; }      .tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; background:#f0ebe1; border-radius:9px; padding:4px; margin-bottom:14px; }      .tab { appearance:none; border:0; border-radius:7px; background:transparent; padding:7px 8px; cursor:pointer; font:inherit; font-size:13px; color:var(--muted); transition:background-color 150ms ease, color 150ms ease; }      .tab[aria-selected='true'] { background:var(--card); color:var(--fg); box-shadow:0 1px 0 rgba(20,18,14,0.04); }      .content { min-height:92px; border:1px solid var(--border); border-radius:10px; padding:14px; opacity:1; transition:opacity 150ms ease; }      h3 { margin:0 0 7px; font-size:15px; }      p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }    </style>  </head>  <body>    <section class="panel">      <div class="tabs" role="tablist">        <button class="tab" aria-selected="true" data-tab="overview" type="button">概览</button>        <button class="tab" aria-selected="false" data-tab="members" type="button">成员</button>        <button class="tab" aria-selected="false" data-tab="settings" type="button">设置</button>      </div>      <div class="content" id="content"><h3>项目概览</h3><p>Tabs 用来切换同一层级下的平级内容。</p></div>    </section>    <script>      (function () {        var copy = {          overview: ['项目概览', 'Tabs 用来切换同一层级下的平级内容。'],          members: ['成员管理', '切换时只替换内容区域，顶部结构保持稳定。'],          settings: ['项目设置', '当前 tab 需要明确高亮，避免用户迷路。']        };        var content = document.getElementById('content');        Array.prototype.forEach.call(document.querySelectorAll('.tab'), function (tab) {          tab.addEventListener('click', function () {            Array.prototype.forEach.call(document.querySelectorAll('.tab'), function (item) { item.setAttribute('aria-selected', 'false'); });            tab.setAttribute('aria-selected', 'true');            content.style.opacity = '0';            setTimeout(function () {              var value = copy[tab.dataset.tab];              content.innerHTML = '<h3>' + value[0] + '</h3><p>' + value[1] + '</p>';              content.style.opacity = '1';            }, 120);          });        });      })();    </script>  </body></html>

14 · Tabs：标签页切换

Tabs 用来切换同一层级下的不同内容。

常见场景：概览 / 成员 / 设置、全部 / 进行中 / 已完成、基础信息 / 高级配置 / 日志。

text
页面顶部使用 tabs 切换内容，包含「概览 / 成员 / 设置」三个 tab；当前 tab 需要高亮，下方内容切换时使用轻微 fade transition。

订单列表可以这样写：

text
订单列表使用 tabs 区分「全部 / 待支付 / 已完成 / 已取消」，切换 tab 时刷新列表并保留 loading 状态。

Tabs 的重点是：内容之间应该是平级关系。如果不是平级内容，不要硬做 tabs。

Step 15 · Accordion · 折叠面板

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Accordion</title>    <style>      :root { --bg:#faf8f3; --fg:#1a1815; --muted:#6b6760; --border:#d8d3c5; --card:#fff; }      * { box-sizing:border-box; }      html, body { height:100%; margin:0; }      body { background:var(--bg); color:var(--fg); font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif; display:grid; place-items:center; padding:32px; }      .accordion { width:min(380px,100%); background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }      .item + .item { border-top:1px solid var(--border); }      .head { width:100%; border:0; background:transparent; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font:inherit; font-weight:500; color:var(--fg); text-align:left; }      .head:hover { background:#f5f1e9; }      .plus { color:var(--muted); transition:transform 180ms ease; }      .item[data-open='true'] .plus { transform:rotate(45deg); }      .body { display:grid; grid-template-rows:0fr; transition:grid-template-rows 200ms ease; }      .item[data-open='true'] .body { grid-template-rows:1fr; }      .inner { overflow:hidden; }      p { margin:0; padding:0 16px 15px; color:var(--muted); font-size:13px; line-height:1.65; }    </style>  </head>  <body>    <div class="accordion">      <section class="item" data-open="true"><button class="head" type="button">什么时候用 accordion？<span class="plus">+</span></button><div class="body"><div class="inner"><p>适合 FAQ、设置分组、文档说明这类可以按需展开的内容。</p></div></div></section>      <section class="item"><button class="head" type="button">可以同时展开多个吗？<span class="plus">+</span></button><div class="body"><div class="inner"><p>可以，但要在提示词里说清楚：单项展开还是多项独立展开。</p></div></div></section>      <section class="item"><button class="head" type="button">什么时候不要用？<span class="plus">+</span></button><div class="body"><div class="inner"><p>如果内容本来就很关键，不要强行折叠起来增加寻找成本。</p></div></div></section>    </div>    <script>      (function () {        Array.prototype.forEach.call(document.querySelectorAll('.head'), function (head) {          head.addEventListener('click', function () {            var item = head.parentElement;            Array.prototype.forEach.call(document.querySelectorAll('.item'), function (node) { if (node !== item) node.setAttribute('data-open', 'false'); });            item.setAttribute('data-open', item.getAttribute('data-open') !== 'true' ? 'true' : 'false');          });        });      })();    </script>  </body></html>

15 · Accordion：折叠面板

Accordion 是折叠面板，常见于 FAQ、文档说明、设置项分组。用户点击标题，内容展开；再次点击，内容收起。

text
FAQ 使用 accordion 展示。默认只展开第一项，点击其他问题时展开对应答案，并自动收起之前展开的项。

如果允许多个展开：

text
设置页面使用 accordion 分组展示，每个分组可以独立展开或收起，多个分组可以同时展开。

Accordion 的好处是节省空间，但不要滥用。如果内容本来就很重要，不应该强行折叠起来让用户自己找。

Step 16 · Transition · 状态过渡

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Transition</title>    <style>      :root { --bg:#faf8f3; --fg:#1a1815; --muted:#6b6760; --border:#d8d3c5; --card:#fff; --ok:#2f8f5a; }      * { box-sizing:border-box; }      html, body { height:100%; margin:0; }      body { background:var(--bg); color:var(--fg); font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif; display:grid; place-items:center; padding:32px; }      .stage { display:grid; gap:16px; place-items:center; }      .card { width:260px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px; transition:background-color 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.2,0,0,1), box-shadow 200ms ease; }      .card[data-active='true'] { background:#f0f7f2; border-color:#b8d8c3; transform:translateY(-3px); box-shadow:0 12px 24px -18px rgba(47,143,90,0.45); }      h3 { margin:0 0 6px; font-size:15px; }      p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }      button { appearance:none; cursor:pointer; font:inherit; font-weight:500; padding:8px 14px; border-radius:8px; border:1px solid var(--fg); background:var(--fg); color:var(--bg); }    </style>  </head>  <body>    <div class="stage">      <article class="card" id="card"><h3>状态变化</h3><p>Transition 让颜色、位置、阴影的变化不突兀。</p></article>      <button id="toggle" type="button">切换状态</button>    </div>    <script>      (function () {        var card = document.getElementById('card');        document.getElementById('toggle').addEventListener('click', function () {          card.setAttribute('data-active', card.getAttribute('data-active') !== 'true' ? 'true' : 'false');        });      })();    </script>  </body></html>

16 · Transition：过渡动画

Transition 是状态变化时的过渡效果，比如透明度变化、颜色变化、高度变化、位置变化、缩放变化。

没有 transition，页面会显得生硬；但 transition 太多，又会显得油腻。所以你可以给 AI 一个明确约束：

text
所有状态变化都使用自然的 transition，时长控制在 150ms 到 250ms，不要使用夸张弹跳、旋转、闪烁等效果。

如果是后台系统，可以再补一句：

text
动效以提升反馈为主，不要做装饰性动画。

很多 AI 一听「动效」，就容易开始表演。但产品里的动效不是为了表演，而是为了反馈。

Step 17 · Micro-interaction · 微交互

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Micro Interaction</title>    <style>      :root { --bg:#faf8f3; --fg:#1a1815; --muted:#6b6760; --border:#d8d3c5; --card:#fff; --ok:#2f8f5a; }      * { box-sizing:border-box; }      html, body { height:100%; margin:0; }      body { background:var(--bg); color:var(--fg); font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif; display:grid; place-items:center; padding:32px; }      .stage { display:grid; gap:13px; place-items:center; }      .save { appearance:none; cursor:pointer; border:1px solid var(--border); background:var(--card); color:var(--fg); border-radius:999px; padding:9px 15px; display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:500; transition:border-color 150ms ease, color 150ms ease, transform 120ms ease; }      .save:hover { border-color:#bdb6a7; }      .save:active { transform:scale(0.97); }      .save[data-saved='true'] { color:var(--ok); border-color:#b8d8c3; }      .icon { width:16px; height:16px; transition:transform 180ms cubic-bezier(0.2,0,0,1), fill 150ms ease; fill:transparent; }      .save[data-saved='true'] .icon { transform:scale(1.12); fill:currentColor; }      .hint { margin:0; color:var(--muted); font-size:12px; }    </style>  </head>  <body>    <div class="stage">      <button class="save" id="save" type="button" data-saved="false">        <svg class="icon" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"><path d="M12 4.8 14.2 9l4.7.7-3.4 3.3.8 4.7L12 15.5l-4.2 2.2.8-4.7-3.4-3.3 4.7-.7L12 4.8Z"/></svg>        <span id="label">收藏</span>      </button>      <p class="hint">微交互让小操作有明确回声。</p>    </div>    <script>      (function () {        var btn = document.getElementById('save');        var label = document.getElementById('label');        btn.addEventListener('click', function () {          var next = btn.getAttribute('data-saved') !== 'true';          btn.setAttribute('data-saved', next ? 'true' : 'false');          label.textContent = next ? '已收藏' : '收藏';        });      })();    </script>  </body></html>

17 · Micro-interaction：微交互

Micro-interaction 是很小的交互反馈，通常发生在一个很小的动作之后。比如点赞后图标填充、收藏后按钮变成已收藏、复制后文案变成「已复制」、开关切换时滑块移动。

text
复制按钮点击后，将按钮文案临时改为「已复制」，持续 1.5 秒后恢复；同时显示一个轻微的成功状态动画。

或者：

text
收藏按钮点击后，图标从空心变为实心，并有一个轻微的 scale 动画，表示操作成功。

微交互不一定要炫。它的价值是让用户感受到操作被系统接收了。产品从「能用」到「好用」，很多时候差的就是这些小反馈。

Step 18 · Scroll Animation · 滚动触发

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Scroll Animation</title>    <style>      :root { --bg:#faf8f3; --fg:#1a1815; --muted:#6b6760; --border:#d8d3c5; --card:#fff; }      * { box-sizing:border-box; }      html, body { height:100%; margin:0; }      body { background:var(--bg); color:var(--fg); font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif; }      .scroll { height:100vh; overflow:auto; padding:24px; scroll-behavior:smooth; }      .spacer { height:120px; display:grid; place-items:center; color:var(--muted); font-size:12px; }      .grid { display:grid; gap:12px; max-width:360px; margin:0 auto 80px; }      .card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:15px; opacity:0; transform:translateY(12px); transition:opacity 360ms ease, transform 360ms cubic-bezier(0.2,0,0,1); }      .card[data-visible='true'] { opacity:1; transform:translateY(0); }      .card:nth-child(2) { transition-delay:80ms; }      .card:nth-child(3) { transition-delay:160ms; }      h3 { margin:0 0 5px; font-size:14px; }      p { margin:0; color:var(--muted); font-size:12.5px; line-height:1.6; }    </style>  </head>  <body>    <div class="scroll" id="scroll">      <div class="spacer">向下滚动，卡片进入视口后淡入</div>      <section class="grid">        <article class="card"><h3>轻量进入</h3><p>只用透明度和 12px 位移，避免影响阅读。</p></article>        <article class="card"><h3>顺序延迟</h3><p>相邻卡片延迟 80ms，形成可感知的节奏。</p></article>        <article class="card"><h3>展示型页面</h3><p>适合官网、作品集；后台系统要谨慎使用。</p></article>      </section>    </div>    <script>      (function () {        var root = document.getElementById('scroll');        var cards = Array.prototype.slice.call(document.querySelectorAll('.card'));        function check() {          cards.forEach(function (card) {            var rect = card.getBoundingClientRect();            if (rect.top < window.innerHeight - 40) card.setAttribute('data-visible', 'true');          });        }        root.addEventListener('scroll', check);        check();      })();    </script>  </body></html>

18 · Scroll Animation：滚动动画

Scroll animation 是页面滚动时触发的动画，常见于官网、落地页、作品集、活动页。比如页面滚动到某一区域时，卡片逐个淡入。

text
页面滚动到对应区域时，卡片按顺序淡入并向上移动 12px，动画需要轻量，不要影响阅读。

官网首屏下方的功能模块可以这样写：

text
官网首屏下方的功能模块，在进入视口时使用 fade-in-up 动画，延迟依次递增 80ms。

这类动画适合官网和展示型页面。如果是后台管理系统，过多滚动动画只会增加干扰。

Step 19 · Sticky · 吸顶固定

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Sticky</title>    <style>      :root { --bg:#faf8f3; --fg:#1a1815; --muted:#6b6760; --border:#d8d3c5; --card:#fff; }      * { box-sizing:border-box; }      html, body { height:100%; margin:0; }      body { background:var(--bg); color:var(--fg); font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif; }      .frame { height:100vh; overflow:auto; padding:18px; }      .bar { position:sticky; top:0; z-index:2; background:color-mix(in oklab, var(--bg) 92%, white); border:1px solid var(--border); border-radius:10px; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 8px 18px -18px rgba(20,18,14,0.45); }      .title { font-weight:600; }      .meta { color:var(--muted); font-size:12px; }      .content { max-width:340px; margin:14px auto 60px; display:grid; gap:10px; }      .row { height:58px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px; display:flex; align-items:center; justify-content:space-between; }      .small { color:var(--muted); font-size:12px; }    </style>  </head>  <body>    <div class="frame">      <div class="bar"><span class="title">项目列表</span><span class="meta">Sticky filter</span></div>      <div class="content">        <div class="row"><span>Atlas Migration</span><span class="small">Active</span></div>        <div class="row"><span>Search Rewrite</span><span class="small">Review</span></div>        <div class="row"><span>Billing Audit</span><span class="small">Draft</span></div>        <div class="row"><span>Docs Refresh</span><span class="small">Active</span></div>        <div class="row"><span>Import Tool</span><span class="small">Paused</span></div>        <div class="row"><span>Design QA</span><span class="small">Active</span></div>        <div class="row"><span>Access Rules</span><span class="small">Review</span></div>      </div>    </div>  </body></html>

19 · Sticky：吸顶 / 固定

Sticky 是指元素在页面滚动时固定在某个位置。

常见场景：顶部导航栏、表格表头、侧边目录、操作栏、筛选栏。

text
顶部导航栏使用 sticky 效果，页面向下滚动时固定在顶部，并添加轻微阴影区分内容区域。

表格可以这样说：

text
数据表格的表头需要 sticky，在纵向滚动时保持固定，方便用户查看列名。

文档页可以这样说：

text
文章详情页右侧目录使用 sticky 定位，用户滚动正文时目录保持可见，并高亮当前阅读章节。

Sticky 很实用，特别是数据表格、文档站、管理后台这些场景。

Step 20 · Responsive · 响应式交互

查看源码
html
<!doctype html><html lang="zh-CN">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width, initial-scale=1" />    <title>Responsive Interaction</title>    <style>      :root { --bg:#faf8f3; --fg:#1a1815; --muted:#6b6760; --border:#d8d3c5; --card:#fff; }      * { box-sizing:border-box; }      html, body { height:100%; margin:0; }      body { background:var(--bg); color:var(--fg); font:14px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB',sans-serif; display:grid; place-items:center; padding:28px; overflow:hidden; }      .shell { width:min(390px,100%); background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }      .nav { height:52px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid var(--border); }      .brand { font-weight:600; }      .desktop { display:flex; gap:6px; }      .desktop button, .menu-btn { border:0; background:transparent; border-radius:8px; padding:7px 9px; cursor:pointer; font:inherit; color:var(--muted); }      .desktop button:hover { background:#f2eee5; color:var(--fg); }      .menu-btn { display:none; border:1px solid var(--border); color:var(--fg); }      .body { padding:18px; color:var(--muted); font-size:13px; line-height:1.65; min-height:120px; }      .drawer { position:fixed; inset:0 auto 0 0; width:min(260px,80vw); background:var(--card); border-right:1px solid var(--border); padding:18px; transform:translateX(-100%); transition:transform 200ms cubic-bezier(0.2,0,0,1); box-shadow:20px 0 40px -32px rgba(20,18,14,0.45); }      .drawer[data-open='true'] { transform:translateX(0); }      .drawer button { width:100%; border:0; background:transparent; text-align:left; border-radius:8px; padding:10px; font:inherit; color:var(--fg); }      .drawer button:hover { background:#f2eee5; }      @media (max-width: 420px) {        .desktop { display:none; }        .menu-btn { display:block; }      }    </style>  </head>  <body>    <section class="shell">      <nav class="nav"><span class="brand">Console</span><div class="desktop"><button>概览</button><button>成员</button><button>设置</button></div><button class="menu-btn" id="open" type="button">菜单</button></nav>      <div class="body">桌面端可以 hover 导航；移动端没有 hover，需要改成点击按钮打开 drawer。</div>    </section>    <aside class="drawer" id="drawer"><button>概览</button><button>成员</button><button>设置</button></aside>    <script>      (function () {        var open = document.getElementById('open');        var drawer = document.getElementById('drawer');        open.addEventListener('click', function () { drawer.setAttribute('data-open', drawer.getAttribute('data-open') !== 'true' ? 'true' : 'false'); });      })();    </script>  </body></html>

20 · Responsive Interaction：响应式交互

响应式不只是页面宽度变化，它还包括交互方式的变化。桌面端有鼠标可以 hover，但移动端没有 hover。所以很多桌面端交互，到了移动端需要重新设计。

比如：

  • 桌面端导航 hover 展开 → 移动端改成点击汉堡菜单打开 drawer
  • 桌面端表格展示很多列 → 移动端改成卡片列表
  • 桌面端 tooltip → 移动端改成点击查看说明
text
请处理响应式交互：桌面端导航菜单 hover 展开，移动端改为点击汉堡按钮打开 drawer；不要依赖 hover 作为移动端唯一交互。

或者：

text
桌面端使用表格展示数据，移动端改为卡片列表展示，保证主要操作按钮在移动端容易点击。

只要你做的是面向真实用户的页面，就一定要补一句：

text
请同时考虑移动端交互，不要依赖 hover。

给 AI 写前端交互提示词的通用模板

如果你不知道怎么写，可以直接套这个模板。

text
请实现一个【组件/页面名称】。使用场景：- 这个组件用于【具体业务场景】用户操作：- 用户可以【点击 / 悬停 / 输入 / 拖拽 / 滚动】- 当用户【某个操作】时，页面应该【具体反馈】状态要求：- 默认状态：- hover 状态：- active / pressed 状态：- loading 状态：- success 状态：- error 状态：- empty 状态：- disabled 状态：动效要求：- 使用自然克制的过渡动画- 动画时长控制在 150ms 到 250ms- 不要使用夸张弹跳、旋转、闪烁等装饰性动画响应式要求：- 桌面端：- 移动端：- 移动端不要依赖 hover 作为唯一交互技术要求：- 代码结构清晰- 组件状态可维护- 不要只写静态样式，要处理真实交互状态

这个模板的关键不是形式，而是它提醒你：不要只描述 UI，还要描述状态和反馈。

一个具体例子：项目卡片组件

很多人会这样说：

text
帮我写一个项目卡片，要好看一点，有交互。

这个提示词基本等于把方向盘交给 AI。更好的写法是：

text
请实现一个项目卡片组件，用于展示项目列表。卡片内容包括：- 项目名称- 项目描述- 更新时间- 状态标签- 右上角更多操作按钮交互要求：- 鼠标 hover 卡片时，卡片轻微上浮 4px，阴影增强，过渡时间 200ms- hover 时右上角更多操作按钮从透明变为可见- 点击更多操作按钮时，显示 dropdown 菜单，包含「编辑 / 复制 / 删除」- 点击删除时弹出确认 modal，不要直接删除- 删除成功后显示 toast：「项目已删除」- 请求处理中需要 loading 状态，避免重复点击状态要求：- loading 时显示 skeleton- 空列表时显示 empty state，并提供「创建项目」按钮- 请求失败时显示 error state，并提供「重新加载」按钮风格要求：- 视觉克制、现代、接近 Linear / Vercel 后台风格- 不要使用夸张动画- 移动端下卡片宽度自适应，更多操作通过点击触发

这个提示词没有写任何复杂代码，但它把交互说清楚了。AI 拿到它，生成结果会比「好看一点」强太多。

不要只让 AI 写静态页面

很多人用 AI 写前端，最容易掉进一个坑：只让 AI 写静态页面。

比如：

text
帮我写一个 Dashboard 页面。

AI 会给你：左侧菜单、顶部导航、几张数据卡片、一个图表区域、一个表格。看起来好像完成了。

但真实的 Dashboard 不是截图。它应该处理：数据加载中、加载失败、数据为空、筛选条件变化、时间范围切换、表格分页、操作成功 / 失败、移动端布局。

所以你应该这样描述：

text
请实现一个 Dashboard 页面，不要只写静态 UI，需要处理 loading、empty、error 三种状态。数据卡片加载时显示 skeleton，请求失败时显示错误说明和重试按钮，筛选条件变化时重新加载数据并显示局部 loading。

AI Coding 时代非常重要的能力是：你不是在描述一个静态界面，而是在描述一个会变化的系统。

最后

重点不是背单词，而是建立一种意识：前端不是静态截图，而是一系列状态变化。

你不需要成为资深前端，但你需要知道：什么是好结果、如何描述好结果、如何判断坏结果。下次用 AI 写前端，不要只说「帮我做得高级一点」。你可以说：

text
请把这个页面当成真实产品来实现，不要只写静态 UI。需要处理 hover、focus、loading、empty、error、success、disabled 等状态。交互反馈要明确，动效要克制，过渡时间控制在 150ms 到 250ms。移动端不要依赖 hover，需要提供点击触发的替代交互。

AI 不怕你啰嗦，AI 怕你含糊。