Vercel Gateway 控制台
适用任务
将 Vercel AI Gateway 的中性色、轻边线与清晰层级用于整个产品；以字体、颜色、间距、边框、图标及标签值的视觉组织统一已有组件，保留各页面任务布局与业务含义。
- 适合
- 控制台、开发者工具和内部操作产品的整站或指定页面集合；可独立应用，无需每页匹配场景。 仅视觉表达与组织；场景信息结构、阅读语义及业务规则由所选场景和产品定义。
- 主要风险
- 高密度页面需明确紧凑例外；统一外观时保留不同任务布局，避免仅修改首页或将所有页面套成同一结构。
体验意图
未标注意图；可按模板正文判断是否适用。
这个模板提供什么
- 复用方式
- 只调整视觉表达，保留页面任务结构与业务行为。
- 结构与交互
- 沿用目标页面。
- 视觉设计
- 提供默认视觉参数，可按项目品牌或明确选择的风格调整。
- 组件规范
- 身份与状态徽章、用量进度、身份列表与复杂表格、信息提示与操作卡、趋势与分布图表、动作与分段筛选、字段与详情、空态与局部状态、图标与展开标记、数值与说明的视觉关联
- 应用后检查
- 提供视觉与跨页一致性检查。
整套交互预览
1 个示例适用范围
仅参照示例的视觉组合；示例的任务结构、业务语义与演示数据不构成风格的语义验收要求。
参照页面
- Vercel AI Gateway · 总览
直接参照 · 真实界面 · 观察于 2026-10-06
字体、指标、卡片、趋势与控件
需要登录并具有团队访问权限；从 Dashboard 选择自己的团队 → AI Gateway → Overview。入口会按账号跳转，读取当前导航链接。
历史真实控制台观察；日期不表示本次重新访问。
- Vercel AI Gateway · 预算与费用
直接参照 · 真实界面 · 观察于 2026-10-07
用量进度与费用布局
需要登录并具有团队访问权限；从 Dashboard 选择自己的团队 → AI Gateway → Budgets & Spend（团队路径 /~/ai-gateway/budgets）。入口会按账号跳转，读取当前导航链接。
历史真实控制台观察；日期不表示本次重新访问。
- Vercel AI Gateway · 供应商密钥
直接参照 · 真实界面 · 观察于 2026-10-06
身份行、徽章与次级操作
需要登录并具有团队访问权限；从 Dashboard 选择自己的团队 → AI Gateway → BYOK。入口会按账号跳转，读取当前导航链接。
历史真实控制台观察；日期不表示本次重新访问。
- Vercel AI Gateway · API Keys
直接参照 · 真实界面 · 观察于 2026-10-06
密钥列表与操作
需要登录并具有团队访问权限；从 Dashboard 选择自己的团队 → AI Gateway → API Keys。入口会按账号跳转，读取当前导航链接。
历史真实控制台观察；日期不表示本次重新访问。
- Vercel AI Gateway · 供应商密钥
适配推导 · 真实界面 · 观察于 2026-10-06
复杂宽表冻结身份列、滚动中的值与已有说明关联，以及批量任务卡；是沿基本风格的适配设计，未观察到同构原站组件
需要登录并具有团队访问权限；从 Dashboard 选择自己的团队 → AI Gateway → BYOK。入口会按账号跳转，读取当前导航链接。
历史真实控制台观察；日期不表示本次重新访问。
按模板应用无需访问来源网站；需要研究未覆盖组件时，可从这些入口继续查证。
应用前了解
- 会改变什么
- 在共享样式与组件层落实 theme 和 components 的视觉规则，保留业务含义、任务结构与交互行为。
- 将适用的视觉条款映射到实际组件、路由及详情状态，记录项目覆盖与证据；不适用项说明对象条件。
- 数据条件与适用限制
- 提供目标仓库与产品入口，可限定页面集合；agent 从实际路由和导航补齐范围，包括参数驱动的详情。
- 使用现有业务内容，不需要新增指标或数据服务；主题模式与页面例外按项目约束适配。
应用后的页面
主题
中性色画布、白色表面和轻边线建立层级；常态面板不靠重阴影，浮层才有阴影。系统无衬线字体，页标题 24px、区块标题 16px、正文与控件 14px、辅助文字 12px、主要指标 28px，正文行高 22px；数值等宽对齐。间距采用 4/8/12/16/24/32px，控件默认高 36px，面板与控件圆角 8px，表格单元默认内距 12×16px。已有导航保持结构，以浅灰底和清晰文字标记当前位置，页头及操作对齐；标签页采用轻选中底色或底线。主按钮深色，次按钮白底边线，hover、focus、disabled 与错误各可辨；保留明确品牌色角色。输入、筛选和表单沿同一控件体系，验证说明靠近已有字段。表格轻分隔、弱表头、数值对齐，密集页可记录紧凑例外；宽表局部滚动。图表使用低对比网格、清晰标签和稳定系列色，不因配色改变数据含义。详情、抽屉及展开区沿同一字体和表面规则；空态、加载及错误保持原业务含义，色彩配合文字。各页保留任务布局，窄屏允许重排且主要操作可达；主题模式沿项目已有能力映射语义色，示例只演示浅色。；可选：应用于整个产品、应用于指定页面集合
组件 · 身份与状态徽章
服务方、套餐等已有身份分类使用中性浅灰底与深灰字；已有状态按产品语义映射颜色并保留文字。字号 12px、行高 16px、内距 2×8px、圆角 6px，短徽章保持单行。长名称在徽章外换行；身份与状态通过分组和间距保持可辨，普通属性不争抢强调色。
组件 · 用量进度
已有进度组件采用一致排列：名称与右对齐数值同组，下方浅灰轨道宽度至少 96px、高 4px，已有补充说明用 12px 字体紧随对应读数；数值使用等宽数字。填充与状态色沿产品定义，保留现有数值、状态文字及轨道显示条件。
组件 · 身份列表与复杂表格
白色行与轻分隔承载已有列。主名称 14px，辅助文字 12px、行高 16px；同类标签、状态及数值对齐。表头 12px，单元格默认内距 12×16px。已有分组用左对齐标题和轻分隔接续列表，避免整组重灰底；行尾操作位置一致。长名称换行，宽表局部滚动；窄屏重排时同一对象的标签、值与补充文字保持关联，完整内容仍可读取。 需要跨列阅读的宽表可冻结身份列；冻结列不能占满窄屏。分组标题与各列对齐，横向滚动后可见值仍能读到它已有的单位、时间或补充说明，不把关联内容单独留在屏外列。
组件 · 信息提示与操作卡
普通说明采用 12px 辅助文字；已有提示使用文字与图标、轻边框，保留其现有显著性和动作。操作卡白底、8px 圆角、轻边线，已有标题、内容与操作区通过间距及分隔组织。同类摘要对齐，行高随内容适配，不用固定高度裁掉已有结果；保留产品的信息优先级与折叠范围。
组件 · 趋势与分布图表
沿用项目系列语义色，趋势线通常 2px，已有观测点及选中点保持可见；使用浅灰水平网格、12px 轴与图例文字。图例以小色点或短线配文字，提示框白底、轻边线与轻阴影。保留已有标签、单位、刻度、排序及数据读取方式，不因缩放或遮挡损失读数。
组件 · 动作与分段筛选
主动作深底白字，次动作白底浅边线，已有危险动作沿产品角色用色。默认高 36px、14px 字体、8px 圆角；hover、focus、disabled、处理中保持可辨且保留动作名称。已有分段控件使用轻边框容器和中性选中底色，保留选择语义、焦点及操作路径。
组件 · 字段与详情
输入与选择控件采用 14px 字体和 36px 默认高度；已有标签与验证说明紧邻字段。详情键值的标签用 12px 辅助色、值用 14px，长值换行；沿已有关系分组与对齐，窄屏纵向排列仍能对应标签和值。展开标题左对齐，浮层采用白色表面、8px 圆角与轻阴影；保留已有折叠内容、状态显著性和关闭、返回、键盘路径。
组件 · 空态与局部状态
已有空态、加载和错误沿所属组件宽度、字体与边线呈现，保留产品文字、状态含义及恢复动作。布局可重排，完整内容与操作不因颜色、截断、遮挡或窄屏消失。
组件 · 图标与展开标记
共享一套 16×16px 线性图标，1.5–2px 笔画，currentColor 跟随已有语义文字色；图标与文字间距 8px。同类展开入口使用同一 chevron，收起朝右、展开朝下。保留可读动作名称、装饰图标的辅助技术隐藏及完整点击区域与键盘路径，不把图标尺寸当点击尺寸。
组件 · 数值与说明的视觉关联
已有数值使用等宽数字，同组单位位置与小数视觉对齐保持一致；标签、数值及已有范围、时间说明紧邻分组。不同宽度下保持同一读数的关联，不改变产品定义的精度、舍入、单位、未知或历史含义。
项目覆盖
保留项目明确的品牌角色、业务语义和任务布局；按主题及组件规范替换旧外观。品牌色、紧凑字号或深色适配等例外逐项注明对象和用途，不能用“保留业务”笼统保留旧控件。
应用后检查
- VG-V01 字体层级：实际文字角色采用 theme 的字号、行高与字体；项目例外写明对象和用途。
- VG-V02 颜色角色：画布、表面、文字、已有状态与品牌角色按有效设计用色，已有文字区别保持可辨。
- VG-V03 间距与密度：组件采用约定间距及内距，内容换行后仍完整可读。
- VG-V04 边框与表面：轻边线、圆角及浮层阴影按组件角色一致使用。
- VG-V05 图标：同类图标的尺寸、笔画、间距与展开方向一致，保留动作名称和操作区域。
- VG-V06 标签值关联：标签、对应值及已有补充说明在分组、对齐和跨宽度重排后仍能正确对应。
- VG-V07 操作回归：本次样式改变涉及的现有控件、导航、展开与返回仍可操作，焦点与状态可见。
- VG-V08 既有意义保留：本次视觉调整没有隐藏、截断或重新强调内容而改变已有业务含义；基线语义问题单列，不自动整改或阻断纯风格任务。
- VG-V09 跨页一致性：适用页面及详情使用同一视觉规则，共享入口、具体例外与未核实范围有记录。
Prompt 模板
1 条## 执行方式 本 Prompt 依赖 skill web-ui-workflows（公开仓 https://github.com/lindong28/lindong-skills 的 web-ui-workflows/ 目录）。若尚未安装，先 git clone 该仓库到独立目录，取得完整 web-ui-workflows/；可放到 Claude Code 的 ~/.claude/skills/ 或 Codex 的 ~/.agents/skills/，已有同名目录不直接覆盖。无论是否已安装，本次会话都先读取该目录 SKILL.md 及下方指定工作流的正文，按其中的依赖说明准备工具并执行，不等待宿主重新发现 skill。下方占位符表示尚缺输入，先复用对话已有信息，只向用户询问仍影响任务的缺项；无需用户预先安装作者的配置。 ## 任务 使用 `web-ui-workflows apply-ui-template` 优化目标产品的视觉风格。 模板：Vercel Gateway 控制台 模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/vercel-gateway-console.json 目标仓库：[填写仓库路径] 产品入口：[填写 URL] 应用范围：[整个产品，或列出页面／路由集合] 项目明确约束：[有则填写] 读取当前定义的 theme、components、acceptance，按 skill 的合并规则形成或复用本次有效设计；本次只调整字体、颜色、间距、边框、图标，以及标签值分组、对齐和跨宽度关联。将适用的 VG-V 条款映射到实际组件、路由及详情状态，应用与审核共用有效设计和证据；不适用项说明对象条件，项目例外具名。关联示例仅提供视觉参照，其任务结构、业务含义与演示数据不成为当前风格的要求。 保留已有业务意义、信息优先级与交互；按本次变化检查可读和可操作回归。通用阅读原则由 product-ux-workflows 的共享原则拥有，场景显式阅读要求由所选场景拥有，历史、过期和筛选口径由产品定义。发现基线语义问题时单列现象、归属和后续动作，不静默忽略，也不自动整改或阻断纯风格任务；本次造成的回归在本次修复。 在项目共享样式与组件层落实规则，记录共享入口与后续页面继承方式。从目标真实入口检查本次变化涉及的宽窄屏、内容和操作，按 acceptance 的稳定 ID 分别报告符合、合理例外、未落实和未核实及证据。共享 CSS 加载不代替视觉符合性；隔离演示不代表真实业务链路已验证。
审核现有页面
## 执行方式 本 Prompt 依赖 skill web-ui-workflows（公开仓 https://github.com/lindong28/lindong-skills 的 web-ui-workflows/ 目录）。若尚未安装，先 git clone 该仓库到独立目录，取得完整 web-ui-workflows/；可放到 Claude Code 的 ~/.claude/skills/ 或 Codex 的 ~/.agents/skills/，已有同名目录不直接覆盖。无论是否已安装，本次会话都先读取该目录 SKILL.md 及下方指定工作流的正文，按其中的依赖说明准备工具并执行，不等待宿主重新发现 skill。下方占位符表示尚缺输入，先复用对话已有信息，只向用户询问仍影响任务的缺项；无需用户预先安装作者的配置。 ## 任务 使用 `web-ui-workflows review-ui` 审核目标产品的视觉风格。 模板：Vercel Gateway 控制台 模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/vercel-gateway-console.json 目标仓库：[填写仓库路径] 产品入口：[填写 URL] 应用范围：[整个产品，或列出页面／路由集合] 项目明确约束：[有则填写] 读取当前定义的 theme、components、acceptance，按 skill 的合并规则形成或复用本次有效设计；审核范围为字体、颜色、间距、边框、图标，以及标签值分组、对齐和跨宽度关联。将适用的 VG-V 条款映射到实际组件、路由及详情状态，应用与审核共用有效设计和证据；不适用项说明对象条件，项目例外具名。关联示例仅提供视觉参照，其任务结构、业务含义与演示数据不成为当前风格的要求。 保留已有业务意义、信息优先级与交互；按本次变化检查可读和可操作回归。通用阅读原则由 product-ux-workflows 的共享原则拥有，场景显式阅读要求由所选场景拥有，历史、过期和筛选口径由产品定义。发现基线语义问题时单列现象、归属和后续动作，不静默忽略，也不自动整改或阻断纯风格任务；本次变化造成的回归单列为待修复项。 本次只审核，不修改。从目标真实入口检查本次变化涉及的宽窄屏、内容和操作，按 acceptance 的稳定 ID 分别报告符合、合理例外、未落实和未核实及证据。共享 CSS 加载不代替视觉符合性；隔离演示不代表真实业务链路已验证。