用途：在开发或修改任何视觉元素（组件、页面、布局、样式）时，用 Playwright 截图和 Compodium 对界面进行视觉验证，不单凭代码判断 UI 改动效果。
准备：在后台启动开发服务器 bun run dev，等待服务器就绪（监听 localhost:3000 或后续可用端口）。
验证页面与布局：改动后用 Playwright 截取整页，例如 npx playwright screenshot --wait-for-timeout=3000 http://localhost:3000/your-page /tmp/screenshot.png，再用 Read 工具读取截图进行目视检查。每次有意义的视觉变化（布局移动、新增区块、样式更新）后都应截图。深色模式可加 ?dark=true 或通过应用切换后再截一张。响应式设计使用 --viewport-size=375,812（移动端）与 --viewport-size=1280,720（桌面端）。
验证单个组件：用 Compodium 在 http://localhost:3000/compodium/devtools 隔离预览组件，并可截图该渲染器检查特定组件：npx playwright screenshot --wait-for-timeout=3000 "http://localhost:3000/compodium/devtools" /tmp/compodium.png。Compodium 会自动发现 app/components/ 下的所有组件，无需编写 stories。
迭代循环：做视觉改动（模板、样式、组件属性）→ 截图受影响页面或组件 → 读取截图验证 → 不符合预期则调整并重复，直到视觉输出符合意图才继续。
常用标志：--wait-for-timeout=3000 等待注水/渲染；--viewport-size=375,812 移动端视口；--viewport-size=1280,720 桌面端视口；--full-page 截取整个可滚动页面；--color-scheme dark 强制深色配色方案。
限制：资料未提供关于收费、平台或额外功能的信息；上述端口、路径与命令均按原文保留。