전체 4건
전체 4건
피그마 MCP와 클로드로 모바일 디자인 시스템을 데스크탑 대시보드로 옮긴 '바이브 코딩' 프로젝트에서, 주니어 디자이너가 AI를 향한 세 가지 편견이 깨진 기록. 모호한 형용사 대신 구조화된 명령이 필요했고, 전문가 페르소나를 줘도 AI는 멘토가 아니라 비위를 맞추는 작업자였으며, 가이드의 빈틈은 곧 내 시스템의 구멍이었다는 깨달음을 정리했다.
완성된 화면을 Figma에서 그린 뒤 컴포넌트를 추출하는 기존 방식 대신, 이미 구현된 코드에서 디자인 시스템을 먼저 정의하고 워크플로의 시작점을 옮긴 실험. 여백·반응형·엣지케이스를 코드에 직접 구현해 명세를 대신하게 하자, Figma에서는 보이지 않던 레이아웃 깨짐을 먼저 마주하며 시스템을 어디까지 제어해야 하는지 감각을 얻은 기록.
입사 3개월 신입 디자이너가 Figma 대신 Claude Code와 마크다운으로 디자인을 시작하게 된 기록. 세일즈맵의 마커·경로 바 작업을 예로, 추상적 시각 언어보다 수치로 지시해야 하는 이유와 코드↔Figma 왕복 워크플로, 그리고 시각화·마감 도구로 위치가 바뀐 Figma를 이야기한다.
VS Code + Claude + Figma로 디자인 시스템부터 화면 퍼블리싱까지 AI로 진행해 디자인 기간을 2주 앞당긴 기록. md 파일을 기준점으로 시스템을 관리하고 코드를 다시 Figma로 되돌리는 워크플로, 그리고 코드 기반 협업에서 부딪힌 병합·히스토리 관리의 어려움을 정리했다.
