用 AI 写 HTML 页面，如何确保前端展示没问题？总在运行时发现语法错误或者缺函数

[fushall]

如题，

最近一直用 AI 写后端的东西，突然想让 ai 写一些前端的页面

---

后端比较好说，AI 可以通过单元测试解决，前端怎么弄啊？

经常出现缺少某个前端函数，css 样式错误，甚至是一些运行以后才会出现的问题，

---

请教各位有什么好的思路吗？

[sjhhjx0122]

让 ai 写 ts ，报错了他自己就会修复的，样式没办法，只能运行起来才知道是什么样子

[irisdev]

前端也可以单元测试啊，css/运行时错误，你可以每次都在后面加一句，“请检查并确保不要出现模板或者样式错误”

[xdzhang]

那天用百度的写了段,里面 null 部分全部没了,不显示....

[wangtian2020]

自己检查

[hnliuzesen]

## 输出要求
- 提供完整可运行的单一 HTML 文件，包含所有必要的 CSS 和 JavaScript
- 确保代码符合 W3C 标准，无错误警告

[caiyuan]

api 有标准的输入输出，可以让 AI 直接判断测试是否通过。
页面这玩意儿就没有标准判定了，还必须打开预览用眼睛亲自过目是否页面渲染有问题，符不符合预期。

[DICK23]

页面直接截图给 ai ，让 ai 生成单元测试和功能测试，JS 的错误基本都能解决

[youyouzi]

写 ts 咯，加上 eslint 检查，css 用 tw 写

[dream7758522]

ai 基本上能完成 90%的设计，剩下 10%还要手工精细调整，让 ai 搞的话也不知道咋提要求，也很容易跑偏。
我对 css 半生不熟，看着 css 文档也能磕磕绊绊的改一下。关键是字体，间距，啥的还要反复修改，修改完后，又要保存预览。如此重复，感觉妥妥的体力活。想问问大家都是咋调 css 的。有啥好工具推荐。

[askfilm]

@fushall "用 AI 写 HTML 页面，如何确保前端展示没问题？" ------ 所有人都想知道如何能实现。

[duuu]

https://github.com/microsoft/playwright-mcp

[duuu]

@duuu 接入 playwright-mcp 之后 cursor:/Generate Cursor Rules
每次修改前端代码后，你需要都需要使用 Playwright 检查终端是否有报错
claude:每次修改前端代码后，你需要都需要使用 Playwright 检查终端是否有报错 保存到.claude.md
可以解决 js 报错的问题，UI 的话还是无法。

[1wlinesperday]

用的 claude 吗？ 我感觉它前端很可靠啊 如果太大 context 了 你可以先让让实现 layout ， 留 placeholder ，然后你在逐步细化里面的组件 这样比较好控制