设计创作官方指南 · 中文导读
用可试用的原型判断设计方向
官方设计师用专门机器人探索交互、调试真实资产，并处理 Figma 重复制作。
这篇导读依据 Designing Grok Bot with Grok Bot 整理，包含原文章节索引和精简要点。后半篇的材料与实操练习由本栏目另行设计，不代表官方案例或测试结果。
先做出几个版本
John Bai 的指南介绍设计机器人的分工。实验机器人把想法做成可试用版本，再与动效、开发机器人协作。文中的桌面入口探索没有照原样上线。
用真实资产调整细节
动效案例直接使用产品角色资产，建立本地预览环境，反复调整时间和运动参数。Figma 制作则以现有组件与文件数值为依据，减少批量卡片和标志的偏差。
每次修改后重新看效果
作者仍要比较版本、指出哪里不合适。机器人加快制作与修改，设计取舍继续发生在反复查看成品的过程中。
AN ORIGINAL PRACTICE
为虚构自习室比较两种余位看板
本栏目另行设计的虚构练习 · 可用自己的工具完成 · 未作产品实测
这是本站原创的虚构练习，未实际运行。折页自习室想在前台展示余位，需要先比较两种版式再选方向。只用几何图形和文字制作本地静态原型，数字由人手动切换，没有实时数据，也不连接门店系统。
先准备这些材料
样例.txt 写有总座位 12、当前空位 4、安静区空位 1。第二种状态为当前空位 0、安静区空位 0。营业时间为上午9点至晚上9点，地址使用“示例路8号”这一虚构占位。 约束.txt 规定方案甲用大数字加文字，方案乙用12个座位方格；状态必须有文字提示，不能只靠红绿区分。页面宽度分别按390和1024像素检查。
01先画两套相同信息的版式
把样例与约束一起交给机器人，请它产出一个本地 HTML 文件，并把两个方案放在可分别查看的区域。两边都显示相同座位数、营业时间和示例地址，避免因为漏信息造成不公平的比较。
02用按钮切换两个固定状态
要求添加“有空位”和“已满”两个手动按钮。切到已满时，两套版式都明确显示文字状态，安静区也应变为零。不要设置倒计时、自动刷新或后台请求；数字只是本页预设值。
03留下能复查的观察记录
人工分别在两种宽度下查看，记录数字是否容易找到、文字是否遮挡、只看灰度时能否分清状态。发现问题就写明所在方案和状态，再要求一次具体修改。生成原型并不表示这些检查已经通过。
交付后这样核对
得到一个含两种看板的本地原型，以及待人工填写的观察表。每种方案在两种宽度、两种状态下都可检查，两边的数据一致，页面没有真实余位或实时更新的暗示。
TAKE IT INTO YOUR WORK
把这段提示词带走
配合上面的虚构材料使用，也可以换成你自己的任务资料
这是本站虚构练习，未实际运行。只处理以下样例材料。 样例.txt 写有总座位 12、当前空位 4、安静区空位 1。第二种状态为当前空位 0、安静区空位 0。营业时间为上午9点至晚上9点，地址使用“示例路8号”这一虚构占位。 约束.txt 规定方案甲用大数字加文字，方案乙用12个座位方格；状态必须有文字提示，不能只靠红绿区分。页面宽度分别按390和1024像素检查。 依据上述虚构折页自习室资料，生成本地HTML比较大数字和12个方格两种余位看板。预设有空位4且安静区1、已满0且安静区0两种状态，用按钮手动切换。保留文字状态和相同营业信息，提供390与1024像素检查所需布局。不得联网、轮询或暗示实时数据，验收结果留待人工填写。
- 两个方案在相同按钮下显示同样的数据。
- 已满状态有明确文字，不能仅靠颜色。
- 两种宽度与两种状态可检查，没有后台请求。
先做出足够真实的试验，再靠观察决定下一次修改。