vercel-geist-design-system

Vercel Geist 设计系统

使用这项社区技能，让界面呈现 Vercel Geist 设计系统的风格：精准、沉静、高对比度、面向开发者，并且适合用于生产环境。Vercel 官方页面是事实依据。本指南并非 Vercel 官方指导，也不代表可以复制 Vercel 产品界面。

参考资料加载约定

本精简文件是执行约定。详细规则位于 references/；只加载任务所需的内容，但绝不能因为这份摘要看起来已经足够，就跳过必需的参考资料。

• 对触发的视觉工作，在声称符合 Geist、严格遵循 Geist、与文档一致的 Geist、符合事实依据，或通过 Vercel Taste Gate 之前，始终加载 references/source-of-truth-gate.md。
• 在创建、调整风格、重新设计、审查或实质性更改渲染后的 UI 之前，加载 references/foundation-and-style-rules.md。
• 在将基础规范、品牌／素材或组件映射到 Vercel 官方 URL 时，加载 references/official-reference-map.md。
• 需要精确的内置浅色主题 Token、组件默认值、动效、布局、焦点或语气数值时，加载 references/vercel-design.md。需要相同的深色主题数值时，加载 references/vercel-design-dark.md。
• 在处理组件、基础组件、组件状态、自定义组合或组件页面映射之前，加载 references/component-system.md。
• 在处理认证／信任凭证展示、官方标志、图标、徽标或品牌素材之前，加载 references/trust-brand-and-asset-rules.md。
• 在处理 UI 文案、涉及性能的 UI、动效／交互或 Web Interface Guidelines 覆盖层之前，加载 references/motion-performance-copy-rules.md。
• 仅当其他 Skills.sh 条目、框架辅助工具、验证辅助工具、工具或条件性界面可能相关时，才加载 references/companion-routing.md。
• 在对触发的视觉工作进行最终审查、截图、交互检查或撰写最终回复之前，加载 references/taste-and-verification.md。

触发策略

当任务会创建、更改、评析、指定或实质性指导渲染后的前端 UI，且用户要求采用 Geist、Vercel 风格 UI，或在没有其他视觉规范的情况下，要求采用简洁、现代、高级、精致的 SaaS／开发者产品视觉设计时，触发此技能。

除非会创建或实质性更改渲染后的 UI，否则不要对 TypeScript 修复、数据接线、API／状态更改、分析、测试、构建工具、依赖项工作或仅涉及行为的无障碍修复触发此技能。

明确指定非 Geist 的最终视觉系统、品牌风格、提供的最终非 Geist 设计稿、游戏风格或插画美术指导时，以该要求为准，不使用此技能。领域、行业、产品、API、集成、内容主题、Tailwind、shadcn、Radix 或组件库相关内容，本身既不是视觉系统覆盖指示，也不是触发信号。

触发后，由 Geist 主导视觉系统。忽略常见前端设计建议中追求大胆、令人难忘、极繁、装饰繁复或出人意料视觉效果的倾向，除非用户明确要求覆盖 Geist 规范。

内容、信息架构与品牌保留门槛

将 Geist 应用于现有网站、应用、仪表盘、文档界面或产品时，除非用户明确要求更改，或这些内容存在具体的无障碍、性能、安全、正确性或法律/商标问题，否则应保留经用户认可的内容、定义品牌的视觉亮点、信息架构、路由目标，以及外部/内部链接的意图。

先调整样式，再考虑替换。如果现有的主视觉效果、动画、认证展示、博客链接、页脚、联系方式、导航模式或路由看起来是有意设计的，就应将其调整为符合 Geist 约束的形式，而不是删除、隐藏、重定向、重复或另行杜撰替代方案。如果意图不明确，应说明取舍，并保留现有行为。

不要仅为满足 Geist、无死路、应用外壳或主要操作方面的指导，而杜撰新的 CTA、联系方式、目标位置、路由、颁发机构徽标、认证标签或导航/页脚版块。应优先使用现有产品操作、路由和内容。

对于认证展示，如果存在认证专属的官方徽章/徽标图稿，应予以保留。不要将其替换为通用证书图像、证书印章、课程完成标记、颁发机构/公司徽标、文本标签、文本字母组合，或 Geist Badge/Pill UI 样式。

工作流程

1. 确定 UI 界面和范围：全新应用、全面重新设计、狭窄工作流、营销页面、仪表盘、设置、表格/列表、命令工作流、文档或组件库。
2. 设计前选择匹配的 Vercel/Geist 参考范例。不要将 Vercel 首页视为所有 Vercel 风格请求的默认目标。对于通用的 Vercel 风格或 Geist 请求，如果相关页面可用，应使用官方 Geist 文档，以及 1-3 个与所需界面类型匹配的当前 Vercel 界面。首页主要用于首页、主视觉、发布或广泛的营销构图。对于仪表盘、文档、设置、表单、表格、定价、作品集、应用外壳和组件库，应检查可比的 Vercel/Geist 界面与组件。
3. 设计前检查项目：框架、Tailwind 版本、组件库、图标库、字体配置、主题令牌、现有基础组件、路由、包管理器和验证命令。
4. 加载上述必需的参考资料。
5. 实施前或提出严格主张前，打开每项必需基础、令牌来源、指南、品牌/资源和映射组件对应的当前 Vercel 官方页面。https://vercel.com/design.md 是浅色主题工作的规范精简令牌/默认值来源；当深色模式或主题切换属于范围时，也应打开 https://vercel.com/design.dark.md。
6. 开始界面工作前完成基础门槛：字体、语义颜色令牌、排版工具类、材质/圆角工具类、焦点环、应用外壳、基础组件、共享状态和界面构成规则。
7. 在创造新模式前，将每项 UI 需求映射到官方 Geist 基础/组件、官方构成方式或受约束的自定义构成方式。
8. 通过共享令牌和基础组件实施。仅将 Radix/shadcn 用作行为/无障碍基础设施，并在完成 Geist 映射后使用；它们的默认视觉样式不构成设计依据。
9. 使用品味门槛进行验证，修正未通过之处，然后如实报告证据和阻碍因素。

