Syr D2c Workflow MCP

SYR D2C工作流程MCP

将Figma设计转换为生产准备组件的工作流MCP服务器。

功能

• 🔑 需要FIGMA_TOKEN：必须设置访问Figma API的令牌
• 🔗 需要Figma URL：需要预设要转换的设计URL
• 📸 Baseline捕获：使用Playwright自动捕获Figma截图
• 📊 Playwright比较：支持pixel比较和DOM比较
• 🔄 选择相同的阶段：1、2、3阶段自由选择（无强制顺序）
• ✋ 增强的HITL：选择阶段+重新运行比较+重新捕获基线
• 📋 规则管理：通过合并多个规则文件加载
• 📚 OpenSpec集成：自动检测和验证项目规则

安装

从用户处安装

// .vscode/mcp.json
{
  "servers": {
    "d2c": {
      "command": "npx",
      "args": ["syr-d2c-workflow-mcp"],
      "env": {
        "FIGMA_TOKEN": "figd_YOUR_TOKEN_HERE",
        "D2C_VIEWPORT_WIDTH": "360",
        "D2C_VIEWPORT_HEIGHT": "800",
        "D2C_DEVICE_SCALE_FACTOR": "2",
        "D2C_SCREENSHOT_DIR": ".d2c-screenshots",
        "RULES_PATHS": "./docs/standards.md,./rules/components.md",
        "RULES_GLOB": "**/*-rules.md"
      }
    }
  }
}

FIGMA_TOKEN发放（必需）

1. Figma个人访问令牌 连接页面
2. “生成新令牌”클릭
3. 将颁发的令牌设置为MCP FIGMA_TOKEN在中输入

⚠️ 没有FIGMA_TOKEN，工作流无法启动。

一起需要的MCP

{
  "servers": {
    "d2c": {
      "command": "npx",
      "args": ["syr-d2c-workflow-mcp"],
      "env": {
        "FIGMA_TOKEN": "figd_YOUR_TOKEN_HERE"
      }
    },
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"]
    },
    "playwright": {
      "command": "npx",
      "args": ["@anthropic/mcp-playwright"]
    }
  }
}

⚠️ 一定 FIGMA_TOKEN必须设置！

环境变量

Viewport&Scale设置

⚠️ 只有将Figma帧大小与CSS Viewport匹配，才能进行准确的比较。

保存屏幕截图

比较过程中生成的屏幕截图 D2C_SCREENSHOT_DIR 自动保存到路径中。

文件名格式: phase{N}-v{iteration}-{type}-{YYYYMMDDHHSS}.png

示例:

.d2c-screenshots/
├── phase1-v1-baseline-20260122143052.png
├── phase1-v1-code-20260122143052.png
├── phase2-v1-baseline-20260122144530.png
└── phase2-v1-code-20260122144530.png

💡 .d2c-screenshots/的 .gitignore添加到。

触发关键字

如果AI检测到以下关键字，则使用此MCP：

• syr, syr-d2c, d2cmcp, d2c mcp
• “设计到代码”、“设计到代码”、“figma转换”
• “做成元件”，“转换成代码”

阶段工作流（v1.8.0）

核心规则

1. 首次进入需要第1阶段：如果会话中没有第1阶段历史记录，将自动引导第1阶段运行
2. 强制HITL循环: [완료] HITL将继续，直到选中为止
3. 会话管理: d2c_complete_workflow需要显式终止

选择阶段

Phase可以无序地自由选择。 （但首次进入时需要第1阶段）

📌 参考标准为一般实现水平。 所有判断都由用户做出。

工作流图

