三条必须先认下来的技术事实(它们改变了画板内容)

1. 微信 webview 里 PWA 三件套全部失效。 Service Worker 在微信内置浏览器不可用,manifest 不会被读, 没有安装入口。manifest 与 display: standalone 的意义只剩一件:访客自己在 Safari/Chrome 里 「添加到主屏幕」之后能全屏启动 —— 我们不引导,但留着这条路。所以画板必须以「微信 webview 里长什么样」为准绳画, standalone 是附带态。
2. 微信自己的顶部导航栏(约 44pt,显示页面标题)无法隐藏。 微信 webview 没有地址栏、没有底部工具栏, 但顶部这条微信原生栏一直在。画板必须把它画成占位区,否则我们的玻璃导航条会和它叠成两层标题栏。
3. 网页锁不了屏幕方向。 screen.orientation.lock() 只在全屏或已安装态可用,微信 webview 与 iOS Safari 都拿不到。「竖屏」只能落成 CSS 降级:横屏时维持竖屏版式、限制最大宽度居中。 请在 4u 画出这一态。

提示词正文(从这里开始复制;P0 批)

新建一份画板集,文件名 Agent X-Ray Mobile。这是一个已经投产的桌面站的移动端设计, 桌面端的 20 块画板(1a–1g、2a–2m)是终稿、已实现、这次一个像素都不动。 移动端是另起的一套,与桌面并存。

0. 这个站是什么(不了解产品画不出对的东西)

Agent X-Ray:访客与一个 AI agent 对话,同时像 DevTools 一样实时看到 agent loop 的内核轨迹 (34 种扩展事件)。它的卖点就是「内核可见」。四个顶部 tab:

• Runtime 工作台:桌面是三栏 —— 左 260px 会话列表 / 中 会话区(对话 + 工具调用卡 + 输入栏)/ 右 42%(min 300 / max 500)运行时面板,面板内四个 tab:Timeline(事件流,每行带一条按耗时定宽的色条)/ Chain View(扩展链路)/ Lifecycle Map(生命周期节点图)/ Tools(工具能力说明,只读)
• Notes 研习库:分类 → 系列 → 章节。章节页是 markdown 长文,桌面为 720px 正文 + 右侧悬浮「本章目录」 双栏,顶部有一条阅读进度线
• Skills 技能库:卡片列表 → 详情页。详情页桌面为 左 240px 粘性目录树 + 右文件预览, 预览分两态:SKILL.md(frontmatter 键值块 + markdown 正文)与 .py(带行号的代码视图)
• About:关于页

现有视觉语言 —— 克制的开发者工具风:白底 / 浅灰面 / 1px 实线边框 / 小圆角(4–12)/ 唯一品牌蓝 #2563eb / 等宽 JetBrains Mono 承载所有数据。深色模式已有。

1. 最重要的一条规则:两层语言,各管一半

移动端不是把桌面站等比缩小,也不是给整站套一层 iOS 皮肤。分两层画:

• 外壳层 = iOS 26:顶部功能条、底部 Tab Bar、Sheet 与弹层、按钮、分段控件、列表行、 页面转场、空状态、加载态、错误态。这一层完全按 iOS 26 的语言重画。
• 内核层 = 保留现有 DevTools 语汇:Timeline 的事件行与耗时色条、Chain View 的链路、 Lifecycle Map 的节点图、工具调用卡、代码视图与行号列、SKILL.md 的 frontmatter 块、 markdown 正文排版。这一层只做尺寸、触控与换行的适配 —— 颜色、字体、边框、语义色、 卡片解剖照搬桌面 token,一字不改。

为什么:这个站卖的就是内核可见。把 Timeline 做成 iOS 标准列表,它就不是 X 光机了。 玻璃与胶囊负责「这是一个 iOS App」,密集的 mono 数据负责「这是一台 X 光机」。

两层的接缝要画清楚:内核层永远装在一个 iOS 容器里,容器是 iOS 的,内容不是。 请在每块含内核层的画板上,把这条接缝用标注线指出来。

