Claude Code

frontend-design + figma + playwright로 UI 구현

피그마 시안을 코드로 옮기고 스크린샷으로 시안과 비교합니다.

UI를 코드로 옮기는 프론트엔드 개발자

순서

  1. 1

    figma 플러그인으로 디자인 파일과 토큰을 읽는다.

  2. 2

    frontend-design으로 UI를 코드로 만든다.

  3. 3

    playwright로 화면을 열어 스크린샷을 찍는다.

  4. 4

    시안과 스크린샷을 비교하고 차이를 고친다.

이 조합에 들어가는 것

frontend-design평범한 AI 티를 피해 완성도 높은 프런트엔드 UI를 만듭니다.Claude Code플러그인figma디자인 파일과 토큰을 읽어 코드로 옮깁니다.Claude Code플러그인playwrightMicrosoft Playwright MCP로 브라우저를 자동화하고 E2E 테스트를 돌립니다.Claude Code플러그인