PROMPT PLANETWeb UI

用量与调用观测工作台

场景模板控制台用量费用观测浅色数据表筛选指标趋势中性色记录请求日志搜索导出会话详情Token诊断路由重试账号额度Provider历史候选资格历史证据预算参考价币种规划

适用任务

从用量总览发现问题，沿对象、记录和单次请求追查原因；按需查看账号额度或进行临时预算规划。

适合
可整套采用适用页面，也可只采用其中一个子页面或模块。页面与模块的具体任务、数据条件和规则见各子项。
主要风险
示例为独立场景演示；页面关联须以目标产品真实身份、数据和能力为准。

体验意图

主要意图：掌握状态与恢复

次要意图：理解比较与决策

适用人群：追查调用与用量问题的产品维护者

访问阶段：查看状态、定位异常并追查原因

设计手段：从用量总览沿对象、记录和请求逐层定位；保留时间范围、筛选与返回位置，支持连续排查

适用前提：具备真实的对象标识、调用记录与指标口径；仅连接目标产品已有的数据关系与恢复操作

依据与边界：设计推导：当前旅程规则与诊断子项支持排查；未测线上故障恢复效果。

整套交互预览

8 个页面与模块

子页面与模块

整套采用适用页面，或打开一个子项单独预览、复制应用与审核 Prompt。

  • 用量观测控制台

    先看同一时间范围的用量与趋势，再按项目进入记录和详情。紧凑筛选、同构指标卡与清晰的数据表，适合费用、请求和资源使用观测。

    • 可选模块等价用量预算规划

      按项目、时间范围和单一币种，用临时目标比较参考价等价金额、进度与算术差额。

  • 记录探索工作台

    从搜索和筛选迅速定位记录，保留查询上下文进入详情，并导出当前范围。适合请求日志、任务记录和跨项目操作台。

  • 对象用量详情

    从列表进入会话、项目或 API Key 的用量详情，先辨认对象与指标，再筛选记录、查看来源并返回原上下文。

  • 请求诊断面板

    围绕一次请求，依次看结果、路由尝试、用量和费用。将失败与重试保留在同一条诊断路径，适合 LLM Gateway 和 Agent 调用排障。

    • 可选模块路由诊断

      先辨认历史选路意图，再查看实际 attempt 与候选资格证据。

  • 账号额度观察

    按 Provider、账号、计划和机器定位独立额度窗口，区分当前账号、历史快照与来源失败。

  • 控制台使用指南

    业务页面与使用指南共享产品导航；章节可独立打开、刷新和返回，阅读说明后回到原来的业务范围。

页面衔接

仅在本次采用范围与目标已有关系中使用以下规则。

  • 总览 → 对象详情 → 记录探索 → 请求详情使用目标项目真实的对象与请求标识，保留适用的时间范围、筛选和返回位置。独立借用一个页面时只对接目标已有入口。
  • 请求详情先给结论摘要，再给尝试链、用量费用和原始证据；路由诊断在该详情内解释历史尝试与候选证据，当前配置不能代替历史事实。
  • 账号额度按各自 Provider 与窗口表达；调用费用、订阅额度及临时预算分别保持来源、时间和单位，不能互相推算。预算规划卡片可嵌入已有总览，不要求建立真实预算账本。

这个模板提供什么

复用方式
按场景调整信息结构与交互；可直接采用默认设计，视觉风格按需另选。
结构与交互
提供布局说明。
视觉设计
提供默认视觉参数，可按项目品牌或明确选择的风格调整。
应用后检查
提供本场景的操作检查。
参照页面

由已批准的既有场景按读者任务聚合；子页面保留各自的来源与示例。

按模板应用无需访问来源网站；需要研究未覆盖组件时，可从这些入口继续查证。

应用前了解

会改变什么
  • 组织适用页面的导航、对象身份与上下文衔接；按需单独采用子项。
数据条件与适用限制
  • 仅使用目标已有或本次明确授权新增的数据和能力；各子项的数据条件仍独立生效。

应用后的页面

主题

三个控制台场景共享的视觉默认与交互规则；视觉风格仅替换视觉部分，品牌与业务约束由项目保留。；可选：采用控制台基线并保留项目品牌、按项目明确的设计约束调整

布局 · 任务导航与返回

总览 → 对象详情 → 记录探索 → 请求详情使用目标项目真实的对象与请求标识，保留适用的时间范围、筛选和返回位置。独立借用一个页面时只对接目标已有入口。

项目覆盖

保留项目品牌、技术栈、权限、指标口径和按需加载策略；本次可调整布局、字号、间距与密度。按读者任务采用设计规则，明确记录项目覆盖及理由。

