design-implementation

| "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 |

Оптимизированный рабочий процесс разработки пользовательского интерфейса с реализацией функций одной командой. Автоматизирует: сервер разработки, браузер, проверку, исправление ошибок, итерационный цикл. **Основная команда:** «реализовать следующую функцию» или «реализовать [описание функции]». **Что он делает:** 1. Запускает сервер разработки (порт автоматически определяет из package.json) 2. Запускает браузер (видимый по умолчанию, доступен --headless) 3. Реализует функцию с помощью навыков дизайна интерфейса. 4. Проверяет: ошибки консоли, ошибки TS, сбои сети, визуальное совпадение. 5. Исправляет итеративно (максимум 5 итераций) 6. Отчеты завершаются или передаются с подробным отчетом. **Триггеры:** - «реализовать следующую функцию», «реализовать главный раздел» - «проверить эту реализацию», «проверить пользовательский интерфейс» - «исправить ошибки», «поработать над этим» - «запустить сервер разработки», «управлять сервером» Источник: multicam/qara.