flowchart TD
    Start[Figma 디자인] --> Preflight[d2c_preflight_check]
    Preflight --> TokenCheck{FIGMA_TOKEN?}
    TokenCheck -->|No| SetToken[MCP 설정에 TOKEN 추가]
    SetToken --> TokenCheck
    TokenCheck -->|Yes| UrlCheck{Figma URL?}
    UrlCheck -->|No| SetUrl[d2c_set_figma_url]
    SetUrl --> UrlCheck
    UrlCheck -->|Yes| BaselineCheck{Baseline 있음?}
    BaselineCheck -->|No| Capture[d2c_capture_figma_baseline]
    Capture --> BaselineCheck
    BaselineCheck -->|Yes| RulesCheck{규칙 파일?}
    RulesCheck -->|No| SetRules[규칙 파일 설정]
    SetRules --> RulesCheck
    RulesCheck -->|Yes| SessionCheck{Phase 1 이력?}
    SessionCheck -->|No| AutoPhase1[Phase 1 자동 실행]
    SessionCheck -->|Yes| PhaseSelect[HITL: Phase 선택]
    
    subgraph Phase1 [Phase 1: Figma MCP 재추출 - 참고 60%]
        P1_Extract[Figma MCP로 코드 추출]
        P1_Render[Playwright 렌더링]
        P1_Compare[d2c_run_visual_test]
        P1_Assist[보조: bounding_box, fonts]
        P1_Result[d2c_phase1_compare]
        
        P1_Extract --> P1_Render --> P1_Compare --> P1_Assist --> P1_Result
    end
    
    subgraph Phase2 [Phase 2: LLM 이미지 Diff - 참고 70%]
        P2_Diff[이미지 Diff 분석]
        P2_LLM[LLM 코드 수정]
        P2_Render[Playwright 렌더링]
        P2_Compare[d2c_run_visual_test]
        P2_Assist[보조: styles, interactive]
        P2_Result[d2c_phase2_image_diff]
        
        P2_Diff --> P2_LLM --> P2_Render --> P2_Compare --> P2_Assist --> P2_Result
    end
    
    subgraph Phase3 [Phase 3: LLM DOM 수정 - 참고 90%]
        P3_DOM[DOM 비교 분석]
        P3_LLM[LLM 코드 수정]
        P3_Render[Playwright 렌더링]
        P3_DOMTest[d2c_run_dom_golden_test]
        P3_PixelTest[d2c_run_visual_test]
        P3_Assist[보조: accessibility]
        P3_Result[d2c_phase3_dom_compare]
        
        P3_DOM --> P3_LLM --> P3_Render --> P3_DOMTest --> P3_PixelTest --> P3_Assist --> P3_Result
    end
    
    AutoPhase1 --> Phase1
    PhaseSelect -->|1| Phase1
    PhaseSelect -->|2| Phase2
    PhaseSelect -->|3| Phase3
    
    P1_Result --> HITL[HITL 옵션]
    P2_Result --> HITL
    P3_Result --> HITL
    
    HITL -->|1,2,3| PhaseSelect
    HITL -->|P| RePixel[Pixel 비교 재실행]
    HITL -->|D| ReDOM[DOM 비교 재실행]
    HITL -->|B| Capture
    HITL -->|R| Responsive[d2c_test_responsive]
    HITL -->|완료| Complete[d2c_complete_workflow]
    
    RePixel --> HITL
    ReDOM --> HITL
    Responsive --> HITL
    Complete --> Done[세션 요약 + 종료]

序列图

