派生取舍(实现者定,画板照此画):两种新卡沿用 R-CARDS 卡片语汇(2s / 2t 的外框、标题行、卡底),不新造第三套; 发送之后卡进入锁定态(选项不可点、已选高亮保留、按钮禁用、文案不变),一轮生成中(busy)也是同一副禁用视觉; 帧高由模型声明、夹到 160–480(移动端上限 360),缺省 320;非法 / 超限回落成普通代码块(语言标签 xray-card / xray-html),不画错误提示; 流式期间围栏未闭合先显示骨架(照 2i 语汇),HTML 组件的骨架按声明高度立住;帧内唯一允许的交互是 <details> 折叠(无脚本)。

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

在项目里新建两份画板集:Agent X-Ray Cards 2(桌面 2u、2v)与 Agent X-Ray Mobile - Runtime 2(移动 5a、5b)。

先读一遍现有画板再动手:1a(工作台主屏:会话区的节奏、用户气泡、助手正文、工具卡、底部输入区)、2c(markdown 排版:表格 / 列表 / 代码块的既有画法)、 2l / 2m(一轮完成后的折叠行与卡片展开体)、2s / 2t(R-CARDS 六种信息卡的外框、标题行、卡底、骨架、回落,本轮两种新卡就长在这套语汇上)、 2i(骨架语汇)、4c / 4y / 4z(移动会话区与移动端信息卡)、4u(移动端载体适配态,含键盘)。 新画板画的是助手回复里的两类组件:可回传的卡片(访客点一下就把答案发出去)与模型自己写的静态 HTML 组件(在一个沙箱帧里)。 不新造视觉语言:卡片的一切从 2s / 2t 取;帧的外框从工具卡展开体 / 代码块外框取;骨架从 2i 取;访客气泡照 1a。

0. 这是什么

Agent X-Ray 是一个已投产的站:访客与 AI agent 对话,右侧像 DevTools 一样实时看 agent loop 的内核轨迹。 助手回复是完整 markdown,R-CARDS 之后可以在正文里嵌信息卡片(六种,见 2s)。

本轮加两件事:

A · 两种可回传卡片(仍是 ```xray-card 围栏 + JSON,新增两种 kind):

发出去的就是一条普通访客消息:用户气泡照 1a,文本就是上面那句话,没有任何「来自卡片」的标记;随后 agent 照常开始下一轮(发送按钮转圈、Timeline 扫光)。 锁定态:选项 / 输入框不可再点,已选高亮保留,按钮禁用,文案不变。 一轮生成中(busy):卡上的选项与按钮和底部发送按钮一样禁用(同一副禁用视觉)。

B · 静态 HTML 组件(新围栏 ```xray-html):模型写 HTML + CSS,会话区放进一个沙箱 <iframe>:

• 宽 = 正文宽(桌面会话区正文宽;移动 358),高由模型声明、夹到 160–480(移动 ≤ 360),缺省 320;内容超高在帧内滚。
• 帧里不执行脚本、不发任何网络请求、没有链接、没有图片、点不出任何东西;只有排版(标题 / 段落 / 表格 / 列表 / 代码 / 内联 SVG / <details> 折叠)。
• 帧内文字与配色跟随站点主题(帧里注入了站点的颜色 / 字体变量),看起来像正文的一部分,只是被一圈边框圈起来。
• 流式期间:开围栏行一到,帧的高度就定了 → 先显示按那个高度立住的骨架;围栏闭合 → 换成帧;不做渐进渲染。
• 写坏了 / 超过 16 KB → 回落成普通代码块(语言标签 xray-html),没有错误提示。

1. 设计时只能用这些数据(别画出拿不到的信息)