2. 载体:社交 webview 优先(这一节决定了很多取舍,先读)

站点主要在微信等社交 App 的内置浏览器(webview)里打开,其次是移动浏览器直接访问。 这不是普通的响应式网页,以下每条都会改变画法:

• 顶部永远有微信自己的导航栏(约 44pt,状态栏之下,显示页面标题,网页无法隐藏、无法改色)。 每块画板都要把它画成占位区(浅灰虚线块 + 标注「微信导航栏 · 不可控」)。 由此产生一条设计裁定:我们自己的顶部条不是标题栏,是功能条 —— 它不重复显示页面标题(微信已经显示了),只放左右两个功能按钮和必要的状态。 请在画板上写明这条取舍。
• 微信 webview 没有地址栏、没有底部工具栏 —— 所以底部 Tab Bar 可以放心贴底, 这是社交 webview 相对普通浏览器的优势。但在 Safari 里会与浏览器工具栏叠,4u 画这一态。
• 玻璃材质必须有降级方案。Android 微信用的内核对 backdrop-filter 支持不确定。 请为每一处玻璃同时给出两套值:
  • 支持时:rgba(255,255,255,0.72) + backdrop-filter: blur(24px) saturate(180%)
  • 不支持时:实底 rgba(255,255,255,0.94) + 底缘 1px rgba(0,0,0,0.06) 分隔线 在 4u 画一张「降级态」对照图,证明降级后版式不塌、层级仍清楚。
• 字体在 Android 上拿不到 SF。字体栈写成 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif, 并标注:iOS 上是 SF、Android 上是苹方 / 系统黑体,字号与行高按两种字体都能站住的值取 (中文正文 15/1.75,别用 iOS 专属的紧行距)。mono 数据仍是 JetBrains Mono(站点自托管,两端一致)。
• 可视高度要扣。390×845 的屏,微信里真正归我们的内容高度 ≈ 845 − 59(状态栏) − 44(微信栏) − 34(Home Indicator) ≈ 708。 画板仍按 390×845 出(这是你给的标准模板),但把上述三块画成占位区, 并在画板上标出内容安全高度 708 这条线。首屏要放的东西按 708 排,不按 845 排。
• 禁用双指缩放:画板上每屏标注「本屏不可双指缩放」,并据此保证:正文最小 15px、 mono 数据最小 11px,且代码块 / 宽表 / Timeline 色条 / 安装命令行在各自的盒子里横滚,页面本身永不横滚。
• 横屏做不到硬锁:4u 给一态降级 —— 横屏时维持竖屏版式、最大宽度 430 居中、两侧留白。

3. iOS 26 视觉语言的具体落法

静态画板里怎么把 Liquid Glass 画对:

