vercel.com Sample

## 设计思维

在编码之前，先理解上下文并选择一个大胆的美学方向：

- **目的：** 这个界面解决什么问题？谁在使用它？
- **风格：** 选择一个强烈的方向：极简主义、极繁主义、复古未来主义、有机/自然、奢华/精致、 playful/玩具感、杂志/编辑风格、粗粝/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义，或其他清晰的美学。
- **约束：** 技术要求，如框架、性能和可访问性。
- **差异化：** 是什么让它令人难忘？人们会记住的那一件事是什么？
  **关键：** 选择一个清晰的概念并精准执行。大胆的极繁主义和精致的极简主义都可以奏效。意图比强度更重要。

## 优美的默认设置

- 从构图开始，而不是从组件开始。
- 优先使用全出血 hero 图片或全画布视觉锚点。
- 让品牌或产品名称成为最突出的文字。
- 保持文案简洁且可扫描。
- 在添加边框之前，先使用留白、对齐、缩放、裁剪和对比。
- 默认限制系统：不超过两种字体和一种强调色。

# vercel.com 设计系统

## 视觉 DNA

一个以开发者为中心、基于数学精度的系统化界面。设计语言通过 Geist 字体家族、严格的 4px 空间网格和克制的动效来强调清晰度。视觉层级通过权重和不透明度而非仅靠尺度来建立。表面使用玻璃/半透明处理，通过单像素线条进行微妙的边框定义。美学是有意极简的——在通过系统化间隙结构（4px, 8px, 12px, 24px, 32px）保持可呼吸留白的同时，优先保证信息密度。交互元素使用完全圆形（药丸）几何（9999px 圆角），与输入框和卡片上的锐利 2px 圆角形成对比。颜色以灰度为基础（rgb(23, 23, 23) 到 rgb(255, 255, 255)），功能强调色为蓝色（rgb(0, 112, 243)）和红色（rgb(229, 72, 77)）状态。

## 工程 CSS 证据

### 字体排版

**标题：**
- **主字体：**
  - **Font Family:** Geist
  - **Font Family Stack:** Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
  - **Font Size:** 14px
  - **Font Weight:** 500
  - **Line Height:** 20px
  - **Letter Spacing:** -0.96px
  - **Text Transform:** uppercase
- **变体：** "Geist Mono", ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace | 12px | 500 | 12px (11), Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | 14px | 400 | 20px (9), Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | 24px | 600 | 32px (5), Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | 24px | 600 | 32px (3), Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | 14px | 500 | 20px (3), Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | 40px | 600 | 48px (1)

**正文：**
- **主字体：**
  - **Font Family:** Geist
  - **Font Family Stack:** Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
  - **Font Size:** 16px
  - **Font Weight:** 400
  - **Line Height:** 20px
  - **Letter Spacing:** -2.88px
  - **Text Transform:** uppercase
- **变体：** Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | 16px | 400 (66), Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | 12px | 400 | 16px (37), Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" | 14px | 500 | 20px (21), "Geist Mono", ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace | 16px | 400 (20), Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | 48px | 600 | 56px (15), Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", ui-sans-serif, system-ui, -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" | 14px | 500 | 20px (10)

### 颜色

**模式：** 混合

**用法：**
- **背景：** rgb(235, 235, 235), rgb(250, 250, 250), rgb(0, 112, 243), rgb(204, 230, 255), rgb(229, 72, 77), rgb(255, 255, 255)
- **表面：** 证据不足
- **主文本：** rgb(23, 23, 23), rgb(77, 77, 77), rgb(125, 125, 125), rgb(255, 255, 255), rgb(143, 143, 143), rgb(189, 40, 100)
- **次要文本：** rgb(23, 23, 23), rgb(77, 77, 77), rgb(125, 125, 125), rgb(255, 255, 255)
- **边框：** rgb(23, 23, 23), rgb(77, 77, 77), rgb(125, 125, 125), rgb(255, 255, 255), rgb(235, 235, 235), rgb(23, 23, 23) rgb(23, 23, 23) rgb(235, 235, 235)
- **强调色：** rgb(23, 23, 23), rgb(255, 255, 255), rgb(77, 77, 77)
- **渐变：** 证据不足

### 间距

**基础单位：** 4px
**比例尺：** 8px, 6px, 12px, 4px, 44px, 10px, 2px, 3px, 32px, 16px, 1px, 24px
**区块内边距：** 证据不足
**卡片内边距：** 证据不足
**间隙：** 8px, 6px, 4px, 32px

### 材质