sequenceDiagram
    participant User as 사용자
    participant AI as AI Agent
    participant D2C as syr-d2c-workflow-mcp
    participant PW as Playwright

    User->>AI: "syr로 이 Figma 변환해줘"
    
    Note over AI,D2C: Step 1: 사전 검사 (FIGMA_TOKEN 확인)
    AI->>D2C: d2c_preflight_check()
    D2C-->>AI: TOKEN ✅, URL ❌, Baseline ❌
    
    Note over AI,D2C: Step 2: Figma URL 설정 (필수)
    AI->>D2C: d2c_set_figma_url(figmaUrl)
    D2C-->>AI: URL 저장 완료
    
    Note over AI,PW: Step 3: Baseline 캡처
    AI->>D2C: d2c_capture_figma_baseline()
    D2C->>PW: Figma 스크린샷 캡처
    PW-->>D2C: design.png 저장
    
    Note over AI,D2C: Step 4: Phase 1 자동 실행 (첫 진입)
    
    rect rgb(255, 220, 220)
        Note over AI,PW: Phase 1: Figma MCP 재추출
        AI->>AI: Figma MCP로 코드 추출
        AI->>D2C: d2c_run_visual_test(baseline, target)
        D2C->>PW: Pixel 비교
        PW-->>D2C: 성공률 65%
        AI->>D2C: d2c_compare_bounding_box() [보조]
        AI->>D2C: d2c_verify_fonts() [보조]
        AI->>D2C: d2c_phase1_compare(65%, iteration:1)
        D2C-->>AI: HITL 옵션 표시
    end
    
    AI->>User: [1] [2] [3] [P] [D] [B] [R] [완료]?
    User-->>AI: 2 선택
    
    rect rgb(220, 255, 220)
        Note over AI,PW: Phase 2: LLM 이미지 Diff
        AI->>AI: Diff 분석 → LLM 코드 수정
        AI->>D2C: d2c_run_visual_test(baseline, target)
        D2C->>PW: Pixel 비교
        PW-->>D2C: 성공률 78%
        AI->>D2C: d2c_compare_styles() [보조]
        AI->>D2C: d2c_verify_interactive_states() [보조]
        AI->>D2C: d2c_phase2_image_diff(78%, iteration:1)
        D2C-->>AI: HITL 옵션 표시
    end
    
    AI->>User: [1] [2] [3] [P] [D] [B] [R] [완료]?
    User-->>AI: 3 선택
    
    rect rgb(220, 220, 255)
        Note over AI,PW: Phase 3: LLM DOM 수정
        AI->>D2C: d2c_create_dom_golden(targetUrl)
        D2C->>PW: DOM 스냅샷 저장
        AI->>AI: DOM 차이 분석 → LLM 코드 수정
        AI->>D2C: d2c_run_dom_golden_test(golden, target)
        D2C->>PW: DOM 비교
        PW-->>D2C: DOM 성공률 88%
        AI->>D2C: d2c_run_visual_test(baseline, target)
        PW-->>D2C: Pixel 성공률 92%
        AI->>D2C: d2c_compare_accessibility() [보조]
        AI->>D2C: d2c_phase3_dom_compare(pixel:92%, dom:88%, iteration:1)
        D2C-->>AI: HITL 옵션 표시
    end
    
    AI->>User: [1] [2] [3] [P] [D] [B] [R] [완료]?
    User-->>AI: R 선택 (반응형 테스트)
    
    rect rgb(255, 255, 220)
        Note over AI,PW: 반응형 브레이크포인트 테스트
        AI->>D2C: d2c_test_responsive(targetUrl)
        D2C->>PW: 320, 375, 768, 1024, 1440px 테스트
        PW-->>D2C: 스크린샷 5장 저장
        D2C-->>AI: 반응형 결과 표시
    end
    
    AI->>User: [1] [2] [3] [P] [D] [B] [R] [완료]?
    User-->>AI: 완료 선택
    
    Note over AI,D2C: Step 5: 워크플로우 완료
    AI->>D2C: d2c_complete_workflow()
    D2C-->>AI: 세션 요약 리포트
    AI-->>User: 최종 코드 + 성공률 리포트

HITL（循环中的人类）옵션

## ✋ HITL - 다음 작업을 선택하세요

**Phase 선택:**
- [1] Phase 1: Figma MCP 재추출
- [2] Phase 2: LLM 이미지 diff 수정
- [3] Phase 3: LLM DOM 수정

**비교 재실행:**
- [P] Pixel 비교 재실행
- [D] DOM 비교 재실행
- [B] Baseline 재캡처 (Figma 스크린샷)
- [R] 반응형 브레이크포인트 테스트

**종료:**
- [완료] 워크플로우 종료 → d2c_complete_workflow() 호출

