Pulse 工作台

视觉风格控制台整站风格浅色侧栏紧凑页头Pulse

适用任务

白色侧栏、浅灰画布与紧凑的全宽页头，以轻分隔和一致间距连接数据、操作与说明。

适合: 浅色控制台、开发者工具或内部工作台的整站及指定页面集合；仅复用视觉表达与组织，页面结构和业务由目标产品决定。
主要风险: Pulse 的原站窄屏与全局暗色未观察；Gateway 公网入口当时未成功观察，来源是本机页面。用户认可参照方向并纠正文案和指南导航，但尚未终审本模板；当前仅私有开发候选。

体验意图

未标注意图；可按模板正文判断是否适用。

这个模板提供什么

复用方式: 只调整视觉表达，保留页面任务结构与业务行为。
结构与交互: 沿用目标页面。
视觉设计: 提供默认视觉参数，可按项目品牌或明确选择的风格调整。
组件规范: 导航与区域、紧凑全宽页头、页头与正文衔接、指标、图表与表格、控件与状态、详情与说明、紧凑信息行、横向排名与折叠分组
应用后检查: 提供视觉与跨页一致性检查。

整套交互预览

1 个

示例适用范围

仅视觉组合与组件外观；导航任务、模拟数据和示例操作不构成产品功能要求。

参照页面

Philo Pulse · Pulse 工作台
直接参照 · 真实界面 · 观察于 2026-10-19
白色导航、浅灰画布、白卡与蓝色动作的整体关系
需要登录；应用模板无需访问来源站。
2026-10-19 已在真实登录态观察首页、/dashboard/、/pages/；这里只借用视觉关系，窄屏及具体设计值见模板适配说明。
LLM Gateway · 本机调用记录页
直接参照 · 真实界面 · 观察于 2026-10-19
紧凑全宽 banner、底线和正文衔接；仅本机页面观察
作者当时本机实例；该地址不是供读者访问的在线演示。
2026-10-19 本机页面真实观察，仅支持 banner 与正文衔接；同日公网 llm-gateway.philoai.xyz 未成功观察，不主张线上等同。
agent-monitor · Monitor 项目适配记录
适配推导 · 公开展示材料 · 观察于日期未记录
208px 导航、具体参数、窄屏与组合设计，为项目适配
项目源记录；公开可达性未核实，应用时以本模板完整定义为准。
项目本机及 MacStudio 的指南页面在 2026-10-20 验证。此来源链接指设计记录，不冒充在线网页；当前示例为独立提炼，用户尚未终审模板。

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

应用前了解

会改变什么: 在共享组件与样式层应用主题、页头与正文的视觉关系，覆盖选定页面及展开状态。
数据条件与适用限制: 目标已有可运行界面及业务内容，允许视觉改造；适用范围与项目例外由目标确认。

应用后的页面

主题

系统字体；正文 14/21px、紧凑页头 600 14/20px、区块 600 16/24px、辅助说明 13/21px、标签 12px、指标 32/40px。白色侧栏与白色全宽页头围绕浅灰画布，内容卡轻边线、6px 圆角；常态无阴影。默认浅色，目标已有主题按项目明确约束适配。；可选：应用于整个产品、应用于指定页面集合

组件 · 导航与区域

已有产品导航使用白色侧栏，轻右边线；默认宽 208px，名称与当前项清楚对齐。区域切换紧凑成组，选中项浅蓝底与深色文字，焦点可见。窄屏把导航重排到顶部并保证当前项与其余入口可达。区域名称沿用目标产品，不照搬来源的“工作空间”。

组件 · 紧凑全宽页头

白色 banner 铺满主内容区，最小高 72px、上下内距 16px、底部 1px 分隔线；左侧以“所属区域 / 当前页”的视觉关系呈现已有层级，末项为主标题，右侧容纳当前页操作。仅真实可返回的上级呈链接。标题 600 14/20px；长标题和工具组换行，不截断必要身份。

组件 · 页头与正文衔接

banner 下接浅灰画布，首个正文块默认距分隔线 28px；页头和正文沿同一水平内距对齐：桌面 28px、窄屏 16px。正文白卡用 #e2e4e7 边线和 6px 圆角，卡间留 24px，避免在页头外再套一张圆角卡。

组件 · 指标、图表与表格

同组指标放在同一白色容器，用轻分隔或留白区分。数值用等宽数字，表格数值沿列对齐；图表网格轻、图例与系列保持项目定义。表格浅灰表头、白色行、轻行线，宽表局部滚动；窄屏标签与值仍成组。

组件 · 控件与状态

