方舟控制台

## 执行方式

本 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。下方占位符表示尚缺输入，先复用对话已有信息，只向用户询问仍影响任务的缺项；无需用户预先安装作者的配置。

## 任务

当前定义：https://prompts.aiplanet.live/api/webui/v3/templates/volcengine-ark-console.json 。组件规范来自该模板的 components；实际审核记录所读定义及项目覆盖。

只读审核目标产品对方舟控制台风格的应用，使用 `web-ui-workflows review-ui` 模板审核分支。

目标仓库：[填写仓库路径]
产品入口：[填写 URL]
应用范围：[整个产品或指定页面]
项目明确约束：[有则填写]

以下规范自包含，参数为模板设计值，窄屏为适配设计。关联示例只提供视觉参照；新增组件仅对目标实际存在或已获授权的能力适用，不要求新建模型、作品、订阅或安装业务。产品品牌、状态与图表语义色可具名覆盖。

### 品牌栏与导航

桌面品牌栏高 56px，左侧品牌、中部顶层横向导航、右侧全局搜索。顶层项高 36px、圆角 8px，以浅紫灰底和深色字标识当前区域，可附紧凑辅助徽标。控制台内使用 220px 浅紫灰侧栏，条目高 40px、圆角 8px，16px 线性图标配可读名称；目录、文档或订阅按已有任务显示自己的局部导航，无局部导航的展示页铺满内容区。顶层导航、局部导航与内容标签各自表达层级，详情继承所属区域的选中态。窄屏品牌与搜索保留首行，顶层导航另起可横向滚动的一行，局部导航折为横向条，全部入口可达。

### 全局搜索浮层

紧凑搜索入口打开顶部居中的白色浮层，宽度上限 720px、圆角 16px、轻遮罩与阴影；搜索输入在上，结果按已有类型分组，名称、辅助信息与去向分层排列。空结果提供清除或改词入口，关闭与 Escape 可退出并回到触发控件，窄屏在视口内留 16px 边距。搜索范围与结果由产品提供。

### 推荐与模型目录

探索页采用居中标题与宽搜索、三列主推卡、分类标题和轻量条目列表。主推卡以 16:9 视觉区配下方名称、紧凑徽标和辅助描述；全部目录采用局部分类栏、工具行和轻边框网格卡，卡片内能力标签、说明与动作分组。网格随宽度降为两列或单列。沿用产品的筛选、详情及返回上下文，不因风格增加模型业务。

### 作品与沉浸展示

Gallery 类展示可采用局部深色：画布 #111214、表面 #191a1e、边线 #303139、正文 #f5f5f7、辅助 #b6b6c3、选中 #3b3b48、强调 #a5a2ff。大幅主视觉上叠具名标题、说明与选择器，暗色遮罩保证文字可读；下接分类筛选和作品网格，封面、名称与作者或类别保持关联。示例使用原创静态图形和手动切换；真实媒体按产品能力提供播放、静音及加载状态，不能用静态图证明播放可用。局部深色不扩成整个产品的默认主题。

### 订阅与权益展示

已有订阅页采用本区域侧栏和内容标签，状态卡以浅渐变摘要区连接用量区；用量名称、当前值/上限、进度与范围说明成组排列。权益用分组标签或列表，接入指引用编号步骤及对应动作。窄屏纵向堆叠，金额、周期、状态和操作权限沿用真实业务，合成示例不构成付费或额度默认。

### 文档与开发者入口

文档采用左侧章节导航、中间限宽正文、宽屏右侧页内目录；窄屏目录移至文首，文章行长与代码区独立控制。代码块有语言或模式标签、等宽正文、局部滚动和相邻复制反馈。CLI 介绍页采用居中大标题、简短说明、模式切换及代码卡，下接能力卡与案例展示。示例代码明确为演示，真实命令、链接和安装流程由目标产品提供。

### 页头与层级

