Figma로 디자인, Figma Make로 코드 변환, Claude Code로 마이그레이션

소개

현재 사내 폐쇄망 환경에서 n8n 서비스 운영을 위한 사전 작업 중에 있습니다.

해당 과정의 일환 중 하나로 사내용 n8n 워크플로우 공유 플랫폼 개발을 진행하고자 합니다.

진행 방법

  • Figma : 웹 UI 디자인

  • Figma Make : 디자인한 웹 UI를 첨부한 뒤, 사용 가능한 코드로 변환

  • Claude Code : Figma Make로 만든 코드를 참조하여 NextJS 기반 프로젝트 생성 및 마이그레이션 작업 진행

결과와 배운 점

  • 바이브 코딩은 결국 하나씩 직접 짜 올린 코드가 아니라 AI가 짜 올린 남의 코드이기에 별도로 수정을 하기 위해 전체를 파악하는데 시간이 다소 소요되는 것 같습니다.

  • 그러니 n8n과의 연동 부분도 계속해서 바이브코딩으로 디버깅해나가고자 합니다. 🙂

  • 하지만 유지보수를 위해 파악은 해야함...

1
2개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요