派生取舍(实现者定,画板照此画):所有值都是纯文本(不解析 markdown / HTML);v1 不放图片、图表、图标; 卡底可有 ≤ 5 条链接;JSON 非法或超限时回落成普通代码块(既有代码块画法,语言标签 xray-card),不画错误提示; 流式期间围栏未闭合时先显示骨架(照 2i 语汇)再换成卡;移动端表格 / 对比在容器内横滚,页面不横滚。

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

在项目里新建一份画板集 Agent X-Ray Cards,画两块桌面画板 2s、2t;在 Agent X-Ray Mobile - Runtime 里追加 4y、4z。

先读一遍现有画板再动手:1a(工作台主屏:会话区的节奏、用户气泡、助手正文、工具卡)、2c(markdown 排版:表格 / 列表 / 代码块的既有画法)、 2l / 2m(一轮完成后的折叠行与卡片展开体)、2i(骨架语汇)、4b / 4c / 4d(移动会话区)、4e(移动 Sheet 的 SegmentedControl)。 新画板画的是助手回复正文里嵌着的信息卡片,与既有的工具调用卡是两种东西(工具卡 = 「agent 做了什么」,信息卡 = 「agent 给你看什么」), 不新造视觉语言:卡片的边框 / 圆角 / 底色 / 字号全部从既有卡片与代码块语汇里取。

0. 这是什么

Agent X-Ray 是一个已投产的站:访客与 AI agent 对话,右侧像 DevTools 一样实时看 agent loop 的内核轨迹。 助手回复是完整 markdown(标题 / 列表 / 表格 / 代码块都有既定画法,见 2c)。

