bots

机器人

此技能会将用户的 Grok 机器人放到其网站上。在 Grok 中运行提示词，会收集选定的机器人及其复制链接，随后网站会获得一个数据文件、一堆物理效果、卡片和一个组织结构图页面。

精确还原物理效果，只包含用户选择的机器人

marks.js 中的标记和 pile.js 中的值都是精确的。文案直接来自机器人，并经过精简，绝不凭空编造。只要网站上展示 Grok 机器人，就适用这些要求。

动态眼睛及其反应归 avatar 管。标签的大小写和字数归 copy 管。界面表面、悬停、焦点、主题和声音提示归 defaults 管。堆叠效果之外的缓动和时长归 motion 管，对比度归 color 管。使用项目自身的组件进行构建归 reuse 管。打开结果归 verify 管，提交更改归 ship 管。

1. 进行 Grok 轮次

将 grok.md 中的提示词交给用户，让他们粘贴到自己的主要机器人中。提示词会列出所有机器人，等待用户挑选，让每个入选的机器人整理并介绍自己，然后提供发布检查清单。

网站上只放用户选中的机器人。因为看起来不错而额外添加的机器人属于 bots-user-picks。

等待它返回 JSON 数组。如果用户直接粘贴配置，也要按同样的方式读取。

2. 清除隐私内容

再次检查每个条目，不论机器人之前已经移除了哪些内容。删除电子邮件、电话号码、地址、他人姓名、客户、雇主、私人项目、内部链接、密钥、令牌、账户详情、记忆和个人事实。

不确定时，就不要纳入，并在末尾列出。因为觉得无害而保留的客户名称属于 bots-strip-private。

复制链接只能来自用户粘贴回来的已发布模板。根据猜测的格式或机器人的 ID 编写的链接属于 bots-real-links。

3. 编写一个数据文件

所有机器人都放在一个类型化文件中，例如 data/bots.ts，每个机器人对应一个条目。区域、形状和颜色使用 as const 联合类型，shareUrl 和 video 为可选字段。把机器人分散到多个组件中属于 bots-one-file。

每个条目包含一个由 2–3 个词组成的标题、一行描述，以及 3–5 个简短的功能项。日常安排用通俗文字加上时间来描述，例如 “Daily idea drop, 9am”，工具则使用简短名称。直接粘贴机器人指令中的一段文字属于 bots-entry-shape。

区域是用户在 Grok 中自定义的侧边栏分区，名称和顺序均与 Grok 中一致。标记为 lead 的条目是主要机器人。

形状和颜色取自每个机器人已发布的页面，grok.md 中对此有说明。根据截图目测选择形状或颜色属于 bots-page-marks。

4. 为每个机器人绘制专属标记

将 marks.js 复制到组件所在目录。每个机器人都要根据其在 Grok 中的形状和颜色绘制，使用 MARKS[shape].path 和 markEyes(shape)，填充色取自 MARK_COLORS。使用通用头像或圆圈中的首字母属于 bots-real-marks。

黑色机器人以页面的文字颜色作为主体颜色，以背景色作为眼睛颜色，因此会随主题切换。使用 avatar 让眼睛灵动起来。

5. 搭建 Bot 堆

首页会新增一个名为“Grok Bots”的版块，其中放置一张卡片。卡片内有一个高 300px、宽度小于 480px 时高 340px 的舞台，每个 Bot 都作为绝对定位的元素放置其中。使用带种子的随机数打乱顺序，确保服务端和客户端的顺序一致。

将 pile.js 复制到组件旁边，并添加 matter-js。等元素挂载后调用 createPile，卸载时调用 destroy。

每个物体都使用 markHull 生成标记的凸包，因此星星会落在尖端上，团块会滚动。所有形状都用圆形表示的做法是 bots-hull-bodies。

拖动时，弹簧会牵引 Bot，同时物理世界继续运行，因此它会推开邻近的 Bot。拖动时暂停物理世界的做法是 bots-drag-pushes。元素设置 touch-action: none，舞台设置 pan-y，这样页面仍可滚动。

Bot 会在接触时挤压变形，并沿速度方向拉伸；同时会限制并归一化变形，以保持面积不变。会让 Bot 变大或翻转的挤压变形是 bots-jelly-keeps-area。

摇晃时，每帧会将所有 Bot 向上抛起 3–7px，并向侧面抛出最多 6px，但不会让它们离开舞台。iOS 授予运动权限后，点击按钮摇晃手机也会触发同样的效果。会把 Bot 抛出视野的摇晃是 bots-shake-stays-in。

on.bump 会将轻微碰撞传给头像，使其眨眼；较强的碰撞则会让头像旋转。on.sound 会播放低沉的撞击声，在 70ms 内从 150Hz 降至 64Hz，且只有用户抓取过之后才会解锁音频。用户触摸前就发出声音的堆是 bots-quiet-until-touched。

点击 Bot 时，会显示一个链接到其卡片的标题胶囊，位置在 Bot 上方；靠近顶部时则显示在下方。拖动超过 6px 不会打开标题，点击其他位置则会关闭标题。拖动也会打开名称的做法是 bots-tap-names。

只有当舞台出现在屏幕中，且仍有元素在移动或晃动时，循环才会运行。堆静止后仍继续运行的循环是 bots-sleep-when-still。

