Figma 레퍼런스를 Claude Code + Fable 5로 구현하는 법

이 영상은 완성 화면을 한 번에 생성하는 방법보다, 레퍼런스와 에셋을 코드가 이해할 수 있는 단위로 분리하고 브라우저에서 반복 검수하는 제작 과정을 보여줍니다.

읽기 좋은 상황

• 시네마틱 웹 디자인을 실제 프론트엔드 코드로 옮기고 싶을 때
• 이미지 생성, 영상 변환과 코드 에이전트를 하나의 워크플로우로 연결하고 싶을 때

가져갈 포인트

• 코드 생성 결과의 완성도는 프롬프트뿐 아니라 참조 이미지와 에셋을 얼마나 명확하게 분리했는지에 좌우됩니다.
• 3D 그래픽과 배경 영상은 분위기를 빠르게 높이지만, 모바일 레이아웃과 스패싱은 별도의 반복 검수가 필요합니다.