• choice:可选 title(≤ 60)、可选 prompt(题干,≤ 200)、multiple(真 / 假)、2–8 个 options(label ≤ 60,可选 note ≤ 200)、 多选时可选按钮文案(≤ 20,缺省「提交」)。选中态与锁定态是本地状态,刷新回初始态(老卡又能点)。
• form:可选 title / prompt、1–5 个 fields(label ≤ 40;type 只有 text 与 select 两种;可选 placeholder ≤ 100;select 有 2–8 个选项;required 真 / 假)、可选按钮文案。 text 输入最多 100 字。没有:校验错误文案、数字 / 日期 / 多行输入、上传、步骤条、「已发送」字样。
• 发出的消息文本只由题干 / 所选 label / 字段 label / 访客填的值拼成;title / note / placeholder / 按钮文案都不进消息。
• HTML 组件:只有帧高与帧内内容;帧上没有标题栏、没有「全屏」「复制」「在新窗口打开」「刷新」按钮,没有加载失败态(失败 = 代码块)。
• 位置:组件在最终回答首或末,每轮最多两个。
• 不存在:图片、图表库、图标、进度条、颜色语义、帧内脚本交互、帧内链接、「发送成功」提示、撤回、Timeline 里的组件事件、访客气泡上的来源标记。

2. 三条硬约束