共同设计规则

默认视觉

  • 中性色画布与表面，以轻边线区分层级，阴影用于浮层。主操作有清楚的视觉重点，状态色同时配文字；保留项目品牌色、键盘焦点和可读对比度。
  • 文字按职责分层：页标题24px、区块标题16px、正文及控件14px、辅助信息12px、指标28px；数值等宽对齐。间距、控件和表格采用同一组 tokens；这些是默认值，不是所有网页的合格阈值。
  • 同一项目各页共享字体、间距和控件外观。显式选择其他风格时只替换视觉表达，保持场景的信息优先级、交互和业务语义。

共同交互

  • 页面先回答当前任务：总览给状态与归因，列表给结果，详情给对象结论。管理与采集说明按需展开，影响结论的缺失、过期和错误保持可见。
  • 同一工作区跨页保留产品导航的结构、身份和当前位置；局部筛选属于页面内容区。窄屏沿用产品统一导航方式，列表图表使用可用宽度，表格局部滚动，主要动作仍可达。
  • 常用筛选直接可见，其余放入具名高级筛选。已选条件可见、可单独清除；下钻和返回保留范围。昂贵统计沿项目既有策略按需加载。
  • 表格优先展示对象、结果和可比较数值，长技术标识在详情中完整查看。详情先展示结果与时间摘要；请求诊断按摘要、尝试链、用量费用明细、原始证据递进，摘要可保留已有总耗时与总费用；关闭恢复查询和焦点。
  • 金额保留币种与统计范围，未知、已知零和小额正值可辨。没有数据不生成虚假趋势；真实错误不能作为辅助说明隐藏。
  • 加载时先呈现 URL 中的当前查询与已选条件，选项名称未就绪时保留条件身份；条件可清除、导航可用。已知结果明确所属范围，迟到响应不能覆盖新查询；空结果可清除条件，失败提供适用的恢复入口。按实际改动验证相关状态。

应用后检查

  • 整套采用只落实适用子项，单页或模块采用不会额外创建未选择的页面。
  • 从总览选择项目进入记录、查看并关闭请求详情、再返回总览，公共导航和适用范围保持；在相关慢加载阶段重复导航与条件操作，不等待数据才能离开。不存在的关联不提供虚假跳转。

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`，按“用量与调用观测工作台”场景模板优化目标 Web UI。

模板：usage-observability-workspace
模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/usage-observability-workspace.json
目标仓库：[填写仓库路径]
目标页面：[填写页面 URL、路由或产品范围]
采用范围：[整套适用页面，或填写需要的子页面／模块]
读者任务：[填写需要完成的事，可由项目上下文补全]
可选视觉风格：[可留空；指定时填写风格模板 URL]

根据读者任务确定本次采用的 sections，读取所选子项的完整定义、数据条件与 acceptance，并将适用的 journey_rules 用于页面衔接。整套采用不要求新增全部页面；只选子页面或模块时保留对应规则与相关公共约束，不引入其余页面。模块可嵌入目标已有同类区域，host_slug 不构成创建宿主页的要求。

按 skill 的有效设计规则合并所选范围、可选风格与项目明确约束，保留品牌和真实业务语义。各子项示例用于理解局部交互，跨页关联只采用目标真实存在的数据关系。

完成所选范围的适配和实现，已有符合项保留；沿真实入口验证查询、详情、返回和相关操作，核对宽窄屏表现。在目标项目现有记录中保存来源、内容摘要、所选子项、有效规则及验证边界。

审核现有页面

只审核，不修改
## 执行方式

本 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`，按“用量与调用观测工作台”场景模板审核目标 Web UI。

模板：usage-observability-workspace
模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/usage-observability-workspace.json
目标仓库：[填写仓库路径]
目标页面：[填写页面 URL、路由或产品范围]
采用范围：[整套适用页面，或填写需要的子页面／模块]
读者任务：[填写需要完成的事，可由项目上下文补全]
可选视觉风格：[可留空；指定时填写风格模板 URL]

根据读者任务确定本次采用的 sections，读取所选子项的完整定义、数据条件与 acceptance，并将适用的 journey_rules 用于页面衔接。整套采用不要求新增全部页面；只选子页面或模块时保留对应规则与相关公共约束，不引入其余页面。模块可嵌入目标已有同类区域，host_slug 不构成创建宿主页的要求。

按 skill 的有效设计规则合并所选范围、可选风格与项目明确约束，保留品牌和真实业务语义。各子项示例用于理解局部交互，跨页关联只采用目标真实存在的数据关系。

本次只审核，不修改。沿选定范围实际阅读、操作并核对页面衔接，报告问题、影响、模板符合、例外与未核实项。