拿出去之前,让 AI 帮你把世界站挑一遍毛病

流水线第 6 站 · 测试。上一步你的世界站已经数据驱动、能逛能动,这一步在发布前给它做一次系统体检——列测试清单、找 bug、查兼容,下一步带着一个靠谱的版本进入【运营】环节,想怎么把它传出去。

by @测试阿May·来自小红书 ↗·收录于 2026 / 04 / 15
拆 · DECODE

提示词原文

你是一位细心的前端测试工程师。我做了一个单文件 HTML 的异世界展示页(青春热血,魔法 × 美食),准备发给朋友看/嵌到网页里。在那之前,请帮我系统地挑一遍毛病。我把完整 HTML 贴在最后。 请按以下步骤来: 1. 先帮我列一份【测试用例清单】,覆盖这几类:内容是否完整正确、首屏加载是否正常、滚动入场和角色卡展开是否都能用、可点元素是否都有反馈、文案有没有错别字/排版溢出;每条写清『操作步骤+预期结果』; 2. 重点检查【兼容性】:在手机窄屏、平板、电脑宽屏下分别会不会错位、文字会不会被切、按钮会不会点不到——指出具体哪个元素在哪种屏幕下有风险; 3. 逐条审查我贴的代码,找出潜在【bug】或隐患(比如某个交互在移动端失效、JSON 里有字段没渲染、嵌入别人网页时样式会不会污染对方),并对每个问题给出可【复现】的步骤; 4. 最后给一份按『必须修/建议修/锦上添花』分级的修复清单,每条附上具体改法。 只挑毛病和给改法,不要顺手重写整个文件。 【当前 HTML】:{贴这里}You are a meticulous frontend test engineer. I built a single-file HTML showcase of an other-world (youthful & hot-blooded, magic x food), about to share with friends / embed in a page. Before that, help me systematically find faults. Full HTML at the end. Steps: 1. List a test-case checklist covering: content completeness/correctness, first-screen load, scroll-reveal and card-expand working, all clickable elements give feedback, typos/overflow; each with steps + expected result; 2. Focus on compatibility: on narrow phone, tablet, wide desktop - any misalignment, clipped text, untappable buttons? Point out which element risks what on which screen; 3. Review my code line by line for potential bugs (e.g. an interaction failing on mobile, a JSON field not rendered, styles leaking into a host page when embedded), with reproducible steps for each; 4. Finally a fix list graded must-fix / should-fix / nice-to-have, each with a concrete how-to. Only find issues and suggest fixes - don't rewrite the whole file. [Current HTML]: {paste here}

轻点带虚线的术语,看它的解释。点右上角「译」切换中英对照。

为什么这么写

这是世界线的第 6 站 · 测试。 它专治小白最常见的翻车:自己反复看都觉得没问题,一发出去,朋友的手机上排版全乱、某个按钮点不动。

问题不在你不细心,而在『自己测自己』天然有盲区。这条提示词的价值,是让 AI 扮演那个『故意找茬』的人。

三个设计点:

第一,先要 test case(测试用例)清单,再开测。让 AI 把『该测什么』列成『操作步骤+预期结果』的清单,你照着一条条点。这比你凭感觉乱点靠谱得多,也不会漏掉边角。

第二,专门拎出 compatibility(兼容性)。这是网页最大的坑——『我电脑上好好的,你手机上崩了』。明确让 AI 分手机/平板/电脑三种屏幕指出风险点,省得发出去才被人截图吐槽。

第三,bug 要附 reproduce(复现)步骤。AI 光说『这里可能有问题』没用,要它给出『怎么一步步重演这个 bug』。能复现,你才改得动、改完才验证得了。这里还特别点了『嵌入别人网页会不会样式污染』——因为你的目标就是可嵌入,这是最容易被忽略的致命点。

还有个心法藏在最后那句『只挑毛病、别顺手重写整个文件』——这是『让 AI 别乱改』的范围控制,否则它一兴奋把你调好的代码全推翻重来,越测越乱。
跟完这一站,你手里是一个经得起别人看的世界站。带它进第 9 站【运营】,琢磨怎么让更多人逛进你的世界。

这条用到的术语

  • test case
    测试用例
    一条条「该怎么测、预期是什么」的清单,比如「输入空密码,应提示不能为空」。照着用例逐条测,不漏掉边边角角。
  • bug
    Bug(缺陷)
    程序里的「毛病」——该对的算错了、该显示的没显示、一点就崩。Bug 这词来自早期电脑里真卡进一只虫子的故事。修 bug 是开发的日常。
  • reproduce
    复现
    按步骤「把 bug 再次重演出来」。能稳定复现,开发才好定位和修。「我这儿没问题」常常是因为没找对复现步骤。
  • compatibility
    兼容性
    保证在不同浏览器、不同手机、不同版本上都能正常用。「在我电脑上好好的,到你这儿崩了」常常就是兼容性问题。

可替换变量

同一句话,换一个词,AI 会给你完全不同的故事。

人工照清单测让 AI 顺带写几条自动化测试脚本改一次代码就自动跑一遍,长期省力;但要懂点运行测试的环境配置
全面体检只做发布前 5 分钟快速自查更快,适合改动很小、只想临发布前扫一眼关键项时
手机/平板/电脑三端重点保某一端(如只保手机)聚焦主要访问场景,适合你清楚访客几乎只用某种设备时