• 材质:见上一节的「两套值」。玻璃与降级两态都要有。 深色玻璃 rgba(28,28,30,0.72),降级实底 rgba(28,28,30,0.94); 顶缘 1px 内高光 rgba(255,255,255,0.5)(深色 rgba(255,255,255,0.12)); 外投影极轻 0 1px 12px rgba(0,0,0,0.06)
• 全站只有三处用玻璃:① 顶部功能条 ② 底部 Tab Bar ③ Runtime 的输入栏。 内容卡片一律实底,否则整页发糊、数据读不清
• 控件浮在内容之上:内容 edge-to-edge 延伸到玻璃底下(滚动容器上下各留出与玻璃等高的内边距)。 滚动到顶 / 到底时玻璃后面能看见内容边缘 —— 这是 iOS 26 的关键观感
• 圆角同心:外层容器圆角 R、内边距 P,则内部元素圆角 = R − P。阶梯表: Sheet 20 / 分组卡 16 / 卡内元素 10 / 徽标与 chip 全圆(胶囊)/ 输入框全圆
• 胶囊:主按钮、次按钮、分段控件、标签、徽标一律 full-round;内容卡片不是胶囊
• 大标题:每个 tab 的一级页(Notes 首页 / Skills 首页 / About)用 iOS 大标题 34px/700, 向上滚动时收进功能条变成 17px/600。注意微信里上方还有一条微信标题栏 —— 收起态不要再出现一个居中标题,改为左对齐的小标题,避免与微信栏形成两个居中标题。请标注这条
• 分段控件:运行时面板的四个 tab 用它
• Sheet:两档 detent —— medium ≈ 内容安全高度的 50%、large ≈ 92%; 顶部 grabber(36×5、rgba(120,120,128,0.4)、圆角 2.5);圆角 20 只在上两角;背后内容轻微缩放并压暗
• 列表:iOS inset grouped —— 分组卡圆角 16、左右外边距 16、组内行高 56、 行间 1px 分隔线从左内边距 16 起(不通栏)、行尾 chevron #c7c7cc
• 触控:所有可点元素命中区 ≥ 44×44pt;按下态 = 底色加深一档 + 0.97 缩放
• 动效:转场用 iOS 默认曲线;现有三个动画照旧保留、不新造 —— omPulseBg(Lifecycle 活跃节点)/ omWaveSweep(Timeline 进行中行的扫光)/ omSpin(生成中转圈)

4. 尺寸与栅格(硬约束)

• 基准画板 390 × 845,每块画板都按这个尺寸出;上方画出状态栏 59 + 微信导航栏 44 占位, 下方画出 Home Indicator 34 占位,标出内容安全高度 708
• 左右内边距 16;分组卡内边距 16;垂直节奏取 8 的倍数
• 动态布局(硬要求):所有横向尺寸用比例 / min() / max() / flex, 不许出现任何依赖 390 的写死宽度。每块画板下方必须标注:在 320(iPhone SE)与 430(Pro Max)两个宽度下哪个元素吸收差值、哪个保持不变
• 高度也要动态:微信栏高度、状态栏高度、有无 Home Indicator 各机型不同。 首屏内容不许假设 708 是定值 —— 标注「哪一块是弹性的、哪一块固定」

5. token 映射表(哪些原样保留、哪些换)

原样保留(内核层的身份,一律不改):

• 品牌色 #2563eb(hover #1d4ed8)
• 语义:成功 #16a34a + rgba(34,197,94,.04/.25);错误 #ef4444 + rgba(248,113,113,.05/.3)
• 事件模式四色:notify #9ca3af · veto #ef4444 · chain #2563eb · takeover #f9c22e
• 分类点四色:#2563eb / #16a34a / #f9c22e / #8b5cf6(Notes 与 Skills 共用)
• 工具分组四色:纯函数组 #6b7280 · 外呼组 #2563eb · 会话绑定组 #f9c22e · 沙箱执行组 #8b5cf6
• 等宽字体 JetBrains Mono;代码高亮只用三色:关键字 #2563eb / 字符串 #16a34a / 注释 #9ca3af
• 工具调用卡的解剖:左 工具名 mono 12/600、中 摘要 mono 11 弱化色单行省略、右 耗时 11 tabular、末 12px 箭头
• Timeline 耗时色条的宽度公式 min(198, max(4, round(sqrt(ms)*11))) —— 上限 198 要按屏宽重算, 改成占可用宽度的比例,并在画板上写出新公式
• 小标题语汇:mono 10px/600 #9ca3af、字距 0.08em(INPUT / RESULT / INSTALL / FILES)
• 深色模式的一整套对应值(桌面已有,照搬)

换成 iOS 26 语汇:

6. 导航骨架(所有画板共用,先画这个)

