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。

查看原文