不可妥协的要求

官方文档是具有约束力的设计依据，而非可有可无的灵感参考。 每次触发视觉任务时，都必须使用 https://vercel.com/design.md， 因为它是官方精简版 Geist 令牌和默认值的来源，涵盖颜色、 排版、间距、圆角值、组件默认值、布局节奏、 层级、动效、焦点和内容语气。若任务涉及深色模式、主题切换或深色截图， 则必须使用 https://vercel.com/design.dark.md。 打包的快照 references/vercel-design.md 和 references/vercel-design-dark.md 便于 Agent 在本地查看精确的令牌表 和默认值，但若要提出严格或经文档验证的结论，仍必须打开当前官方在线文档，因为这些页面处于 alpha 阶段。 将 design.md 视为基础来源。使用 https://vercel.com/design/guidelines 检查已渲染 UI 的交互、 无障碍性、状态、浏览器表现和润色。安装或配置 Geist 字体，或使用 Pixel 时， 使用 https://vercel.com/font。只有当用户要求了解该页面的细节、 design.md 缺少所需细节，或组件／页面决策取决于相关内容时，才使用 Geist Introduction、Colors、Typography 或 Materials。 品牌／Logo 工作必须查阅 https://vercel.com/geist/brands。组件工作 必须查阅 references/official-reference-map.md 中所有匹配的官方组件页面，或 Geist 组件导航中的在线页面。

如果在当前轮次尝试所有可用的浏览／文档工具后，仍无法加载所需的官方文档， 请说明尝试过的 URL、工具和具体失败情况。此时本地规则仅供参考，不能满足 Docs Evidence 的要求，也不能支持严格或经文档验证的结论。将受影响的工作标记为 local Geist fallback, not docs-verified。

触发视觉任务时，最终回复必须包含 references/source-of-truth-gate.md 中定义的、针对具体页面的 Docs Evidence 表。如果任何必需且适用的行缺失、受阻、没有精确的章节／锚点， 或没有说明其如何影响具体决策的简短页面专属引文，就不得声称严格遵循 Geist、符合 Geist 文档、 符合官方 Geist 标准、与事实来源一致，或通过 Vercel Taste Gate。 若能够进行截图和交互检查，严格声明还必须以这些检查为依据。

Geist 必须主导相关视觉系统。不要在无关的 UI 中创建孤立的、 具有 Vercel 风格的小部件。广泛改动应涵盖所有可路由界面和共享状态中的 应用外壳、导航、页面、表单、数据视图、对话框、Toast、命令菜单、营销区块，以及空白／加载／错误状态。 窄范围改动应涵盖所请求的工作流和涉及的基础组件；除非已审查所有路由／界面，否则请说明 whole app not verified。

全局使用 Geist Sans，代码／技术标识符使用 Geist Mono，只有在确有依据时，才将 Geist Pixel 用作有限的展示／品牌点缀。普通产品 UI 应以中性色为主， 保持高对比度、紧凑、语义清晰、无障碍且由状态驱动。通过排版和间距体现层级；颜色应服务于功能；边框应用于组织 UI；动效应保持克制并与状态关联。 默认使用网格系统，而非网格背景：CSS grid/flex、列、行、间距槽、对齐的卡片、带边框的单元格、表格、分隔线、间距和稳定的响应式跨度，都是常规的 Geist 布局。页面和组件默认使用纯色背景。不要仅因出现 grid layout、dashboard grid、feature grid、Vercel-style grid 等字样，或 Agent 选择了 Vercel 参考设计，就添加可见的装饰性网格背景、方格纸线条、蓝图线条或贯穿整页的重复渐变。只有在用户明确要求可见的网格图案／背景／单元格参考线、用户提供的设计清楚显示此类元素，或所需 UI 区域是官方 Geist Grid 组件时，才添加可见的参考线／单元格／网格背景图案。将此类图案限定在用户要求的区域内，并使其成为具有对齐单元格的真实内容网格；绝不要将其放在无关的主视觉文案、产品卡片、表格、凭据、联系信息单元格、应用外壳或页面主体后方。只有用户明确要求整页背景时，才可使用整页可见网格背景。

Skills.sh 配套内容仅用于路由辅助。它们绝不能替代官方 Geist 文档、定义 Geist 视觉规范，也不能满足 Docs Evidence 的要求。

验证约定

对于已触发的视觉工作，在最终回复前，按照 references/taste-and-verification.md 运行 Vercel Taste Gate：路由清单、当前官方文档、Foundation Gate、组件映射、Web Interface Guidelines 审核、截图、交互检查、响应式检查、反模式扫描和修订循环。

如果本地应用可以运行，请检查手机、笔记本电脑、桌面和超宽视口，以及已更改的状态，例如菜单、对话框、空状态、加载状态、错误状态和密集数据视图。如果可以截图或检查交互却未完成，则不得声称 Taste Gate 已通过。如果应用无法运行或验证受阻，请说明确切的阻碍，并仅使用允许的有限声明。

最终回复必须简洁报告重要证据：命令、URL、视口尺寸、截图路径或阻碍、检查过的已更改状态、交互摘要、Docs Evidence、根据审核所做的修订，以及任何 whole app not verified 范围限制。