---
version: alpha
colors:
  canvas: "#edf3f6"
  paper: "#fbfdff"
  ink: "#173044"
  primary: "#315efb"
  recovery: "#177c72"
  caution: "#a1591e"
typography:
  display:
    fontFamily: "Chakra Petch, Arial, sans-serif"
  body:
    fontFamily: "Arial, Noto Sans CJK SC, Microsoft YaHei, sans-serif"
  utility:
    fontFamily: "DejaVu Sans Mono, monospace"
rounded:
  panel: "16px"
  control: "8px"
spacing:
  unit: "8px"
components:
  page:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
  evidenceViewer:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    rounded: "{rounded.panel}"
  primaryButton:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.paper}"
    rounded: "{rounded.control}"
  recoveryText:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.recovery}"
  pendingText:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.caution}"
---

# roboRSI 研究网站设计 v0.4

## Overview

这是面向机器人研究者与项目协作者的研究内容站，不是任务调度后台。首要任务是说明 TaskGraph 如何进入执行后的复盘与候选提案，并让读者核对支撑这一说明的录像、数据和状态。

用户已要求重新设计，原有暖白与衬线品牌方案保存在 `revisions/v0.2/`。新版采用实验观测界面的视觉语言：冷白背景、蓝色方法与交互、青绿色局部恢复、明确的时间与动作编号。页面记忆点是一条连接真实录像采样、任务阶段和复盘文字的证据轨道。不会把自动阶段标签画成已验证的物理事实。

参考 PhysicalRSI 的长篇方法叙事、可切换架构图、按任务查看实验和录像来源。首页不沿用它的排名数字、名言或登山隐喻。也不沿用上一版用同样的编号给每个章节加装饰的方式；顺序编号仅用于确有次序的处理步骤和候选编号。

两个布局方向经过比较：单纯的论文摘要加视频墙能呈现素材，但难以说明反馈被怎样使用；因此采用“主案例证据浏览 + 方法解释 + 候选提案 + 两类独立实验”的顺序。初版的大号统计区已取消，统计放回各自的实验范围。

## Colors

上面的六个颜色为规范值。`tokens.css` 是运行时唯一颜色与字体来源；首页、报告 HTML、图表和交互使用同一变量。边框、弱背景与次要文字从这些变量混合生成，不维护第二套品牌值。

蓝色用于当前选择与方法连接，青绿色用于恢复类别，赭色用于待核验或尚未执行的阶段。颜色必须同时配文字，失败、待复核和未执行互不替代。

## Typography

英文品牌与短显示文字采用本地 Chakra Petch 半粗体，使用其几何轮廓呼应机械控制与时间采样。正文采用中文可读的无衬线回退；时间、动作编号与哈希使用等宽字体。展示字体不用于长中文正文，正文默认至少 15px，段落行高约 1.8。

字体随站点提供，不依赖第三方 CDN。PDF 使用本地可打印字体，公式保持可检索文本。

## Layout

主宽度 1280px。首屏用标题与真实诊断画面形成横向构图；下方证据浏览器把三路相机、六个采样点、阶段与复盘观察放在同一容器。继承流程的待执行部分采用虚线和文字状态。后续顺序为方法、恢复候选筛选、四项改进提案、历史架构比较、资料下载与真机计划。

手机布局在 760px 以下转为单列。录像保持 4:3，样本按钮可横向滚动，表格独立滚动或分页，不限制整个页面高度。sticky 导航不遮挡焦点和锚点。媒体、图像与状态文字预留空间，加载和出错时保持控件位置。

## Elevation & Depth

只在主证据容器使用轻微阴影，其余通过背景与留白区分内容。没有环境光、玻璃模糊或无限动画。录像默认静止，用户主动播放。减少动态效果偏好关闭滚动及过渡动画。

## Shapes

主媒体与证据容器采用 16px 圆角，按钮和选择器采用 8px，数据表保持方正边界。图示用程序绘制，不使用 AI 生成的机器人照片代替实验素材。

## Components

