디자인 프로젝트
도태되는 것이 두려웠던 프로덕트 디자이너의 목적 없는 바이브 코딩
"다들 하는데 나만 뒤처진다"는 불안에서 목적 없이 바이브 코딩을 시작한 프로덕트 디자이너의 기록. 회사의 디자이너-개발자 1:1 프로젝트에서 코드베이스를 얻고 나서야 방향을 찾은 과정과, Claude와 Claude Code의 권한 차이, 코드베이스 작업에 처음 발을 들이는 실전 팁을 담았다.
#협업#디자이너-개발자 협업#AI
전체 7건
전체 7건
디자인 프로젝트
"알아서 해줘"라고 했더니 AI가 길을 잃었다
피그마 MCP와 클로드로 모바일 디자인 시스템을 데스크탑 대시보드로 옮긴 '바이브 코딩' 프로젝트에서, 주니어 디자이너가 AI를 향한 세 가지 편견이 깨진 기록. 모호한 형용사 대신 구조화된 명령이 필요했고, 전문가 페르소나를 줘도 AI는 멘토가 아니라 비위를 맞추는 작업자였으며, 가이드의 빈틈은 곧 내 시스템의 구멍이었다는 깨달음을 정리했다.
#AI#Design System#Figma#MCP
디자인 프로젝트
디자인 시스템, 코드에서 먼저 시작하면 달라질까요?
완성된 화면을 Figma에서 그린 뒤 컴포넌트를 추출하는 기존 방식 대신, 이미 구현된 코드에서 디자인 시스템을 먼저 정의하고 워크플로의 시작점을 옮긴 실험. 여백·반응형·엣지케이스를 코드에 직접 구현해 명세를 대신하게 하자, Figma에서는 보이지 않던 레이아웃 깨짐을 먼저 마주하며 시스템을 어디까지 제어해야 하는지 감각을 얻은 기록.
#Design System#Storybook#Figma#MCP
개발 프로젝트
Figma에 코드를 그렸더니 폰트가 바뀐 이유 : MCP 양방향 핸드오프에서 폰트 지키기
Figma MCP의 read/write 비대칭과 fontName의 함정. 코드→Figma write에서 Pretendard가 Inter로 폴백된 원인을 파헤치고, use_figma의 폰트 카탈로그 검증을 우회해 generate_figma_design import 경로로 폰트를 지켜낸 기록.
#Frontend#Figma#MCP#Design System
개발 프로젝트
AI도 휴식이 필요하대요
정해진 디자인 시스템 컴포넌트로만 화면을 생성하는 서비스를 만들며, 프롬프트를 '컴파일러'처럼 설계한 이야기. 모델이 코드 대신 엉뚱한 영문 기사를 뱉은 recitation 이탈을 추적하고, "이탈은 못 막아도 새어 나가는 건 막는다"는 출력 검증·관측 안전망으로 대응한 기록.
#AI#Figma#Design System#MCP
디자인 프로젝트
Figma는 이제 출발점에 있지 않아요
입사 3개월 신입 디자이너가 Figma 대신 Claude Code와 마크다운으로 디자인을 시작하게 된 기록. 세일즈맵의 마커·경로 바 작업을 예로, 추상적 시각 언어보다 수치로 지시해야 하는 이유와 코드↔Figma 왕복 워크플로, 그리고 시각화·마감 도구로 위치가 바뀐 Figma를 이야기한다.
#Figma#MCP#Design System#AI
디자인 프로젝트
디자인 기간을 2주 앞당긴 방법 : AI로 디자인하고 퍼블리싱까지
VS Code + Claude + Figma로 디자인 시스템부터 화면 퍼블리싱까지 AI로 진행해 디자인 기간을 2주 앞당긴 기록. md 파일을 기준점으로 시스템을 관리하고 코드를 다시 Figma로 되돌리는 워크플로, 그리고 코드 기반 협업에서 부딪힌 병합·히스토리 관리의 어려움을 정리했다.
#협업#팀#Figma#Design System
