Menu
Vercel 设计指南 - 构建高质量 Web 应用的最佳实践，包含现代 UI/UX 原则、性能优化和无障碍标准。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | vercel-design |
| description | Vercel 设计指南 - 构建高质量 Web 应用的最佳实践，包含现代 UI/UX 原则、性能优化和无障碍标准。 |
Vercel 设计原则和最佳实践的全面参考。在构建 Web 应用程序时使用此技能以确保：
为标题设置 scroll-margin-top 以便链接到章节：
h2, h3, h4 {
scroll-margin-top: 1rem;
}
对用户生成内容具有弹性。 布局应能处理短、平均和非常长的内容。
无障碍内容：
aria-label）aria-hidden）仅图标按钮需要命名：
<button aria-label="关闭模态框">×</button>
语义优于 ARIA： 优先使用原生元素（button、a、label、table），然后再使用 aria-*。
标题和跳转链接： 使用层级化的 <h1–h6> 和"跳转到内容"链接。
粘合术语使用不换行空格： 使用 保持单位、快捷键和名称在一起：
10 MB → 10 MB⌘ + K → ⌘ + KVercel SDK → Vercel SDK⁠从 Logo 获取品牌资源： 右键单击导航 Logo 可快速访问品牌资源。
区域感知格式： 根据用户的区域设置格式化日期、时间、数字、分隔符和货币。
优先选择语言设置而非位置： 通过 Accept-Language 头和 navigator.languages 检测语言。永远不要依赖 IP/GPS 来确定语言。
使用区域感知的格式化器：
// JavaScript
const date = new Date(2024, 0, 15);
date.toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
// → "2024年1月15日"
date.toLocaleTimeString('zh-CN', {
hour: 'numeric',
minute: '2-digit'
});
// → "上午9:00"
一致的货币格式： 在任何给定上下文中，货币显示应为 0 或 2 位小数，不要混用。
// 一致的 0 位小数
¥50
// 一致的 2 位小数
¥50.00
// 不要在同一上下文中混用：¥50 和 ¥50.00
数字和单位之间用空格分隔：
10 MB（而不是 10MB）10 MB回车提交： 当文本输入框被聚焦时，如果是唯一控件，回车键提交。如果有多个控件，对最后一个控件应用此规则。
文本区域行为： 在 <textarea> 中，⌘/⌃+Enter 提交；Enter 插入新行。
所有地方都要有标签： 每个控件都有 <label> 或与标签关联，以支持辅助技术。
// 显式标签
<label>
电子邮箱
<input type="email" name="email" />
</label>
// 隐式关联
<label for="email">电子邮箱</label>
<input id="email" type="email" name="email" />
标签激活： 单击 <label> 会聚焦关联的控件。
提交规则： 在提交开始前保持提交按钮启用；然后在请求进行中时禁用，显示加载指示器，并包含幂等键。
不要预先禁用提交： 允许提交不完整的表单以显示验证反馈。
未保存的更改： 当可能丢失数据时，在导航前警告用户。
不要阻止输入： 即使字段只接受数字，也允许任何输入并显示验证反馈。完全阻止按键会令人困惑，因为用户无法获得解释。
错误放置： 在字段旁边显示错误；提交时，聚焦第一个错误。
自动完成和名称： 设置 autocomplete 和有意义的 name 值以启用自动填充。
<input type="email" name="email" autocomplete="email" />
<input type="tel" name="phone" autocomplete="tel" />
<input type="text" name="username" autocomplete="username" />
选择性拼写检查： 对电子邮件、代码、用户名等禁用。
<input type="email" name="email" spellcheck="false" />
正确的类型和输入模式： 使用正确的 type 和 inputmode 以获得更好的键盘和验证。
<input type="email" inputmode="email" />
<input type="tel" inputmode="tel" />
<input type="number" inputmode="numeric" />
占位符表示为空： 以省略号结尾。
<input placeholder="请输入您的电子邮箱..." />
占位符值： 将占位符设置为例值或模式：
+1 (123) 456-7890sk-012345679…控件上没有死区： 复选框和单选按钮避免死区；标签和控件共享一个宽大的点击目标。
Windows <select> 背景： 在原生 <select> 上显式设置 background-color 和 color 以避免 Windows 上的暗模式对比度错误。
密码管理器和 2FA： 确保兼容性并允许粘贴一次性验证码。
不要为非认证字段触发密码管理器： 对于"搜索"等输入，避免保留名称（例如密码），使用 autocomplete="off" 或特定标记如 autocomplete="one-time-code" 用于 OTP 字段。
文本替换和扩展： 某些输入方法会添加尾随空格。输入应修剪值以避免显示令人困惑的错误消息。
设备/浏览器矩阵： 测试 iOS 低功耗模式和 macOS Safari。
可靠测量： 禁用增加开销或改变运行时行为的扩展。
跟踪重渲染： 最小化并加快重渲染。使用 React DevTools 或 React Scan。
分析时限制： 使用 CPU 和网络限制进行测试。
最小化布局工作： 批量读取/写入；避免不必要的重排/重绘。
网络延迟预算： POST/PATCH/DELETE 在 <500ms 内完成。
按键成本： 优先使用非受控输入；使受控循环成本低廉。
大型列表： 虚拟化大型列表（例如 virtua 或 content-visibility: auto）。
智能预加载： 仅预加载首屏图像；延迟加载其余部分。
无图像导致的 CLS： 设置明确的图像尺寸并保留空间。
<img
src="hero.jpg"
alt="Hero 图像"
width="800"
height="400"
loading="lazy"
/>
预连接到源： 使用 <link rel="preconnect"> 连接资源/CDN 域名（需要时使用 crossorigin）以减少 DNS/TLS 延迟。
<link rel="preconnect" href="https://cdn.example.com" />
<link rel="preconnect" href="https://cdn.example.com" crossorigin />
预加载字体： 对于关键文本以避免闪烁和布局偏移。
<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin />
子集字体： 通过 unicode-range 仅发送您使用的码点/脚本（将可变轴限制在您需要的范围内）以缩小大小。
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-var.woff2') format('woff2');
unicode-range: U+0000-00FF;
}
不要将主线程用于昂贵的工作： 将特别长的任务移至 Web Workers 以避免阻塞页面的交互。
// main.js
const worker = new Worker('expensive-task.js');
worker.postMessage({ data: largeDataset });
worker.onmessage = (event) => {
console.log('结果:', event.data);
};
分层阴影： 使用至少两层模拟环境光和直射光。
box-shadow:
0 1px 1px rgba(0, 0, 0, 0.05),
0 4px 6px rgba(0, 0, 0, 0.1);
清晰的边框： 结合边框和阴影；半透明边框提高边缘清晰度。
border: 1px solid rgba(0, 0, 0, 0.1);
嵌套圆角： 子元素圆角 ≤ 父元素圆角且同心，使曲线对齐。
.card {
border-radius: 12px;
}
.card .button {
border-radius: 8px; /* ≤ 12px */
}
色调一致性： 在非中性背景上，边框/阴影/文本向相同色调着色。
.surface-blue {
border-color: rgba(59, 130, 246, 0.2);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}
无障碍图表： 使用色盲友好的调色板。
最小对比度： 优先使用 APCA 而非 WCAG 2 以获得更准确的感知对比度。
交互增加对比度： :hover、:active、:focus 比静止状态具有更多对比度。
button {
background: #2563eb;
}
button:hover {
background: #1d4ed8; /* 更深以增加对比度 */
}
button:focus {
outline: 2px solid #000;
outline-offset: 2px;
}
浏览器 UI 匹配您的背景： 设置 <meta name="theme-color" content="#000000"> 以将浏览器的主题颜色与页面背景对齐。
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
设置适当的 color-scheme： 在暗主题中为 <html> 标签设置 color-scheme: dark，以便滚动条和其他设备 UI 具有适当的对比度。
:root {
color-scheme: light dark;
}
文本抗锯齿和变换： 缩放文本可能会改变平滑度。优先动画化包装器而不是文本节点。如果持续存在伪影，设置 translateZ(0) 或 will-change: transform 将其提升到自己的图层。
.scale-wrapper {
transform: scale(1.1);
will-change: transform;
}
避免渐变条纹： 某些颜色和显示类型会有颜色条纹。可以使用遮罩代替。
主动语态：
标题和按钮使用标题大小写（芝加哥）。在营销页面上，使用句子大小写。
清晰简洁： 使用尽可能少的词语。
优先使用 & 而非 and。
以行动为导向的语言：
保持名词一致： 引入尽可能少的独特术语。
使用第二人称： 避免第一人称。
使用一致的占位符：
YOUR_API_TOKEN_HERE0123456789使用数字表示计数：
数字和单位之间用空格分隔：
10MB10 MB10 MB默认使用积极语言： 以鼓励性和解决问题的方式表达消息，即使是错误消息。
错误消息引导退出： 不要只说明出了什么问题—告诉用户如何修复它。
文案和按钮/链接应该教育并提供明确的操作。
避免歧义： 标签清晰且具体。
Web search, online search, real-time search, internet search, Google alternative, Bing alternative, DuckDuckGo alternative, search the web, lookup online, find information, research,查询,搜索,搜索结果,网页搜索,联网搜索,实时搜索,网络查询,资料查找,信息检索,最新资讯,新闻搜索, Tavily Search API for optimized, real-time web search results for RAG. A pre-configured, cost-effective search tool.
在 macOS 上使用 osascript 执行 AppleScript 或 JavaScript for Automation (JXA) 实现系统自动化。当用户需要控制 macOS 应用（Finder、Safari、Mail、Calendar、Keynote、Numbers、Pages 等）、操作系统 UI、显示对话框/通知、读写剪贴板、自动化重复任务、或任何涉及 osascript/AppleScript/JXA 的需求时，必须使用本技能。即使用户只说"帮我自动化这个"或"在 Mac 上操作 XXX"，也应优先考虑本技能。
Model configuration editor for ~/.pi/agent/models.json - 使用 Bun 脚本管理模型配置
读取和写入输出风格目录的工具技能。当用户需要：（1）读取输出风格文件，（2）写入/创建输出风格文件，（3）管理输出风格目录，（4）解析风格文件格式时使用。
Best practices for writing and maintaining high-quality role memories.
Periodic maintenance of role memory: dedup, tidy, consolidate, and pending management.