现在让 agent 在回复里嵌信息卡片:它在正文里写一个 ```xray-card 代码围栏、里面是一段 JSON,会话区把它渲染成一张卡。 六种卡:

每张卡通用部分:标题行(可选;collapsed 时标题行可点开 / 收起,行首 12px 箭头,与 2l 同一枚)、 卡底(可选):≤ 5 条链接(品牌色文本链接,↗ 只给站外)+ 至多一枚动作按钮(ghost,文案由模型给,如「帮我比较这两个方案的成本」, 点了把这句话放进输入框、不发送)。

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

• 每张卡:kind、可选 title(≤ 60 字)、主体数据(全是字符串,≤ 200 字;不解析 markdown、没有加粗 / 代码 / 链接语法)、 可选 collapsed、可选 links(文本 + 地址)、可选 action(按钮文案 + 预填文本)。
• 卡片在正文里的位置:模型写在哪就在哪(可以在两段话之间,也可以在末尾)。每次回复最多两张。
• 不存在:图片、图表、图标、进度条、颜色语义(没有「红色 = 差」这种字段)、可编辑单元格、表单输入、任何会发请求的东西、卡片级的「查看轨迹」。
• 交互只有四种:tabs 切换、折叠 / 展开、表头排序(升 / 降)、单选切面板(把 tabs 画成胶囊单选也算这一种)。

2. 三条硬约束

1. 不新造视觉语言:卡片外框照工具卡展开体(2m:r6、rgba(0,0,0,.03) 底、1px #e0e0e0 描边), 表格照 2c 的 markdown 表格,标题行 mono 10/600 #9ca3af 0.08em(同 INPUT / RESULT),数字用 mono。
2. 画板上没有的功能不画:没有错误提示(非法就是代码块)、没有「复制卡片」、没有「导出」、没有图。
3. 动效只能从现有三个里选或不用:骨架用 omPulseBg;tabs 切换、折叠、排序都不做动画。

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

• 画布:#ffffff 底 / #f5f5f5 面板 / #eeeeee hover / #e8e8e8 选中 / 1px #e0e0e0 边框
• 文字:#1a1a1a 正文 / #6b7280 次级 / #9ca3af 弱化;品牌色 #2563eb(hover #1d4ed8)
• 语义:成功 #16a34a;错误 #ef4444(卡片里不用语义色,见第 1 节)
• 会话区节奏(1a):项间距 14、正文 14/1.7;用户气泡 r12;助手正文按 2c 排版
• 工具卡展开体(2m):紧贴卡下 4px、r6 + rgba(0,0,0,.03) 底 + 1px 描边;小标题 mono 10/600 #9ca3af 0.08em;正文 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 一块锚点
• 按钮:ghost 32 高 r7(2g 的 GitHub ↗);移动端胶囊 rgba(120,120,128,.12) 底 + 品牌色字、44 命中
• 折叠箭头:12px,stroke #9ca3af,› 收起 / ˅ 展开(2l / 2m 同一枚)
• 移动端:SegmentedControl(4e)、横滚容器 m-xscroll(4f 的三段 payload 用的那个)
• 圆角:4 微徽标 / 5 小按钮 / 6–7 卡片 / 8 弹层 / 12 用户气泡;等宽字体 JetBrains Mono

画板 2s —— 桌面 · 六种卡片(一轮完成态的会话区)

以 1a 为底(三栏照抄),中栏画一轮已完成(折叠行收起,2l 画法)的助手回复,正文里嵌六张卡、每种一张,顺序 stat → kv → table → list → compare → tabs, 卡与卡之间隔一小段正文(一两句话即可,别用 lorem)。内容用一个像样的主题贯穿(建议:「pi SDK 与 Claude Agent SDK 的对比」或「本站四组工具的约束对比」), 六张卡的数据要真像 agent 会写的东西。

要求逐项画出:

1. stat:3 个格子一排(大数字 mono 22/650 + 单位 12 次级色 + 标签 12 + note 11 弱化)。
2. kv:6 行键值,带标题行。
3. table:4 列 × 5 行,sortable,第二列表头处于降序态(表头文字旁一个 10px 小箭头,stroke #9ca3af,当前排序列用品牌色)。
4. list:有序 5 项,其中两项带 note。
5. compare:3 列(维度 / A / B)× 6 行,首列次级色。
6. tabs:3 个 tab(胶囊单选或下划线 tab,你定并标注;选中态品牌色),当前 tab 装一张 kv;卡底画出 2 条链接(一条站内、一条站外带 ↗)+ 一枚 ghost 动作按钮。

其中至少一张卡(建议 kv)画成 collapsed 的收起态(只剩标题行 + 箭头),证明折叠态有画法。 每张卡的宽度 = 会话区正文宽度,卡内不横滚(桌面够宽)。画板注释写清:卡片外框语汇的来源、六种主体的解剖、标题行 / 卡底的可选性、卡片留在最终回答里(不进折叠行)。

画板 2t —— 桌面 · 骨架 / 回落 / 交互态

同一底,画三样东西,可以分三段放在同一块画板上:

1. 流式骨架:一轮进行中(发送按钮转圈、Timeline 末行扫光,照 1a),助手正文最后是一张正在到达的卡: 卡片外框 + 一条标题骨架条(r6)+ 三条正文骨架条(r4)+ omPulseBg 锚点;注释:围栏未闭合期间显示,闭合后换成卡。
2. 回落:一张 JSON 写坏了的卡,渲染成普通代码块(2c 画法,头部条语言标签 xray-card,正文是那段坏 JSON 的前几行);注释:非法 / 超限 / 未知 kind 一律如此,没有错误提示。
3. 交互态三连:tabs 卡切到第二个 tab;table 卡表头升序态;一张 list 卡从 collapsed 点开的展开态(与 2s 里那张收起态成对)。

画板 4y —— 移动 · 六种卡片

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

• table / compare 放进横滚容器(m-xscroll,与 4f 三段 payload 同一画法),容器右缘留出 8px 渐隐或直接裁切,你定并标注;页面不横滚。
• compare 若两列各窄于 160,改为上下堆叠(维度名一行、A / B 各一行);画板上画出这条规则的触发例子。
• stat 改两列网格。
• tabs 用 SegmentedControl 胶囊。
• 动作按钮改胶囊(44 命中)。
• 内核 token 照搬桌面(字号 / 行高 / 颜色一致),只做触控与换行适配。

画板 4z —— 移动 · 骨架 / 回落 / 交互态

对位 2t 的三样东西在 390 宽下的样子。

交付

• 新画板集 Agent X-Ray Cards:2s / 2t(编号严格如此,只增不改;2q / 2r 属 R-CROSSLINK,别占);桌面画板计数 +2。
• Mobile - Runtime 追加 4y / 4z;移动端计数 +2。
• 每块画板留一段注释写清:六种主体的解剖与上限(行 / 列 / 字数)、标题行与卡底的可选性、折叠 / 排序 / tabs 的态、回落规则、 流式骨架的显示条件、移动端的横滚与堆叠规则、卡片留在最终回答里。

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