1. 不新造视觉语言:卡片照 2s / 2t(r6、rgba(0,0,0,.03) 底、1px #e0e0e0 中性描边、标题行 mono 10/600 #9ca3af 0.08em、卡底 ghost 按钮); 帧外框照工具卡展开体 / 代码块外框(r6–r7 + 1px #e0e0e0),帧内容不另画外框;选择指示(单选圆点 / 多选方框)用 1px #e0e0e0 描边、选中态品牌色; 输入框与下拉用站内既有输入框语汇(1a 底部输入框那一枚缩小版:1px 描边、r7、13px);访客气泡照 1a。
2. 画板上没有的功能不画:没有错误提示、没有「已发送」字样、没有撤回、没有帧工具栏、没有帧内链接 / 图片 / 按钮。
3. 动效只能从现有三个里选或不用:骨架用 omPulseBg;选中 / 禁用 / 锁定切换、帧换入都不做动画;发送后的下一轮照 1a 既有的转圈与扫光。

3. 现有 design token(照抄,勿改)

• 画布:#ffffff 底 / #f5f5f5 面板 / #eeeeee hover / #e8e8e8 选中 / 1px #e0e0e0 边框
• 文字:#1a1a1a 正文 / #6b7280 次级 / #9ca3af 弱化;品牌色 #2563eb(hover #1d4ed8)
• 语义:成功 #16a34a;错误 #ef4444(卡片与帧里不用语义色;required 标记用次级色的「*」或「必填」小字,不用红)
• 会话区节奏(1a):项间距 14、正文 14/1.7;用户气泡 r12;助手正文按 2c 排版
• 信息卡(2s / 2t):外框 r6 + rgba(0,0,0,.03) 底 + 1px #e0e0e0;标题行 mono 10/600 #9ca3af 0.08em;卡底 ≤ 5 条链接 + 至多一枚 ghost 动作按钮(32 高 r7);tabs 是胶囊单选组
• 工具卡展开体(2m):紧贴卡下 4px、r6 + rgba(0,0,0,.03) 底 + 1px 描边;正文 mono 11/1.6
• markdown 表格(2c):表头 #f5f5f5 底 600、行 1px #e0e0e0 分隔、单元格 padding 8 12、13px
• 代码块(2c):r7 外框 + 头部条(#f5f5f5 底、语言标签 mono 11/650 #6b7280)+ 正文 mono 12
• 骨架(2i):填充 #eeeeee,叠在灰面上降一档 #e0e0e0;圆角 4 文本条 / 6 大标题条 / 7 卡片;omPulseBg 一块锚点
• 折叠行(2l):13px/1.7 #6b7280 导航行,行首 12px 箭头 › / ˅
• 按钮:ghost 32 高 r7(2g 的 GitHub ↗);禁用态 = 文字降到 #9ca3af、描边不变、无 hover;移动端胶囊 rgba(120,120,128,.12) 底 + 品牌色字、44 命中
• 输入框(1a 底部):1px #e0e0e0 描边、r7、13px、聚焦描边品牌色;发送按钮生成中转圈禁用(omSpin)
• 移动端:SegmentedControl(4e)、横滚容器 m-xscroll(4f)、键盘弹起态(4u)
• 圆角:4 微徽标 / 5 小按钮 / 6–7 卡片 / 8 弹层 / 12 用户气泡;等宽字体 JetBrains Mono

画板 2u —— 桌面 · 两种可回传卡 + 位置① + 发送

以 1a 为底(三栏照抄),中栏画两轮:

• 第 N 轮(已完成,折叠行收起,2l 画法):折叠行紧接着是一张 choice 单选卡(位置①),再是两三段最终正文。卡画成已发送锁定态: 四个选项里第二项圆点高亮、其余灰、整卡不可点(内容要像 agent 会写的:比如题干「你更想从哪条线入手?」,四个选项 = 本站四组工具,note 各一句)。
• 紧随其后的访客气泡:文本就是那句被发出去的话,例:你更想从哪条线入手?: 沙箱执行组(题干 + ASCII 冒号空格 + 所选 label);气泡照 1a,没有任何来源标记。
• 第 N+1 轮(进行中):发送按钮转圈、Timeline 末行扫光、助手正文刚出两行 —— 证明点选项之后就是一轮普通对话。

主体之外开一块标本区(同一画板,右侧或下方,注释标明「标本,不在会话流里」),逐项画出:

1. choice 单选未发送态:全部选项可点、无按钮、无高亮(与主体里的锁定态成对)。
2. choice 多选卡,一项都没选、按钮禁用(勾选框空、按钮文字 #9ca3af,文案「提交」)。
3. choice 多选卡,选中两项、按钮可用。
4. 同一张多选卡的锁定态(两项勾选保留、其余灰、按钮禁用、文案仍是「提交」),旁边一条访客气泡 …: 外呼组、沙箱执行组。
5. form 卡,3 个字段(text / select / text),其中一个 required 未填、按钮禁用;select 画成未展开的下拉(值为 placeholder 次级色);必填标记用次级色小字。
6. 同一张 form 卡,全填、按钮可用;再画它的锁定态 + 访客气泡 帮我定制学习路径 经验: 3 年; 目标: 上线一个 agent 站; 每周时间: 5 小时(题干 + 空格 + 字段: 值 以 ; 相连,全部 ASCII 标点)。
7. busy 态:一张未发送的单选卡在「上一轮还在生成中」时的样子 —— 选项禁用视觉与底部发送按钮转圈同框。
8. 一张 choice 卡的流式骨架(与 2t 的卡片骨架同一画法,不必另想)。

每张卡宽度 = 会话区正文宽。画板注释写清:两种新 kind 的解剖与上限(选项 2–8 / 字段 1–5 / 字数)、单选点即发、多选与表单 submit 发、按钮禁用的条件、 消息文本的组成规则(题干 + : + 选项以「、」相连;表单是单行 字段: 值; 字段: 值)、发出的字都是卡上看得见的字、锁定态与 busy 态、 每轮最多两个组件、位置①的定义(折叠行之后、正文之前)、刷新后回初始态(老卡又能点)。

画板 2v —— 桌面 · 静态 HTML 组件 + 位置②

同一底,中栏画一轮已完成的助手回复:两三段最终正文之后是一个 xray-html 帧(位置②),帧高 320、宽 = 正文宽。 帧内内容请用 HTML + CSS 真的画出来(不是占位):建议画「一次 agent 回合的时间线」或「四层沙箱示意」——几个带边框的方块 / 横条 + 文字 + 一条 <details> 折叠(收起态), 配色只用第 3 节的 token(那正是帧里会注入的变量),看上去像正文的延伸、只是被一圈 r6–r7 + 1px #e0e0e0 的帧框圈住; 帧内内容略高于帧,右缘画出滚动条示意(系统滚动条即可),说明超高在帧内滚。帧没有任何外部工具栏。

标本区逐项画出:

1. 流式骨架:一轮进行中(发送按钮转圈、Timeline 末行扫光,照 1a),正文之后是一个按声明高度(320)立住的帧框骨架:外框 + 三条正文骨架条(r4)+ omPulseBg 锚点; 注释:高度从开围栏行读出、围栏闭合前不变、闭合后原位换成帧、不跳版。
2. 回落:一段写坏 / 超限的 HTML 渲染成普通代码块(2c 画法,头部条语言标签 xray-html,正文是那段 HTML 的前几行);注释:非法 / 超 16 KB 一律如此,没有错误提示。
3. 高度夹取两例(可缩小比例示意):声明 height=900 → 帧高 480;声明 height=100 → 帧高 160;注释区间 160–480、缺省 320。
4. 一轮两个组件(缩小比例示意即可):同一轮里位置①一张 choice 卡 + 位置②一个帧;注释「每轮最多两个,任意组合,可一首一尾也可同在一处」。
5. 主题态:若画布上已有本站深色主题的 token,把主帧在深色下再画一份(帧内变量随主题换色);若没有,跳过并注释「帧内配色 = 站点主题变量,随主题切换」。

画板注释写清:帧是一个 sandbox <iframe>(无脚本、无网络、无链接、无图片,唯一交互 <details>,帧里点什么都不会发消息)、宽高规则、骨架条件、回落规则、 位置②的定义(最后一段正文之后)、每轮最多两个组件、帧内没有工具栏。

画板 5a —— 移动 · 两种可回传卡

以 4c(一轮完成折叠态)为底,画同样的东西在 390 宽下:

• 主体:折叠行之后一张 choice 单选卡(位置①)的锁定态,选项行 44 高、选择指示在左;其下一条访客气泡(发出的那句话);再下一轮进行中。
• 标本:单选未发送态(点一下即发,注释写清触屏语义);多选未选禁用按钮 / 选中可用 / 锁定三态,submit 按钮改胶囊、独占一行(照 4y 的既有裁定); form 卡(字段 44 高输入框、select 用系统样式或胶囊、必填小字)未填 / 全填 / 锁定;键盘弹起态(照 4u):form 的某个输入框聚焦、键盘占下半屏、被聚焦字段仍在可见区;busy 态。
• 内核 token 照搬桌面(字号 / 行高 / 颜色一致),只做触控与换行适配(R-MOBILE 两层语言)。

画板 5b —— 移动 · 静态 HTML 组件

对位 2v 在 390 宽下:

• 帧宽 = 正文宽(358),高 320(上限 360,注释写清);帧内若有横向内容(如宽表),在帧内横滚、页面不横滚,画出示意。
• 标本:骨架(按高度立住)、回落代码块、height=480 在移动端被夹到 360 的示意、一轮两个组件的缩略示意。

交付

• 新画板集 Agent X-Ray Cards 2:2u / 2v(编号严格如此,只增不改);桌面画板计数 +2。
• 新画板集 Agent X-Ray Mobile - Runtime 2:5a / 5b(号段待所有者确认,内容不受影响);移动端计数 +2。
• 每块画板留一段注释写清:两种新 kind 的解剖与上限、单选点即发 / 多选与表单 submit 发、按钮禁用条件、消息文本组成规则与「发出的字都是看得见的字」、锁定态与 busy 态、 每轮最多两个、两个位置的定义、帧的宽高规则与不做的事(无脚本 / 无网络 / 无链接 / 无图片 / 无工具栏 / 帧里点不出消息)、骨架条件、回落规则、移动端的触控与横滚规则。

提示词正文(到这里结束)