• 底部 Tab Bar(玻璃,高 49 + 底部安全区 34):四格 Runtime · Notes · Skills · About, 每格 = 图标 + 10px 文字,选中态品牌色。 必须标注:站点后台可以逐个关掉 tab(某个 tab 被关时那一格不渲染,Tab Bar 变三格 / 两格, 剩下的格子平分宽度)。请另出一张三格态的示意
• 顶部玻璃功能条:左 功能按钮,右 功能按钮,中间不放页面标题(微信栏已有); 中间可以放会话状态之类的轻量信息,或留空。三个位置的命中区都是 44×44
• 主题切换:桌面在导航条右端有一个月亮图标。移动端收进 About 页,不占功能条位子(请标注这条取舍)

7. 逐块画板 —— P0 批:Runtime(10 块)

Runtime 是三栏变一屏,最难,先画这批。核心裁定(请按这个画,并在画板上标注):

桌面三栏 → 移动端 = 会话区占满主屏;左栏会话列表变成从左侧滑出的 Sheet; 右栏运行时面板变成从底部升起的 Sheet(两档 detent)。 移动端替代「右栏一直在动」的信号是:顶部功能条右侧的「运行时」按钮上实时跳动的事件数

• 生成期间的一个呼吸点。

• 4a Runtime · 空状态(源:1e) 功能条:左「会话」图标、右「运行时」按钮(此时无徽标)。 内容:居中的产品字标 + 一句话说明 + 3–4 条建议问句(iOS 胶囊行,整行可点)。 底部:玻璃输入栏 + Tab Bar。运行时 Sheet 未升起。