系统无衬线字体；页标题 20/28px、区块 16/24px、正文 14/22px、辅助字 12/20px、指标 32/40px。页头右侧放紧凑工具组，距正文 24px，宽度不足时换行。已有标签页用底线或浅底表示选中。数值使用等宽数字。

### 指标与图表

浅色指标块中将标签、数值及范围说明关联分组。图表采用轻网格、清楚的图例和稳定系列色；保留产品单位、精度、时间与数据读取方式。

### 筛选与操作

控件默认高 32px、字号 14px、圆角 6px；主按钮紫底白字，次按钮白底浅边线。搜索、选择和刷新沿工具行对齐，分段筛选为浅灰紫容器与白色选中项。保留动作名称及危险、加载、禁用和焦点状态。

### 列表与表格

浅灰紫表头用 12px 辅助字，白色行与轻分隔，单元格内距 12×16px。14px 主名称下接 12px 次标识，状态色点配文字，行内动作用链接。数值等宽右对齐。宽表局部滚动，必要时冻结不占满窄屏的身份列。

### 详情与键值

具名返回、对象名称、状态和标识组成详情头；白色轻边框卡片按已有关系分组。12px 辅助色标签配 14px 值，桌面分栏、窄屏纵向配对，长值换行，说明紧随读数。保留返回时的筛选上下文。

### 提示与局部状态

普通提示使用淡紫灰底和紧凑图文。空态在所属区域居中留白，原因与已有恢复动作相邻；错误与警告沿产品语义。未知、零、未启用和失败保持区别。

### 表面与间距

画布 #f6f6fc、白色内容面、辅助面 #f7f7fa、选中 #ebebf5、边框 #e7e7ef、正文 #0b0b0f、辅助字 #5d5d70、主动作 #5252ff。内容区圆角 12px、普通卡片 8px、控件 6px，常态无阴影，浮层轻阴影。间距 4/8/12/16/24/32px，内容内距桌面 24px、窄屏 16px。


## 验证与交付

ARK-V01 字体层级：实际文字角色采用 theme 的字号、行高与字体；项目例外写明对象和用途。

ARK-V02 颜色角色：画布、表面、文字、已有状态与品牌角色按有效设计用色，已有文字区别保持可辨。

ARK-V03 间距与密度：组件采用约定间距及内距，内容换行后仍完整可读。

ARK-V04 边框与表面：轻边线、圆角及浮层阴影按组件角色一致使用。

ARK-V05 图标：同类图标的尺寸、笔画、间距与展开方向一致，保留动作名称和操作区域。

ARK-V06 标签值关联：标签、对应值及已有补充说明在分组、对齐和跨宽度重排后仍能正确对应。

ARK-V07 操作回归：本次样式改变涉及的现有控件、导航、展开与返回仍可操作，焦点与状态可见。

ARK-V08 既有意义保留：本次视觉调整没有隐藏、截断或重新强调内容而改变已有业务含义；基线语义问题单列，不自动整改或阻断纯风格任务。

ARK-V09 跨页一致性：适用页面及详情使用同一视觉规则，共享入口、具体例外与未核实范围有记录。

ARK-V10 顶层与局部导航：目标已有的区域入口、局部导航与详情归属区分清楚，选中、焦点与窄屏入口可见；新增示例能力不强制移植到产品。

ARK-V11 展示组件：适用的推荐卡、目录筛选、作品主视觉、订阅状态和文档代码块按各自组件规则呈现，内容与操作关联明确；局部深色及未验证媒体能力分别说明。

应用与审核使用同一有效设计和项目覆盖。从真实入口操作桌面与窄屏的导航、筛选空态与恢复、详情返回及已有展开，按条款报告符合、合理例外、未落实和未核实及证据。保留业务意义、信息优先级与交互；基线语义问题单列归属，不自动整改或阻断纯风格任务，本次造成的回归须修复。共享 CSS 加载不代替实际视觉符合性，隔离示例不代表真实业务链路。 审核只报告问题与最小修正方向，不自动修改实现。