菜单
Figma URL을 받아 코드까지 한 번에(딸깍) 뽑는 전체 파이프라인을 실행한다. design.md → 디자인 브릿지(JSON) → plan.md → code → 검증을 순서대로 돌린다. 기본은 각 단계 사이에서 [skip / 계속]을 사용자에게 확인하는 gated 모드이고, `--auto`(자동 모드)를 주면 게이트 없이 끝까지 이어서 돌린다. 사용자가 "figma에서 코드 뽑아줘", "딸깍 돌려줘", "자동으로 돌려줘" 같이 전체 흐름을 원할 때 사용.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
디자인 브릿지(JSON)를 읽어 코드 생성 계획서 plan.md를 만든다. 컴포넌트 분해, 파일 구조, 디자인 토큰 매핑, 구현 순서를 정리한다. 딸깍 파이프라인 2단계, 또는 사용자가 bridge JSON으로 계획을 세울 때 사용.
Figma MCP 또는 기록된 MCP 캐시를 사용해 Figma 디자인을 무손실 플랫폼 중립 Bridge IR(JSON)로 산출한다. 스타일·토큰·레이아웃·적응형 화면 조건·constraints·자산·텍스트 동작을 캡처하고 스크린샷과 교차검증한다. 웹, React, React Native, iOS, Android로 이어지는 딸깍 파이프라인 1단계에서 사용.
생성된 코드가 Figma 디자인과 같은지 LLM 없이 정적 visual verification engine으로 검증한다. Playwright 캡처, 기준 screenshot 픽셀 diff, bridge bbox 영역별 mismatch로 판정하고, DOM computed style check는 advisory evidence로 리포트한다. 딸깍 파이프라인 4단계, 또는 사용자가 구현이 디자인과 맞는지 확인할 때 사용.
plan.md를 읽어 실제 코드를 생성한다. 파일 계획·구현 순서를 따르고, 컴포넌트 재사용을 우선하며 디자인 토큰을 코드 스타일로 매핑한다. 있으면 design.md 팀 컨벤션을 따르고 없어도 동작한다. verify 리포트가 있으면 짚어진 불일치만 규칙대로 고치는 fix 모드로도 동작한다. 딸깍 파이프라인 3단계, 또는 사용자가 plan.md로 구현을 요청하거나 verify 결과를 반영해달라 할 때 사용.
검증 리포트를 바탕으로 파이프라인을 마무리한다. 남은 불일치 수정 여부를 확인하고, 산출물을 정리하며 최종 요약을 낸다. 딸깍 파이프라인 5단계에서 사용.
자동사냥 — 내게 배정된 GitHub 이슈를 골라 브랜치 생성 → 구현 → 검증 → "Closes
| name | ddalkak |
| description | Figma URL을 받아 코드까지 한 번에(딸깍) 뽑는 전체 파이프라인을 실행한다. design.md → 디자인 브릿지(JSON) → plan.md → code → 검증을 순서대로 돌린다. 기본은 각 단계 사이에서 [skip / 계속]을 사용자에게 확인하는 gated 모드이고, `--auto`(자동 모드)를 주면 게이트 없이 끝까지 이어서 돌린다. 사용자가 "figma에서 코드 뽑아줘", "딸깍 돌려줘", "자동으로 돌려줘" 같이 전체 흐름을 원할 때 사용. |
Figma → 코드 전체 파이프라인을 조율한다. 각 단계는 개별 스킬로 위임한다.
기본(gated) 모드에서는 단계 사이마다 결과를 보여주고 [skip / 계속 / 중단]을 확인하고,
auto 모드에서는 게이트를 건너뛰고 끝까지 이어서 돌린다.
adaptive.group으로 묶음). 상세는 bridge 스킬 입력 규칙.section | page (기본: page)gated | auto (기본: gated)
gated — 단계 사이마다 사용자에게 확인을 받는다(아래 게이트 규칙).auto — 게이트를 건너뛰고 끝까지 이어서 돌린다. 딸깍 --auto 또는 "자동으로 돌려줘"로 지정한다..ddalkak/ddalkak.config.json 에 figma url / mode / runMode / 각 단계 완료·skip 상태를 기록한다.
재실행 시 이 파일을 읽어 이어서 진행한다. runMode가 없으면 gated로 간주한다.
| # | 스킬 | 입력 → 출력 | 담당 |
|---|---|---|---|
| 0 | ddalkak:design-md | (팀 컨벤션) → design.md | 오픈소스 |
| 1 | ddalkak:bridge | Figma URL(들) → .ddalkak/bridge/<name>.bridge.json | 닉·초록 |
| 2 | ddalkak:plan | bridge.json → .ddalkak/plan/<name>.plan.md | 퓨리 |
| 3 | ddalkak:code | plan.md (+design.md) → 실제 코드 | 퓨리 |
| 4 | ddalkak:verify | code ↔ figma → .ddalkak/reports/<name>.verify.md | 글랜·렉스 |
| 5 | ddalkak:finalize | 검증 리포트 → 마무리 정리 | 글랜·렉스 |
validate-plan.mjs 결과(통과/경고)를 요약에 포함해 사용자가 게이트에서 검토하게 한다.validate-plan.mjs의 blocking 실패, validate-code 게이트 실패)ddalkak.config.json에 각 단계 상태를 동일하게 기록해 재개·감사를 보장한다.[4] verify가 실패(또는 조건부)로 나오면 [5] finalize로 바로 넘어가지 않고, 사용자에게 자동 수정 루프를 제안한다. (auto 모드에서는 제안 없이 곧바로 시작한다.)
ddalkak.config.json에 기록한다.