vercel-design

Vercel 设计指南是一项参考型技能，用于在构建 Web 应用程序时确保较高的界面质量、性能与可访问性。以下按用途、主要能力、使用方式、适用场景和限制分段整理。

一、用途 该技能面向 Web 应用开发者与设计者，提供 Vercel 的设计原则和最佳实践参考，用于在构建 Web 应用时保证 UI 卓越、性能快速响应、国际化友好、符合无障碍标准（WCAG、屏幕阅读器）以及设计语言与交互的一致性。

二、主要能力

1. UI 指南

• 锚点与导航：为 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 写作 ⌘ + K；Vercel SDK 写作 Vercel SDK；不需要空格时使用 ⁠。
• 品牌资源：右键单击导航 Logo 可快速访问品牌资源。

1. 国际化

• 区域感知格式：根据用户区域设置格式化日期、时间、数字、分隔符和货币。
• 优先选择语言设置而非位置：通过 Accept-Language 头和 navigator.languages 检测语言，永远不要依赖 IP/GPS 确定语言。
• 日期/时间格式化示例：使用 toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' }) 得到“2024年1月15日”；toLocaleTimeString('zh-CN', { hour: 'numeric', minute: '2-digit' }) 得到“上午9:00”。
• 数字和货币：同一上下文中货币显示为 0 或 2 位小数，不要混用（如 ¥50 与 ¥50.00 不可混用）；数字与单位之间用空格分隔（10 MB 而非 10MB），并使用不换行空格。

1. 表单

• 键盘交互：文本输入框聚焦时，若为唯一控件则回车提交；若有多个控件，对最后一个控件应用该规则；在 <textarea> 中 ⌘/⌃+Enter 提交，Enter 插入新行。
• 标签：每个控件都有 <label> 或与标签关联；支持显式标签与隐式关联两种写法；单击 <label> 会聚焦关联控件。
• 提交：提交开始前保持提交按钮启用，请求进行中时禁用并显示加载指示器，包含幂等键；不要预先禁用提交，允许提交不完整表单以显示验证反馈；可能丢失数据时在导航前警告用户。
• 验证：不要阻止输入，即使字段只接受数字也允许任何输入并显示验证反馈；错误显示在字段旁边，提交时聚焦第一个错误。
• 输入最佳实践：设置 autocomplete 和有意义的 name 值以启用自动填充（email、tel、username 等）；对电子邮件、代码、用户名等禁用拼写检查；使用正确的 type 和 inputmode；占位符以省略号结尾，可将占位符设置为例值或模式（如 +1 (123) 456-7890、sk-012345679…）。
• 控件和点击区域：复选框和单选按钮避免死区，标签和控件共享宽大的点击目标；在原生 <select> 上显式设置 background-color 和 color 以避免 Windows 暗模式对比度错误。
• 认证字段：确保密码管理器和 2FA 兼容并允许粘贴一次性验证码；不要为非认证字段触发密码管理器（如搜索输入避免保留名称，使用 autocomplete="off" 或 autocomplete="one-time-code"）；输入应修剪值以处理某些输入方法添加的尾随空格。

1. 性能

• 测试和测量：测试 iOS 低功耗模式和 macOS Safari；禁用增加开销或改变运行时行为的扩展；使用 React DevTools 或 React Scan 跟踪重渲染；使用 CPU 和网络限制进行测试。
• 布局和渲染：批量读取/写入，避免不必要的重排/重绘；POST/PATCH/DELETE 在 <500ms 内完成；优先使用非受控输入，使受控循环成本低廉。
• 列表和大型内容：虚拟化大型列表（如 virtua 或 content-visibility: auto）。
• 图像和媒体：仅预加载首屏图像，延迟加载其余部分；设置明确的图像尺寸并保留空间以避免 CLS；使用 <link rel="preconnect"> 预连接到资源/CDN 域名（需要时使用 crossorigin）。
• 字体：预加载关键文本字体以避免闪烁和布局偏移；通过 unicode-range 子集化字体，仅发送使用的码点/脚本。
• 工作线程：将特别长的任务移至 Web Workers，避免阻塞页面交互。

1. 视觉设计

• 阴影：使用至少两层模拟环境光和直射光。
• 边框：结合边框和阴影，半透明边框提高边缘清晰度。
• 边框圆角：子元素圆角 ≤ 父元素圆角且同心。
• 颜色：非中性背景上边框/阴影/文本向相同色调着色；图表使用色盲友好调色板；优先使用 APCA 而非 WCAG 2 以获得更准确的感知对比度；:hover、:active、:focus 比静止状态具有更多对比度。
• 浏览器集成：设置 <meta name="theme-color"> 使浏览器主题色与页面背景对齐；在暗主题中为 <html> 设置 color-scheme: dark。
• 排版：缩放文本可能改变平滑度，优先动画化包装器而不是文本节点；如伪影持续，设置 translateZ(0) 或 will-change: transform。
• 渐变：某些颜色和显示类型会有颜色条纹，可使用遮罩代替。

1. 文案写作

• 语气和语调：使用主动语态；标题和按钮使用标题大小写（芝加哥），营销页面使用句子大小写；清晰简洁，优先使用 & 而非 and；以行动为导向；保持名词一致，引入尽可能少的独特术语；使用第二人称。
• 占位符和示例：使用一致的占位符（字符串 YOUR_API_TOKEN_HERE，数字 0123456789）。
• 数字和度量：使用数字表示计数；数字和单位之间用空格分隔，使用不换行空格。
• 错误消息：默认使用积极语言；错误消息引导退出，告诉用户如何修复。
• 清晰度：标签清晰且具体，如“保存 API 密钥”而非“继续”。

三、使用方式 该技能以参考文档形式提供各项规则和代码示例。在构建 Web 应用时查阅对应章节，按照所列实践调整 UI、表单、性能、视觉和文案。资料中未提供具体的安装命令或集成步骤。

四、适用场景 适用于 Web 应用开发过程中的界面设计、表单实现、性能优化、无障碍改进、国际化适配和文案撰写等环节，可作为开发与设计时的对照检查清单。

五、限制 资料中未提供该技能的收费、价格、平台限制等信息。部分规则依赖具体技术栈（如 React、JavaScript），示例代码以资料原文为准，不应改动。资料列出了参考资源链接名称（如 Chrome 无障碍树、APCA 对比度、React DevTools、React Scan、Virtua 虚拟化、Web Workers API、标题大小写转换器），但未提供具体操作步骤的扩展说明。