原生按钮负责动作、链接负责导航。活动按钮使用 `aria-pressed`，所有交互都有 hover、focus-visible 与禁用状态。没有登录、上传、删除、训练启动或发布动作，所以不创建后台 CRUD 的 UX 合同。

历史结果筛选保留任务、轮次与指标，筛选状态写入 URL；恢复样本筛选按类别和任务，分页固定每页 10 条，筛选时返回第一页。默认原生 select，允许平台决定菜单外观和键盘行为。没有远程搜索或提交接口。

视频摄像头切换保留当前视频时间；样本按钮使用记录的帧与实际帧率定位。仿真时间从 timeline 读取，展示视频时间与仿真时间各自含义。阶段标签是离线谓词推断。复盘仅看过六时刻、三视角的十八帧，页面明确该采样范围。

恢复类别的 18、6、47、4 来自冻结的 75 份历史重放侧录。数据不是新执行回合，标签不是人工准确率。四项候选卡片表示模型输出的通用改进建议，没有可执行子代或晋升状态。

全局滚动条使用标准属性与 WebKit 回退，保留可操作宽度与 forced-colors 支持。JavaScript 缺失时提供报告与下载入口；数据缺失时显示错误说明与源稿入口。视频失败保留相机、采样和文字，并提供直接下载链接。

## Do's and Don'ts

展示已经存在的来源、动作和结果。区分恢复候选、改进提案与被选择的子代。程序从 `data.json`、`analysis.json` 与 `taskgraph-data.json` 生成界面数值，不用图片上的数字作为数据源。

不将“接入完成”改写为“已经提高成功率”。不合并 75 个原生架构回合与它们的 75 份重放侧录。原生诊断回合独立为 1 个，Score 25/100、失败，在线 60 次 Astra 加 1 次复盘。

## Delivery and validation

站点继续为静态 HTML/CSS/JavaScript，支持本地文件和 HTTP。部署目标沿用会议正文 `robotrsi.ai`，完整站点小于 500,000,000 字节。三路新诊断录像和旧成功录像都可随包使用。原始训练数据与完整实验目录不打入站点。

验收包含数据哈希、计数、视频映射、浏览器键盘/筛选/分页/错误状态、手机与缩放、减少动态效果、PDF 页边界，以及 premium 静态审计。作者、真机素材和实际 dev 部署仍按对应状态说明，不自动补写。

静态 HTML 中的交互按钮与筛选器默认禁用，脚本校验数据并绑定行为后才启用，防止脚本缺失时出现可点击但无动作的控件。`site/` 是与部署包逐文件一致的预览输出，premium 审计仅扫描这个当前发布面；历史 revisions 不属于本次发布。

## 视频增补版 v0.4

用户要求增加大量录像、TaskGraph 可视化和流程演进视频。首页新增录像库、任务图浏览器和四部派生视频，位于方法与原有诊断之前。研究报告仍为 v0.3，新增的是呈现和证据浏览能力。

录像库以回合为单位，一张卡片对应三路相机，共 75 个回合、225 路历史录像。卡片每页 12 条，筛选保持在 URL，切换视角保留当前时间。没有结果时保留播放器尺寸并给出重置路径，不加载全部录像。页码随筛选归一，播放回合按钮会定位主播放器。

任务图保留全部 76 份输入图的节点、边和阶段，按首次出现排列位置。原生同次采集与重放/原视频参考分别说明。节点、阶段序列、动作滑块和视频互相定位；缩放与滚动条提供画布浏览，键盘按钮提供无拖动替代。没有映射时保留未知，不填造时间。大图只在自己的容器内滚动，手机页面仍自然纵向滚动。

四部流程视频分别呈现原生任务图、重放恢复候选、RSI 讲解和五轮探索节选。后两者明确标注讲解或不同条件，避免被理解为受控提升曲线。所有视频使用 native controls，页面内同时只播放一个视频。

新增控件继续由 `tokens.css` 供色，主逻辑由 `media.js` 管理；`app.js` 不提前启用尚未绑定的新控件。媒体索引与浏览器测试分别为 `video-library.json` 和 `media-validation.json`。站点保持 0.5 GB 以内，不改变任何研究数据或候选状态。