**表面风格：** 玻璃 / 半透明
**圆角：** 50%, 2px, 9999px
**边框样式：** 0px none rgb(23, 23, 23), 0px none rgb(77, 77, 77), 0px none rgb(125, 125, 125), 0px none rgb(255, 255, 255), 0px solid rgb(235, 235, 235), 1px solid rgb(23, 23, 23), 0px none rgb(189, 40, 100), 0px none rgb(41, 122, 58)
**阴影样式：** rgb(235, 235, 235) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
**模糊：** blur(0px)

### 动效

**动效级别：** 微妙
**持续时间：** 0s, 0.15s, 0.2s
**缓动函数：** ease, ease-in-out
**悬停模式：** all, color, rotate
**滚动模式：** 13 个 CSS grid 容器，44 个 flex 容器

### 组件示例

**按钮：**
- **数量：** 25
- **字体排版：** 14px / 20px, weight 500, 16px / 20px, weight 500, 16px / 24px, weight 500
- **内边距：** 0px 6px
- **圆角：** 证据不足
- **颜色：** rgb(23, 23, 23), rgb(255, 255, 255), rgb(77, 77, 77)
- **背景：** 证据不足
- **边框：** 0px none rgb(23, 23, 23), 0px none rgb(255, 255, 255), 0px none rgb(77, 77, 77)
- **阴影：** 证据不足
- **过渡：** all 0s ease

**导航：**
- **数量：** 51
- **字体排版：** 12px / 16px, weight 400, 16px / normal, weight 400, 14px / 14px, weight 400
- **内边距：** 8px 0px, 8px 0px 8px 8px, 8px 8px 8px 0px
- **圆角：** 证据不足
- **颜色：** rgb(77, 77, 77), rgb(23, 23, 23)
- **背景：** 证据不足
- **边框：** 0px none rgb(77, 77, 77), 0px none rgb(23, 23, 23)
- **阴影：** 证据不足
- **过渡：** color 0.15s ease-in-out, all 0s ease, rotate 0.2s ease

**hero：**
- **数量：** 1
- **字体排版：** 20px / 36px, weight 400
- **内边距：** 证据不足
- **圆角：** 证据不足
- **颜色：** rgb(77, 77, 77)
- **背景：** 证据不足
- **边框：** 0px none rgb(77, 77, 77)
- **阴影：** 证据不足
- **过渡：** all 0s ease

**区块：**
- **数量：** 10
- **字体排版：** 16px / normal, weight 400
- **内边距：** 证据不足
- **圆角：** 证据不足
- **颜色：** rgb(23, 23, 23)
- **背景：** 证据不足
- **边框：** 0px none rgb(23, 23, 23)
- **阴影：** 证据不足
- **过渡：** all 0s ease

**列表：**
- **数量：** 29
- **字体排版：** 16px / normal, weight 400
- **内边距：** 证据不足
- **圆角：** 证据不足
- **颜色：** rgb(23, 23, 23)
- **背景：** 证据不足
- **边框：** 0px none rgb(23, 23, 23)
- **阴影：** 证据不足
- **过渡：** all 0s ease

### 提取诊断

- 从 3059 个总 DOM 元素中采样了 300 个可见元素。
- 置信度：高。
- 无提取警告。

## AI 视觉分析

### 核心风格

以开发者为中心的生产力界面，hero 区域可见系统化网格叠加。主导的浅色主题使用近白色背景（rgb(250, 250, 250)）搭配高对比度深色字体（rgb(23, 23, 23)）。视觉层级严重依赖 Geist sans-serif 家族用于 UI 元素，Geist Mono 用于代码表示。布局采用非对称网格系统，可见的技术网格线暗示精密工程。主操作使用实心深色填充（rgb(23, 23, 23)）搭配白色文本，而次要操作使用透明背景与边框定义。

### 纹理与氛围

干净、临床的美学，通过 1px 边框阴影（rgb(235, 235, 235) 0px 0px 0px 1px）而非厚重投影实现微妙深度。导航和叠加层上的玻璃态拟物效果，带有 backdrop filter。代码块以白色背景上的特定颜色编码（粉色、蓝色、绿色 token）呈现语法高亮。卡片利用微妙的 border-radius（2px-6px 范围）与单像素边框定义。氛围通过基于网格的构图和充裕的留白（24px-32px 间隙）传达技术能力。

### 布局与构图