在减少动态效果模式下，pile.js 会离线运行下落模拟，并只绘制一次静止后的堆。摇晃会立即重新打乱元素。仍会持续翻滚的堆是 bots-settle-when-reduced。

舞台下方放置两个宽度相等的按钮：“摇晃 Bots”使用安静的灰色底色，“查看 Bots”使用实心主色样式，并链接到 Team 页面。舞台角落里只有一个图标按钮的做法是 bots-two-actions。

6. 构建卡片

BotCard 显示标记、标题和两行描述。打开卡片后，会显示 Bot 的功能、例程、以小标签呈现的工具，以及可选的静音循环视频。同行卡片高度一致。

“复制此 Bot”会在新标签页中打开分享链接，并向屏幕阅读器说明这一点。没有链接的 Bot 不显示按钮。禁用的“链接即将推出”按钮是 bots-no-dead-copy。

7. 将 Team 页面布局为组织架构图

主 Bot 单独位于顶部。一条细线向下延伸至各领域标题所在的行，每个领域的 Bot 都堆叠在其标题下方。屏幕宽度小于 560px 时，布局变为单列，线条沿左边缘向下延伸。

当页面宽度不足以让各领域并排显示时，无论屏幕宽度如何，都使用单列树状布局。每个领域通过折线从主线分支出来，其 Bot 则在下方以网格排列。

线条使用边框设计令牌指定的 1px 边框绘制。将领域排成堆叠网格，不设置主 Bot，也不绘制线条的做法是 bots-org-chart。

在网站列出页面的所有位置注册此页面，例如站点地图、导航栏和任何 Markdown 镜像。

8. 打开页面并汇报

分别在两种主题下打开首页和 Team 页面，然后摇晃、拖动并点击 Bot 堆。

最后提供三份列表：创建或修改的文件、所有被删除或因不确定而遗漏的细节，以及仍缺少链接的 Bot。在最后一份列表下方，写出生成链接所需的 Grok 步骤。最后只写“完成”而未提供这些内容的做法是 bots-list-what-is-missing。

配对

每项检查都是一对。问题行旁边就是替换它的行。

规则	问题项	替换项
bots-user-picks	因为列表就在那儿，所以添加了全部 25 个 Bots	只添加用户在第 1 轮点名的 Bots
bots-strip-private	“与 Acme 的 Sarah 预约通话”	“预约通话”
bots-real-links	手动编写的 https://x.ai/bot/sleep-coach	用户点击 Publish 后复制的链接
bots-one-file	在三个组件中内联 Bot 文案	在 data/bots.ts 中每个 Bot 只保留一条记录
bots-entry-shape	从 Bot 的指令中摘出的 90 词描述	“守护规律的就寝时间，让睡前放松平静下来。”
bots-real-marks	灰色圆圈中的首字母	来自 marks.js 的 Bot 自有形状和颜色
bots-page-marks	根据侧边栏图标猜测 shape: "clover"	从 Bot 的 x.ai 页面读取的 shape: "cloud"
bots-hull-bodies	每个 Bot 都使用 Bodies.circle	使用来自 markHull(shape) 的 Body.create({ vertices })
bots-drag-pushes	在 Engine.update 前执行 if (dragging) return	使用弹簧 Constraint，物理世界仍持续运行
bots-jelly-keeps-area	会让 Bot 变大的 scale(1.4, 0.8)	将矩阵限制在范围内，并除以其行列式的平方根
bots-shake-stays-in	y: -(8 + Math.random() * 10)	y: -(3 + Math.random() * 4)
bots-quiet-until-touched	页面加载时第一次放下就发出撞击声	抓取操作解锁音频后才播放声音
bots-tap-names	拖动结束后打开名称	移动距离小于 6px 时，轻点即可显示名称
bots-sleep-when-still	永不停歇的 requestAnimationFrame	所有物体静止且没有任何晃动时停止循环
bots-settle-when-reduced	在减少动态效果模式下让 Bots 翻滚	一次绘制静止的堆叠；摇晃时立即重新排列
bots-two-actions	舞台角落的摇匀图标	并排显示“摇匀 Bots”和“查看 Bots”
bots-no-dead-copy	被禁用的“链接即将推出”按钮	链接存在之前不显示按钮
bots-org-chart	三层堆叠的卡片网格	顶部放负责人，连线指向各领域，Bots 放在下方
bots-list-what-is-missing	“已添加 Bots 页面”	缺少的文件、已剥离的详情以及缺少链接的 Bots

报告

严重程度。 HIGH 表示页面上有私人详情、用户未选择的 Bot，或并非从 Grok 复制的链接。MEDIUM 表示拖动时堆叠冻结、摇晃时有 Bots 丢失、Bot 翻转变形、减少动态效果模式下仍有动态效果，或复制按钮失效。使用圆形物体、循环永不停止、触碰前就播放声音、用平面网格代替组织架构图，或缺少完成清单，也属于 MEDIUM。LOW 表示描述过长、形状或颜色是猜测的、角落里只有一个按钮，或拖动时打开了名称。

格式。 每个根本原因对应一条发现：

file:line - [rule-id] what is wrong

然后给出 Rule | Count | Severity 汇总。只要仍有任何 HIGH，就标记为 Block；否则标记为 Approve。对于无法读取设置的 Bot，标记为 Not verified。