Back to Details

design-implementation

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Workflow Routing

工作流路由

IntentWorkflow
"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
意图工作流
"实现功能"、"构建X"
workflows/implement-feature.md
"验证"、"检查"、"截图"
workflows/verify-visual.md
"修复错误"、"修复问题"
workflows/fix-errors.md
"启动服务器"、"停止服务器"
workflows/manage-server.md
"测试交互"、"点击测试"
workflows/test-interactions.md

Quick Start

快速开始

bash
undefined
bash
undefined

Basic usage

基础用法

"implement the login form based on the Figma design"
"根据Figma设计实现登录表单"

With specific file

指定文件

"implement the feature described in thoughts/features/hero-section.md"
"实现thoughts/features/hero-section.md中描述的功能"

Headless mode (CI/testing)

无头模式（CI/测试）

"implement next feature --headless"
"实现下一个功能 --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
  }
}
编辑此skill目录下的
config.json
：
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

工具

ToolPurpose
tools/playwright-runner.ts
Browser automation (screenshot, console, network)
tools/server-manager.ts
Dev server lifecycle (start, stop, detect port)
工具用途
tools/playwright-runner.ts
浏览器自动化（截图、控制台、网络监控）
tools/server-manager.ts
开发服务器生命周期管理（启动、停止、端口检测）

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"
}
state.json
用于跟踪当前功能的开发进度：
json
{
  "currentFeature": "hero-section",
  "iteration": 2,
  "status": "fixing",
  "errors": ["console: Failed to load image"],
  "lastScreenshot": "history/hero-section/iteration-2.png"
}

Integration

集成

Skill/AgentWhen Used
frontend-design
Initial implementation
engineer
agent		Escalate complex bugs
design-iterator
agent		Multiple visual refinements
Skill/Agent使用场景
frontend-design
初始功能实现
engineer
agent		复杂Bug升级处理
design-iterator
agent		多次视觉优化

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.
每个功能会在
history/{feature-id}/
目录下生成以下产物：
  • spec.md
    - 原始功能规格说明
  • iteration-{n}.png
    - 每次迭代的截图
  • figma-reference.png
    - 设计参考图（若提供Figma链接）
  • errors.log
    - 捕获的错误日志
  • report.md
    - 最终完成报告
注意： 
history/
目录已被git忽略。