居中的 hero 架构，文本居中对齐，flex-column 布局。桌面端区块间距遵循 140px/160px 垂直内边距模式，在移动端（max-width: 960px）折叠为 70px/80px。内容使用 CSS Grid（13 个容器）和 Flexbox（44 个容器），带有非对称单元格划分。导航保持固定/粘性，高度为 64px。卡片遵循一致的 1px solid rgb(235, 235, 235) 边框模式，带有微妙的 shadow-smallest 处理。hero 中的字体排版尺度戏剧性变化（48px/56px），与数据表中密集的正文文本（12px/16px）形成对比。

### 交互方向

微妙、功能性的动效，持续时间限制在 0.15s-0.2s，使用 ease 和 ease-in-out 曲线。悬停状态优先颜色过渡而非几何 transform。按钮具有 9999px（药丸）border-radius，带有即时反馈（某些元素过渡为 0s）。焦点状态利用 ring 阴影（0 0 0 2px/4px 模式）实现无障碍。导航下拉菜单采用 chevron 旋转（0deg 到 180deg），过渡 0.15s。整体交互哲学通过即时响应而非装饰性动画来优先感知性能。

## 设计系统规则

### 应当

- 独占使用 Geist 字体族栈：Geist, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" 用于 sans-serif；"Geist Mono", ui-monospace, SFMono-Regular, "Roboto Mono" 用于等宽上下文
- 对所有间距决策保持 4px 基础网格系统（4px 的倍数：8px, 12px, 16px, 24px, 32px）
- 对交互状态实现 0.15s-0.2s 持续过渡，使用 ease 或 ease-in-out 时间函数
- 药丸形按钮使用 9999px border-radius，卡片和输入框使用 2px-6px
- 对卡片定义和表面分隔应用 1px solid rgb(235, 235, 235) 边框
- 使用模式实现焦点环：0 0 0 2px var(--geist-background), 0 0 0 4px var(--accents-3) 或 box-shadow: var(--ds-focus-ring)
- 对主标题使用 uppercase text-transform 配合负字距（-0.96px）
- 应用微妙阴影：rgb(235, 235, 235) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

### 不应当

- 不要发明工程证据中不存在的 CSS 值（例如，rgb 证据集之外的特定十六进制代码）
- 除非为特定组件指定，否则不要使用 50%, 2px, 或 9999px 之外的 border-radius 值
- 微交互不要超过 0.2s 持续时间；避免与"微妙"动效级别冲突的长动画
- 没有具体证据的情况下，不要使用低于 -2.88px 的文本 letter-spacing（如正文主样式中所示）
- 不要实现超出证据的厚重投影：rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
- 不要偏离 4px 间距基础单位；避免比例尺中不存在的奇数间距值（例如 5px, 7px）
- 除非专门实现玻璃表面，否则不要使用超出 blur(0px) 的 backdrop-filter blur 值

### 实现备注

- 引用 CSS 自定义属性获取语义值：--ds-gray-1000 (rgb(23,23,23)), --ds-gray-900, --ds-background-100 (hsla(0, 0%, 100%, 1)), --geist-radius (6px), --geist-gap (24px)
- 字体排版变体包括特定的行高比率：标题 20px/14px (1.43)，正文 20px/16px (1.25)，hero 文本 36px/20px (1.8)
- 颜色 token 使用混合模式；使用 HSLA 格式实现亮色和暗色主题变量（例如，--ds-blue-700: hsla(212, 100%, 48%, 1)）
- 导航组件使用特定内边距模式：垂直节奏 8px 0px，嵌套项 8px 0px 8px 8px
- 桌面端 hero 区域需要 140px 顶部内边距和 160px 底部内边距，在移动端断点减半
- 输入框使用 6px border-radius，焦点状态的 box-shadow 过渡（0.15s）：0 0 0 1px var(--ds-gray-alpha-600), 0px 0px 0px 4px #00000029
- 网格布局应尊重 --ds-page-width: 1400px，水平边距 24px（--geist-page-margin）

# 核心原则

1. 坚定的负面约束：

- 不要在白色背景上使用紫色/蓝色渐变。
- 不要使用通用字体，如 Inter, Roboto, Arial 或 system-ui。
- 不要使用可预测的 hero-CTA-功能-评价模板。
- 不要使用通用几何形状或抽象斑点。
- 不要使用看起来像素材的图片或陈词滥调的视觉效果。

## 性能

- 保持页面加载快速，避免不必要的大型资源。
- 使用现代图片格式，如 WebP，并配合适当的压缩。
- 对长页面媒体实现懒加载。

**重要：** 实现复杂度应与美学愿景相匹配。极繁主义设计可能需要更丰富的代码、动画和效果。极简或精致的设计需要克制、精确、间距和微妙细节。优雅来自于充分表达所选愿景。不要对独特、坚定的结果有所保留。