前端开发只看代码很容易漏问题：按钮溢出、移动端遮挡、canvas 空白、深色模式对比度不够。这个场景很适合做一个 Playwright 视觉检查 Skill。
OpenAI 官方 skills 里也有 playwright / playwright-interactive，可以参考：
GitHub - openai/skills: Skills Catalog for Codex
Skills Catalog for Codex
推荐阅读
[推广] HyperAPI 的新老用户来领福利了
推荐阅读
消费级显卡(16G A 卡)是不是不适合运行 vllm 和 sglang，好像使用 transformer 推理都比这两个框架快，并且占用显存低
Skill 目标
让 agent 在完成 UI 改动后，自动做这些事：
- 启动 dev server。
- 打开页面。
- 截桌面和移动端截图。
- 检查页面是否空白。
- 检查明显遮挡、溢出、报错。
- 把截图路径和问题列出来。
SKILL.md 草稿
---
name: frontend-visual-check
description: Verify frontend UI changes with Playwright screenshots across desktop and mobile viewports. Use after implementing or modifying visible UI.
---
# Frontend Visual Check
When active:
1. Start the project dev server using the repo's documented command.
2. Open the changed route in a real browser.
3. Capture desktop and mobile screenshots.
4. Check for blank page, console errors, overlapping text, and broken layout.
5. Report screenshot paths and concrete issues.
Default viewports:
- Desktop: 1440x900
- Mobile: 390x844
Do not mark UI work complete if the page is blank or visibly broken.
为什么要做成 Skill
因为视觉检查是稳定流程，不应该每次重新教模型。
尤其是这些场景：
- dashboard
- landing page
- canvas / Three.js
- mobile layout
- 表格、弹窗、侧边栏
我会加的一条硬规则
If the screenshot is blank, stop and debug rendering before summarizing.
很多 AI 前端翻车不是代码没写，而是页面根本没渲染出来。
这个 Skill 很适合作为前端项目的项目级技能。
2 个帖子 - 2 位参与者
来源: LinuxDo 最新话题查看原文