「响应式检查」是前端工程师的高频任务。它的输入通常是页面地址，期望得到的是问题截图与修复建议。这类有固定流程、又需要一点判断力的工作，很适合封装成智能体 Skill。

这篇是最短路径：不追求完美，只求在 10 分钟内让「响应式检查」第一次跑通。

准备（2 分钟）

  • 一份真实但已脱敏的页面地址
  • 一个支持技能或自定义指令的智能体工具（如 Claude Code、Cursor、GPTs、扣子等任一）
  • 一份你认可的问题截图与修复建议范例（可选，但很有帮助）

第 1 步：写最小指令（3 分钟）

任务：响应式检查
输入：页面地址
步骤：
1. 设定断点
2. 逐一截图
3. 标出溢出与遮挡
4. 给出样式修改
输出：问题截图与修复建议，末尾列出需人工确认的内容。
信息不足时先提问，不要编造。

第 2 步：放到工具里（2 分钟）

把上面的内容放进所用工具的规则或技能位置：Claude Code 放进 .claude/skills/responsive-audit/SKILL.md（前面补上 name 与 description），Cursor 放进 .cursor/rules/，GPTs 放进 Instructions。具体位置见各平台版本的文章。

第 3 步：跑一次（2 分钟）

用一句自然语言发出请求，例如：

这是今天的页面地址，按团队的响应式检查流程处理一下。

观察智能体是否按步骤执行，输出结构是否符合预期。

第 4 步：修一处（1 分钟）

找出输出中最不满意的一点，只改对应的那一句指令，再跑一次。不要一次改很多处，否则不知道是哪处起了作用。

跑通之后

  • 用测试用例覆盖边界情况
  • 用检查清单确认上线前事项
  • 风险较低，但输出仍需快速过目再使用

每一步要产出什么

把每一步的中间产出写清楚，智能体就不容易跳步，人也方便定位问题：

  1. 设定断点：产出一段简短的中间结果，并注明依据来自页面地址的哪一部分
  2. 逐一截图：产出一段简短的中间结果，并注明依据来自页面地址的哪一部分
  3. 标出溢出与遮挡：产出一段简短的中间结果，并注明依据来自页面地址的哪一部分
  4. 给出样式修改：产出一段简短的中间结果，并注明依据来自页面地址的哪一部分

最后一步之后，再把这些中间结果汇总成问题截图与修复建议。中间结果可以折叠或省略展示，但在技能指令中要求智能体“先完成再汇总”，能明显减少遗漏。

领域注意事项

「响应式检查」属于前端与界面领域，使用者多是前端工程师，工作环境通常是浏览器、组件库与设计稿。这个领域最重要的一条底线是：视觉与交互结果要在真实浏览器里确认。

建议把这条底线原样写进技能的约束部分，而不是指望智能体自己意识到。同时，在团队内部明确：智能体给出的问题截图与修复建议只是初稿或建议，最终由谁签字确认、出了问题由谁负责。

常见变体

同一个技能可以按使用场景派生出几个变体：

  • 简版：只保留核心步骤（设定断点、给出样式修改），适合快速过一遍
  • 详版：每一步都写出理由与依据，适合交给他人复核或留档
  • 批量版：一次处理多份页面地址，输出汇总表，适合定期集中处理

变体之间共享同一套约束，只在步骤详略和输出格式上有差异。可以在一个技能里用参数区分，也可以拆成几个名称明确的技能。

延伸阅读

说明：文中的配置、代码与目录结构均为示意，用于说明思路；各平台的入口、字段名与能力会更新，落地前请以对应官方文档为准。示例中的数据与场景为虚构，不代表真实案例。