업무를 위해 Figma 디자인을 WordPress 사이트로 구현하며, 추측 대신 각 노드에서 정확한 값을 읽어오는 Claude Code 스킬을

저는 매주 고객의 WordPress 사이트에 Figma 디자인을 구현하는 인턴입니다. 이를 위한 괜찮은 AI 워크플로우를 찾을 수 없어서, 저만의 스킬을 직접 만들었고 매 작업마다 이를 계속해서 다듬어 왔습니다.

누군가 말하기 전에 미리 말씀드리자면, AI가 프론트엔드(Front-end) 작업에 서툴고 눈(eye balls) 같은 것이 없다는 점은 알고 있습니다. 하지만 이것은 여전히 꽤 유용하다고 생각하며, 이를 통해 2개의 프로젝트를 진행했는데 결과물이 상당히 근접하게 나옵니다. 물론 최종적인 수정 사항까지 AI가 완벽히 해내게 하는 것은 불가능합니다.

기능 설명:

• 스크린샷을 보고 눈대중으로 추측하는 대신, 각 Figma 노드에서 정확한 CSS(font-size, radius, padding, colour)를 읽어옵니다. 추측을 하다 보면 Figma에는 실제 8px / 13px / Medium이라고 되어 있는데, 버튼을 44px / 14px / Bold로 출시하게 되는 상황이 발생하곤 합니다.
• 아이콘과 로고를 래스터화된 PNG가 아닌, Figma REST API를 통해 실제 SVG로 가져옵니다.
• 측정을 통해 검증합니다. 빌드 후, 렌더링된 DOM(getBoundingClientRect / getComputedStyle)을 읽어 Figma의 기하학적 구조(geometry)와 비교(diff)합니다. 이 차이점(diff)이 수정 목록이 되므로, 페이지가 58번의 스크린샷 및 눈대중 확인 과정을 거치는 대신 12번의 패스(pass) 만에 수렴하게 됩니다.

Elementor, Gutenberg, Divi와 함께 작동합니다. 검증 스크립트와 함께 빌더에 구애받지 않는 약 25가지의 주의 사항(gotchas) 카탈로그를 제공합니다. 무료이며 MIT 라이선스입니다. 리포지토리(repo)에 있는 Before/After 이미지는 목업이 아닌 실제 dom-measure 출력 결과입니다.

첫 페이지는 빌더를 사용하여 수동으로 만드는 것을 권장하지만, 이제는 첫 시도에 바로 구현하는 능력도 꽤 좋아졌습니다.
https://github.com/MatasMartin/figma-to-wordpress

특히 이런 종류의 업무를 하시는 분들로부터 피드백을 받고 싶습니다. 저는 아직 주니어입니다.
submitted by /u/LTUAdventurer
[link] [comments]