⚠️ 在选择“完成”之前，HITL循环将继续。 会话必须明确完成才能终止。

提供工具（Tools）

Figma设置工具（必需）

d2c_set_figma_url

设置要转换的Figma设计URL。 Phase开始前必须！

{
  figmaUrl: string;      // Figma 디자인 URL (프레임/컴포넌트 링크)
}

⚠️ 必须先调用此工具。 如果未设置URL，则无法启动Phase。

Baseline&比较工具

d2c_capture_figma_baseline

d2c_set_figma_url从设置为的URL捕获屏幕截图。

{
  figmaUrl?: string;     // 선택 (미입력 시 저장된 URL 사용)
  selector?: string;     // 캡처할 요소 선택자
  waitTime?: number;     // 페이지 로드 대기 시간 (기본: 3000ms)
}

存储位置: ./d2c-baseline/design.png

设置屏幕截图 （调整为环境变量）：

⚠️ 必备条件: FIGMA_TOKEN 环境变量+ d2c_set_figma_url 设置完成

d2c_run_visual_test

使用Playwright Test Runner运行pixel比较测试。

{
  testName: string;           // 테스트 이름
  targetUrl: string;          // 렌더링 결과 URL
  baselineImagePath: string;  // baseline 이미지 경로
  maxDiffPixels?: number;     // 허용 최대 차이 픽셀 수 (기본: 100)
  threshold?: number;         // 픽셀 차이 임계값 (0-1, 기본: 0.1)
}

d2c_run_dom_golden_test

使用Playwright运行DOM golden比较测试。（第3阶段）

{
  testName: string;       // 테스트 이름
  targetUrl: string;      // 렌더링 결과 URL
  goldenDomPath: string;  // golden DOM JSON 파일 경로
  selectors?: string[];   // 비교할 CSS 선택자들
}

d2c_create_dom_golden

将当前页面的DOM结构保存为golden文件。

{
  targetUrl: string;      // 기준 페이지 URL
  outputPath: string;     // 저장 경로
  selectors?: string[];   // 추출할 CSS 선택자들
}

Phase工具

d2c_phase1_compare

显示第1阶段的结果并提供HITL选项。

{
  successRate: number;      // Playwright 비교 성공률 (0-100)
  iteration: number;        // 현재 반복 횟수
  diffDetails?: string;     // 차이점 설명
  rulesPath?: string;       // 규칙 파일 경로
}

d2c_phase2_image_diff

显示第2阶段的结果并提供HITL选项。

{
  successRate: number;      // Playwright 비교 성공률 (0-100)
  iteration: number;        // 현재 반복 횟수
  diffAreas?: Array;
}

d2c_phase3_dom_compare

显示第3阶段的结果并提供HITL选项。（DOM+Pixel双重成功率）

{
  pixelSuccessRate?: number;  // Pixel 비교 성공률
  domSuccessRate?: number;    // DOM 비교 성공률
  iteration: number;          // 현재 반복 횟수
  domDiffs?: Array;
}

预检查工具

d2c_preflight_check

运行工作流前检查所需的元素。

检查项目 （按顺序确认）：

⚠️ 必须满足所有要求才能启动阶段。

d2c_check_ai_setup

检查AI助手设置状态并提供推荐设置。

Playwright高级验证工具

除了pixel比较和DOM比较之外，还有一些额外的验证工具可以提高D2C的成功率。

d2c_compare_bounding_box

将元素的\*\*Bounding Box（位置，大小）\*\*与Figma设计值进行比较。

{
  targetUrl: string;        // 검증할 페이지 URL
  elements: Array;
  tolerance?: number;       // 허용 오차 픽셀 (기본: 2)
}

使用情形:

• Figma框架坐标与实际渲染坐标的比较
• 验证元素间的间隙数值
• 校准（alignment）精度测量

______________________________________________________________________

d2c_compare_styles

元素的 CSS计算样式与Figma设计值进行比较。

{
  targetUrl: string;        // 검증할 페이지 URL
  elements: Array;
}

