design-implementation

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

name: design-implementation context: fork description: | Streamlined UI development workflow with single-command feature implementation. Automates: dev server, browser, verification, error fixing, iteration loop. **Core Command:** "implement next feature" or "implement [feature description]" **What It Does:** 1. Starts dev server (auto-detects port from package.json) 2. Launches browser (visible by default, --headless available) 3. Implements feature via frontend-design skill 4. Verifies: console errors, TS errors, network failures, visual match 5. Fixes iteratively (max 5 iterations) 6. Reports completion or escalates with detailed report **Triggers:** - "implement next feature", "implement the hero section" - "verify this implementation", "check the UI" - "fix the errors", "iterate on this" - "start dev server", "manage server"

Workflow Routing

Intent	Workflow
"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`

Quick Start

bash

# Basic usage
"implement the login form based on the Figma design"

# With specific file
"implement the feature described in thoughts/features/hero-section.md"

# Headless mode (CI/testing)
"implement next feature --headless"

# Just verify current state
"verify the current implementation"

Configuration

Edit config.json in this skill directory:

json

{
  "browser": {
    "headless": false,
    "viewport": { "width": 1280, "height": 720 }
  },
  "server": {
    "port": "auto",
    "startCommand": "auto",
    "hmrDelay": 2000
  },
  "iteration": {
    "maxIterations": 5,
    "layoutTolerance": 0.95
  },
  "figma": {
    "enabled": true
  }
}

Tools

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

State Tracking

state.json tracks current feature progress:

json

{
  "currentFeature": "hero-section",
  "iteration": 2,
  "status": "fixing",
  "errors": ["console: Failed to load image"],
  "lastScreenshot": "history/hero-section/iteration-2.png"
}

Integration

Skill/Agent	When Used
`frontend-design`	Initial implementation
`engineer` agent	Escalate complex bugs
`design-iterator` agent	Multiple visual refinements

History

Each feature creates artifacts in history/{feature-id}/:

•spec.md - Original feature specification
•iteration-{n}.png - Screenshots per iteration
•figma-reference.png - Design reference (if Figma link provided)
•errors.log - Captured errors
•report.md - Final completion report

Note: history/ is gitignored.