控件高 36px、圆角 6px，蓝色主按钮、白色描边次按钮；搜索、筛选和操作在同一行对齐，空间不足时换行。状态色配文字，沿用目标的成功、错误和禁用语义。空态、加载和错误位于所属区域，保留已有恢复入口。

组件 · 详情与说明

对象详情、键值、帮助正文和代码块继承同一字体、边线和间距。标签与值对应，长标识可换行或局部滚动；说明紧邻相关操作。浮层保留关闭、焦点和返回行为，文档拆页是可另选的场景能力。

组件 · 紧凑信息行

已有额度、容量或配额行将身份、窗口标签、比例条和必要读数紧密成组，宽度允许时让读数、比例条和重置时刻同行，数值用等宽数字；低频来源与技术字段在具名详情中展开。影响理解或操作的异常及未知标记留在对应主值旁，已由可读时间表达的时效结论不重复占行。窄屏按账号或对象成组换行，不能将标签和值拆散；是否提供窗口、重置时间和详情由场景或产品决定。

组件 · 横向排名与折叠分组

已有分类排名采用带数值刻度的横向柱状图：分类标签置于左侧，较厚的单色实心柱共享起点，精确读数紧随各自柱末；不铺满灰色进度轨道，留白和数值轴组织比较。窄屏可缩略轴标签，完整名称与数值在同数据明细中可读。已有日期分组用轻分隔与紧凑 summary，折叠箭头、日期和摘要保持对应；排序、分组口径、汇总与钻取行为由场景定义。

项目覆盖

保留项目品牌、业务含义、任务布局、动作权限和数据口径；主题、导航形式及密度的项目例外记录在有效设计中。示例的指标、路由、指南和交互只用于展示，不要求目标新增这些业务。

应用后检查

PW-V01 实际宽窄屏中，白色导航、白色全宽页头、灰色画布与白卡的层级清楚；页头底线与正文留白相连，不套成独立卡片。
PW-V02 页头与正文对齐；字号、间距、边线、圆角及颜色按 theme 和组件角色生效，项目例外有对象和理由。
PW-V03 标签、取值、状态与操作在长内容、换行及局部滚动后仍对应；长页头与操作不互相遮挡。
PW-V04 实际操作本次受影响的导航、筛选、表单、展开与返回，现有意义和操作保持；基线语义问题另列。
PW-V05 多页面与详情使用同一有效设计；来源、项目适配、验证范围和未取得的用户反馈分别记录。
PW-V06 紧凑信息行、横向排名与日期分组在宽窄屏中保持身份、标签、读数和操作对应；折叠状态不裁掉场景要求保留的摘要、异常或未知标记。

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`，按“Pulse 工作台”模板优化目标 Web UI。

本次仅应用视觉风格，保留目标产品的任务结构、业务意义和操作；示例中的业务页面不构成新增要求。

模板：pulse-workspace
模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/pulse-workspace.json
目标仓库：[填写仓库路径]
产品入口：[填写 URL]
应用范围：[页面或路由集合]
项目明确约束：[有则填写]

读取定义与关联示例，按 skill 的有效设计规则适配目标；来源和项目推导边界随定义保留，无需访问来源站。

完成适配与实现。从实际入口验证 acceptance 声明的路径、宽窄屏与本次涉及的状态，记录实际来源、有效设计、项目例外、读数和未核实部分；尚未取得的用户反馈保持未取得。

目标已有紧凑信息行、分类排名或日期分组时，按定义保持身份、标签、读数与操作的视觉关联；排名复用带刻度的实心横向柱及柱末读数，宽窄屏及折叠后仍可读；是否提供这些组件及其业务口径由所选场景和产品决定。

审核现有页面

只审核，不修改

## 执行方式

本 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`，按“Pulse 工作台”模板审核目标 Web UI。

本次仅应用视觉风格，保留目标产品的任务结构、业务意义和操作；示例中的业务页面不构成新增要求。

模板：pulse-workspace
模板定义：https://prompts.aiplanet.live/api/webui/v3/templates/pulse-workspace.json
目标仓库：[填写仓库路径]
产品入口：[填写 URL]
应用范围：[页面或路由集合]
项目明确约束：[有则填写]

读取定义与关联示例，按 skill 的有效设计规则适配目标；来源和项目推导边界随定义保留，无需访问来源站。

本次只审核，不修改。从实际入口验证 acceptance 声明的路径、宽窄屏与本次涉及的状态，记录实际来源、有效设计、项目例外、读数和未核实部分；尚未取得的用户反馈保持未取得。

目标已有紧凑信息行、分类排名或日期分组时，核对宽窄屏中的标签和值对应、实心横向柱、共享刻度与柱末读数的对应，以及折叠摘要的可读性；业务口径按所选场景和产品判断。