• 4b Runtime · 对话进行中(源:1a) 用户气泡(右对齐、#eff6ff 底、圆角 18、最大宽 85%)→ 助手正文 → 两张工具调用卡(绿色 read_file / 红色 bash,解剖照抄 1a,宽度自适应、摘要单行省略)→ 助手正文(流式中)。 输入栏:发送按钮转圈禁用(omSpin)。 功能条右侧「运行时」按钮:事件数徽标 + 呼吸点。 标注:键盘弹起时 Tab Bar 隐藏、输入栏贴键盘上沿、内容区高度按可视视口收缩 (微信 iOS webview 上 position: fixed 元素在键盘弹起时会漂,这条要写进画板注释,让实现侧知道不能用裸 fixed)。

• 4c Runtime · 一轮完成(折叠态)(源:2l) 处理过程收成一行「处理详情 · 2 次模型往返 · 2 次工具调用 · 0.4s」,行首箭头, 行尾 6px #ef4444 圆点(有工具出错或被拦截时);下面是最终回答。发送按钮回常态。 照抄 2l 的三条规则并标注:无工具调用不出折叠行 / 进行中不折叠 / 最终回答为空只剩折叠行。

• 4d Runtime · 折叠行展开 + 卡片展开(源:2m) 折叠行展开(左侧 1px 竖线 + 左内边距 14),bash 卡再展开出 INPUT / RESULT 两段 mono 11/1.6、每段最多 6 行、超出接 …(已截断)、不做内部滚动。 移动端补充:两段各自可横向滚动(长命令不换行)。

• 4e 运行时 Sheet · Timeline(medium detent)(源:1a 右栏) Sheet 顶部:grabber → 统计条(tokens · ctx · events,桌面在会话顶栏,移动端收进这里)→ 四格分段控件(Timeline / Chain / Lifecycle / Tools)。 内容:事件行列表,每行 = 模式色点 + 事件名(mono)+ 耗时色条 + 时长。 medium 档时上半屏仍看得见对话 —— 这是「边看输出边看事件」的关键,请把这条标注出来。 进行中的末行保留 omWaveSweep 扫光。

• 4f 运行时 Sheet · 事件详情展开(large detent)(源:1b) 某一行点开后的详情:字段键值块(mono 11)、payload 预览、脱敏标记。 标注:payload 盒子横向滚动,页面不横滚。

• 4g 运行时 Sheet · Chain View(源:1c) 桌面是横向链路,移动端改为纵向链路 + 左侧连接线,节点内容与配色照搬。请标注这条形态转换的理由。

• 4h 运行时 Sheet · Lifecycle Map(源:1d) 节点图在窄屏下的排布(建议:纵向分组 + 每组内横向 2–3 列),活跃节点保留 omPulseBg。

• 4i Tools 面板 · 列表 + 一项展开(源:1f / 1g) 四个工具分组(纯函数组 / 外呼组 / 会话绑定组 / 沙箱执行组),分组色点照搬。 展开态:中文标签 + 描述 + 入参 JSON Schema(mono,可横滚)+ 输出形态。 只读,不出现启停开关、日限额、provider 名、model 名。

• 4j 会话列表 Sheet(源:1a 左栏) iOS inset grouped 列表,行 = 标题(单行省略)+ 相对时间;顶部「新会话」主按钮; 左滑出现删除(替代桌面的悬停删除按钮);下拉刷新(替代桌面的刷新图标按钮)。 这两个是移动端固有的交互原语,不是新功能,请在画板上注明这一点。 微信注意:整页下拉会露出微信的「网页由 … 提供」白条 —— 下拉刷新只允许发生在这个 Sheet 的列表容器内,页面本身禁止 overscroll。请标注。

8. 每块画板必须带的东西

照 2i–2k 的做法,每块画板下方带一块「裁定」面板,写清:

1. 它对应桌面哪一块画板,形态改了什么、为什么
2. 320 与 430 两个宽度下的伸缩规则(谁吸收差值)
3. 本屏哪些盒子可以横向滚动
4. 用到的所有 token(保留的 / 换掉的各列一遍)
5. 有内核层时,两层的接缝在哪
6. 有玻璃时,降级态怎么退

9. 明确不做(越界的一律不画)

站点范围以既有画板为准,移动端只换呈现、不加功能。以下一个都不许出现:

• Skills / Notes 的搜索、筛选、点赞、评论、安装量、排序(桌面裁定过:整个 Skills tab 只读)
• 会话区的模型名 / provider 名 / 分段 token 与费用 /「思考」块
• Tools 面板的启停开关 / 日限额 / 剩余次数
• 任何分享卡片、收藏、推送通知、账号登录入口(微信自定义分享要 JSSDK,是新功能,不在本轮)
• 「添加到主屏幕」引导(所有者裁定不做)
• 任何桌面站没有的数据字段

移动端允许新增的只有交互原语:Sheet、左滑、下拉刷新、大标题收起、键盘避让, 以及 4u 的载体适配态。

P1 批(画完 P0 再贴)

接着 Agent X-Ray Mobile,按同样的规则再画 8 块。

• 4k Notes 首页(源:2a):大标题「Notes」+ 按分类分组的系列卡列表(分类色点保留); 功能条右侧 RSS 图标。不加搜索框。
• 4l 系列目录(源:2b):系列头(标题 / 简介 / 章节数 / 更新时间)+ 章节列表(inset grouped, 行 = 序号 + 标题 + 阅读时长)。
• 4m 章节阅读(源:2c):桌面的右侧「本章目录」双栏在移动端取消, 正文单列占满(左右 16)。功能条底缘保留 2px 阅读进度线(接真实滚动)。 正文排版照搬 2c;代码块、宽表、行间公式各自横滚。 底部:上一章 / 下一章两枚胶囊按钮。功能条右侧加一枚「目录」按钮。
• 4n 本章目录 Sheet + RSS 订阅 Sheet(源:2c / 2d): 目录 Sheet(medium detent,当前章节高亮)与 RSS Sheet(订阅地址一行 mono + 复制按钮, copied 态各画一次)。 微信注意:webview 里 navigator.clipboard 可能不可用,复制按钮要有「长按选中」的兜底提示,请标注。
• 4o Skills 首页(源:2f):大标题「Skills」+ 按用途分类的分组; 卡片 = 等宽 skill 名 + 「自研 / 精选」描边微徽标 + 一句话中文描述 + 出处与文件数。 卡片上不放按钮(复制 / 下载都在详情页)。页脚两行统计与解释照搬。
• 4p Skill 详情 · SKILL.md 态(源:2g): 桌面的 240px 粘性目录树在移动端改为「顶部横向滚动的文件 chip 条」(胶囊,当前文件选中), 另在功能条右侧留一枚「文件」按钮打开完整目录树 Sheet —— 一个 skill 通常 3–8 个文件, chip 条比 Sheet 少一层操作,树留给深目录。请标注这条取舍。 其余:面包屑、mono 22px 大标题 + 徽标、GitHub ↗ / 下载 zip 两枚胶囊按钮、 INSTALL 一行安装命令(mono、横滚、右侧复制按钮)、frontmatter 键值块 + markdown 正文。 微信注意:webview 里 zip 下载与外链跳转都受限(会落到微信自己的下载提示或要求「在浏览器中打开」), 请为这两枚按钮画一个「在微信中不可用」的提示态。
• 4q Skill 详情 · 代码文件态 + 文件树 Sheet(源:2h): 带行号列(宽 36、mono 11 #9ca3af、右侧 1px 分隔)的代码视图,整块横滚; 高亮只用三色。安装命令处于 copied 态。同屏叠一个文件树 Sheet 的示意。
• 4r About(源:2e):头像 + 名字 + 简介、要点列表、技术栈条形图、 主题切换开关(iOS Switch,从导航条移到这里)。

P2 批(画完 P1 再贴)

• 4s 加载骨架(源:2i / 2j,一块画板并列两屏):Skill 详情加载态与 Notes 章节加载态。 骨架不新造视觉语言:填充 #eeeeee、压在灰面上降一档 #e0e0e0、圆角走 4/5/6/7 档、 动效只用 omPulseBg 与 omSpin;Notes 章节加载态不出现阅读进度线(正文没到就不存在「读到哪」)。 移动端补充:骨架要按 iOS 分组卡的形状对位,不是按桌面的双栏。
• 4t 错误态 A / B(源:2k):A 页面出错(带可复制的 err_ + UTC 标识)/ B 找不到(回显访问路径)。 同一版式:单列居中、10px 方点(A #ef4444 / B #9ca3af)、 品牌色实心胶囊主按钮(全站唯一的实心按钮层级,由 2k 定为出口层级)+ 次级文字链。 补一态:断网。文案只说「需要联网」+ 重试按钮,不做离线阅读(那是新功能,不在本轮)。
• 4u 载体适配四态(一块画板并列四屏,桌面无对应物):
  1. 微信 webview(主场景):顶部微信导航栏占位 + 我们的功能条,底部无浏览器工具栏、Tab Bar 直接贴安全区
  2. 移动浏览器直接访问:顶部 Safari 地址栏占位 + 底部 Safari 工具栏占位 —— 我们的 Tab Bar 会与 Safari 工具栏叠,请画出这一态并给出处理(建议:Tab Bar 随滚动隐藏 / 显示, 与 Safari 工具栏同步的观感),标注理由
  3. standalone(访客自行「添加到主屏幕」后):无任何浏览器 chrome,顶部只有状态栏 —— 这是内容高度最大的一态。我们不引导安装,但这条路留着
  4. 玻璃降级 + 横屏降级:backdrop-filter 不可用时的实底态;横屏时竖屏版式最大宽 430 居中

画完之后(给你自己看的收尾清单)

1. DesignSync 写回云端项目,确认 Agent X-Ray Mobile.dc.html 已在云端
2. 拉回本地 design/;因为是新文件,不需要三方合并,直接落盘
3. 更新 design/README.md:加一行文件说明 + 一条「画板增删记录」(21 块、4x 段、日期、理由)
4. 更新 CLAUDE.md 规则 8:加 R-MOBILE 修订段(六条裁定 + 三条技术事实), 并把「新画板从 2n 顺延」改成「桌面 2n 顺延 / 移动端 4x 段」
5. 这些都完成之后,R-MOBILE 才允许开工 —— 实现侧的提示词在 rounds/round-mobile/impl-prompt.md