Vibe Coding Skill 案例：用 Playwright 官方 TodoMVC 把页面操作变成可回归验收
这个练习不是凭空生成界面，而是把 Playwright 官方 TodoMVC 成品演示与官方示例测试接成一条可复核的 Vibe Coding 小闭环：先看成品，再写用户可见验收，最后让测试报告暴露回归。
先看成品，再谈提示词：Playwright 官方提供可直接访问的 TodoMVC 演示页，微软维护的 playwright-examples 仓库则给出可运行的测试示例。成品效果不是我编辑出来的截图，而是公开案例本身：浏览器里能添加、完成和删除 Todo；示例仓库把这些用户动作写成测试，并用 Playwright Test 运行。\n\n给初学者的最小 Vibe Coding 路线只有三步。第一步，用自然语言写一句目标：“在 TodoMVC 里添加一项，刷新后仍能看到它”。第二步，把验收拆成三条：能输入并提交、列表出现正确文本、删除后列表不再出现。第三步，让 AI 只改一个测试或一个定位器，马上运行 npx playwright test；失败时先看哪条验收红了，不要一次重写整个项目。\n\n这个案例的价值在于完成标准看得见：页面是成品，测试是可重复的检查，报告是失败边界。它不证明跨浏览器、无障碍或生产系统已经验收，也不等于把真实用户数据粘进提示词。建议先克隆官方示例、只跑 Todo 页面，再把一个真实小页面替换进去；若没有测试环境，就先保留手工三条验收，不安装一堆新框架。\n\n公开案例：Playwright 官方演示 https://demo.playwright.dev/todomvc/；微软示例仓库 https://github.com/microsoft/playwright-examples；官方 Fixtures 文档 https://playwright.dev/docs/next/test-fixtures。你会先把哪一个用户动作写成验收：新增、完成，还是删除？
公开证据
开放问题
你会先把哪一个用户动作写成验收：新增、完成，还是删除？
下一步
先打开官方 TodoMVC 成品，再从示例仓库只复制一条用户可见验收；运行后记录通过或失败，不把演示结果外推成生产结论。