design-implementation

SKILL.md

| "implement feature", "build the X" | workflows/implement-feature.md | | "verify", "check", "screenshot" | workflows/verify-visual.md | | "fix errors", "fix the issues" | workflows/fix-errors.md | | "start server", "stop server" | workflows/manage-server.md | | "test interactions", "click test" | workflows/test-interactions.md |

| tools/playwright-runner.ts | Browser automation (screenshot, console, network) | | tools/server-manager.ts | Dev server lifecycle (start, stop, detect port) |

| frontend-design | Initial implementation | | engineer agent | Escalate complex bugs | | design-iterator agent | Multiple visual refinements |

通过单命令功能实现简化了 UI 开发工作流程。 自动化：开发服务器、浏览器、验证、错误修复、迭代循环。 **核心命令：**“实现下一个功能”或“实现[功能描述]” **它的作用：** 1.启动开发服务器（从package.json自动检测端口） 2.启动浏览器（默认可见，--headless可用） 3. 通过前端设计技巧实现功能 4. 验证：控制台错误、TS错误、网络故障、视觉匹配 5. 迭代修复（最多 5 次迭代） 6. 报告完成情况或上报详细报告 **触发器：** - “实现下一个功能”，“实现英雄部分” - “验证此实现”，“检查 UI” - “修复错误”，“迭代” - “启动开发服务器”，“管理服务器” 来源：multicam/qara。

查看原文