使用情形:

• 通过像素比较难以捕捉到细微的样式差异
• 验证颜色、大小、间距等关键属性的准确度
• 将Figma样式令牌与实际应用值进行比较

______________________________________________________________________

d2c_verify_interactive_states

元素的 按交互状态（hover、focus、active）的样式验证。

{
  targetUrl: string;        // 검증할 페이지 URL
  element: {
    selector: string;       // CSS 선택자
    states: Array;
  };
  captureScreenshots?: boolean;  // 상태별 스크린샷 캡처 (기본: false)
}

使用情形:

• Figma variant（hover、pressed、disabled等）与实际实现进行比较
• 检测到缺少交互反馈
• 验证CSS伪类（：hover，：focus）行为

______________________________________________________________________

d2c_test_responsive

多个视口大小在中自动测试元件。

{
  targetUrl: string;        // 테스트할 페이지 URL
  breakpoints?: number[];   // 테스트 너비 목록 (기본: [320, 375, 768, 1024, 1440])
  height?: number;          // 뷰포트 높이 (기본: 800)
  baselineImages?: {        // 브레이크포인트별 baseline 이미지
    "375"?: string;         // 예: "./baseline-375.png"
    "768"?: string;
  };
  selector?: string;        // 특정 요소만 캡처할 선택자
}

使用情形:

• 自动测试移动（320、375）、平板电脑（768）、台式机（1024、1440）
• 保存每个断点的屏幕截图历史
• 早期发现破碎的布局

存储位置: D2C_SCREENSHOT_DIR/responsive-{width}-{timestamp}.png

______________________________________________________________________

d2c_verify_fonts

文本元素的 字体设置验证是否与此Figma匹配。

{
  targetUrl: string;        // 검증할 페이지 URL
  textElements: Array;
}

使用情形:

• Figma文本样式与实际字体的比较
• 检测是否发生回退（fallback）
• 早期发现字体加载失败导致的布局差异

______________________________________________________________________

d2c_compare_accessibility

页面的 接近性树分析和验证。

{
  targetUrl: string;        // 검증할 페이지 URL
  checkItems?: Array;
  selector?: string;        // 특정 영역만 검증
}

验证内容:

使用情形:

• 确认WCAG 2.1是否符合准则
• 验证屏幕阅读器用户体验
• 提高SEO和可访问性分数

______________________________________________________________________

其他工具

d2c_get_design_rules

从设置的路径收集设计规则。

d2c_validate_component

验证创建的元件是否符合规则。

d2c_get_component_template

创建符合规则的元件模板。

d2c_workflow_status

显示整个工作流的进度。

提供提示（Prompts）

design_to_code

引导您完成整个D2C工作流：

1. 选择预检查+阶段
2. 导入Figma设计
3. 运行阶段（选定的阶段）
4. 确认成功率+HITL
5. 完成

交付资源（Resources）

• d2c://rules/default -基本设计规则
• d2c://templates/react -React组件模板

OpenSpec规则集成

自动检测项目的OpenSpec规则并将其应用到工作流。

检测路径

1. ./openspec/specs/*/spec.md
2. ./.cursor/openspec/specs/*/spec.md
3. ./docs/openspec/specs/*/spec.md

OpenSpec工具

d2c_load_openspec_rules

检测并加载项目的OpenSpec规则。

d2c_get_workflow_tasks

返回符合当前阶段的检查列表。

d2c_validate_against_spec

验证生成的代码是否符合OpenSpec规则。

快速入门

# 1. 사전 검사 (FIGMA_TOKEN 확인)
d2c_preflight_check()

# 2. Figma URL 설정 (필수)
d2c_set_figma_url({
  figmaUrl: "https://www.figma.com/design/YOUR_FILE_ID/..."
})

# 3. Baseline 캡처 (저장된 URL 자동 사용)
d2c_capture_figma_baseline()

# 4. Phase 실행 후 비교
d2c_run_visual_test({
  testName: "my-component",
  targetUrl: "http://localhost:3000",
  baselineImagePath: "./d2c-baseline/design.png"
})

# 5. 결과 확인 + HITL
d2c_phase1_compare({
  successRate: 75.5,
  iteration: 1
})

开发

# 의존성 설치
npm install

# 빌드
npm run build

# 개발 모드
npm run dev

变更历史记录

v1.8.0

• 添加6种Playwright高级验证工具

- d2c_compare_bounding_box -比较元素位置/大小数值 - d2c_compare_styles -比较CSS Computed Style - d2c_verify_interactive_states -验证hover/focus/active状态 - d2c_test_responsive -自动测试反应型断点 - d2c_verify_fonts -字体度量验证 - d2c_compare_accessibility -分析辅助功能树并验证WCAG

• 支持提高D2C成功率

- 推荐用作各阶段的辅助工具 - 像素比较+数值比较组合提高了准确度

v1.7.0

• 自动进入第1阶段 强制

- 如果会话中没有第1阶段的历史记录，请在检查前引导自动运行第1阶段 - 添加第一个循环完成指南

• 管理会话状态 添加

- d2c_get_session_state -查看当前会话状态 - d2c_complete_workflow -显式完成工作流

• 强制HITL循环

- 在选择“完成”之前持续HITL - 完成时生成会话摘要报告

v1.6.0

• Phase结果 自动显示OpenSpec规则

- 在每个阶段运行时自动加载OpenSpec规则 - 显示规则摘要作为提高成功率指南 - 第1、2、3阶段均适用

v1.5.0

• 添加比较屏幕截图自动保存功能

- D2C_SCREENSHOT_DIR 环境变量（默认： .d2c-screenshots) - 文件名格式： phase{N}-v{iteration}-{type}-{YYYYMMDDHHSS}.png - 保存baseline、code和compare类型

• scale: 'device' 应用选项以反映实际分辨率

- 360x800视口+2倍比例= 720x1600 实际屏幕截图

• d2c_run_visual_test呃 phase, iteration 添加参数

v1.4.0版本

• 屏幕截图添加Viewport/Scale设置

- D2C_VIEWPORT_WIDTH （默认值：360） - D2C_VIEWPORT_HEIGHT （默认值：800） - D2C_DEVICE_SCALE_FACTOR （默认值：2）

• Playwright捕获时应用设置
• 在捕获完成消息中显示设置值

v1.3.0版本

• FIGMA_TOKEN 环境变量 必需 设置
• d2c_set_figma_url 添加工具-Figma URL预设
• 在Preflight检查中查看FIGMA_TOKEN+Figma URL
• 没有Figma URL，无法启动Phase

v1.2.0版本

• Figma截图 仅限Playwright更改为（删除figma-mcp屏幕截图）
• 增强了Preflight中Figma URL输入的引导
• 从错误消息中删除“手动export”替代方案

v1.1.0版本

• d2c_capture_figma_baseline 添加工具（使用Playwright捕获Figma屏幕截图）
• 将Baseline检查添加到Preflight检查
• HITL选项扩展：\[P\]Pixel比较、\[D\]DOM比较、\[B\]Baseline重新捕获

v1.0.0

• 更改为阶段等效选择结构（依次→自由选择）
• 目标成功率→更改为参考标准
• 集成HITL选项（\[1\]\[2\]\[3\]\[完成\]）
• 显示Phase 3 DOM+Pixel的双重成功率

v0.9.0版本

• 剧作家测试跑者통합 (toHaveScreenshot，DOM golden比较）
• d2c_run_visual_test, d2c_run_dom_golden_test, d2c_create_dom_golden 添加

v0.8.0

• 添加规则文件必需检查
• RULES_PATHS, RULES_GLOB 支持环境变量

v0.7.0

• 添加DOM比较功能
• 第3阶段像素/DOM双成功率支持

v0.6.0

• 基于pixelmatch的客观图像比较
• 强制实施HITL

许可证

麻省理工学院