UI/UX 디자이너를 위한 클로드 코드 — 디자인부터 퍼블리싱까지, 그 시작을 돕습니다.
머릿속 상상을, 마우스가 아닌 키보드로.
⭐ Anthropic 공식 Claude Code 위에서 동작 · 약 10분 소요
지금까진 디자이너가 피그마에서 화면을 그리고, 퍼블리셔·개발자가 그걸 진짜 화면으로 옮기는 데 며칠이 걸렸습니다.
K디자이너는 그 사이를 지웁니다. 디자이너가 키보드 한 줄 — "이런 카드 3개 가로로 깔아줘" — 이면 진짜로 클릭되고 스크롤되는 화면이 바로 만들어집니다. 그 결과물은 그대로 개발자에게 넘어가서 데이터만 진짜 걸면 끝인 상태가 됩니다.
피그마 시안만이 아니라 진짜로 스크롤·클릭되는 화면. 모바일 크기로 줄여보고 다크모드도 켜볼 수 있어요.
"저장해줘", "보여줘", "더 둥글게" — 한 줄이면 됩니다. git이나 npm 같은 단어 알 필요 없어요.
디자이너가 작업한 그 시점 그대로 HANDOFF.md 한 파일에. 개발자는 데이터만 연결하면 끝.
처음부터 끝까지 따라오시면 됩니다. 약 10분 소요.
솔직히, 설치가 가장 큰 산입니다. 이 산만 넘으시면 그 다음은 한국어로 흘러갑니다.
본인 운영체제 탭을 골라 그대로 복사해 붙여 넣으세요.
설치 후 claude 입력 → 브라우저 로그인 → 검은 화면에 입력 칸 뜨면 OK.
⚠️ Pro($20/월) 또는 Max($100+/월) 요금제 필요. 무료 Claude.ai 계정 X.
claude 켠 상태에서 다음을 그대로 복사해 붙이세요:
→ 클로드가 알아서 OS 감지 → macOS면 xcode-select --install 트리거, Windows면 git for windows 안내. xcode·PowerShell 같은 단어 직접 칠 일 없음.
같은 화면에서:
설치 후 화면에 뜨는 안내대로 /reload-plugins 한 번.
/만 친 후 초기까지만 쳐도 자동완성에 잡힘.
💡 데스크탑 앱(Claude Desktop App)에선 /plugin 명령이 아직 작동하지 않습니다. 2~4단계는 터미널에서 진행해주세요. 끝난 후 데스크탑 앱에서도 정상 사용.
빈 폴더에서 시작해도 30분 안에 화면 1개 + 개발자 인계까지 가능. 회사 프로젝트가 이미 있으면 그 디자인 시스템을 그대로 이어 받아요.
설치 끝낸 작업 폴더에서 /kdesigner:디자인초기설정. "이 프로젝트만 켤까요?" 묻거든 그대로 ↵Enter.
"새로 만들고 싶어" 또는 "기존 프로젝트에서 가져오기"라고 말씀만 하세요. 응답 끝의 다음 행동 제안만 따라가면 됩니다.
서버 시작·브라우저 열기까지 한 번에. 마음에 안 들면 "더 둥글게", "색 부드럽게"같이 한국어 한 줄.
HANDOFF.md 한 파일이 자동으로 정리됩니다. 개발자분께 이 한 파일만 전달하세요.
자연어 한 줄이면 알아서 흘러갑니다. 슬래시는 비상용이니 평소엔 무시하세요.
HANDOFF.md로 정리합니다자연어가 발동되지 않거나 위험 동작을 명시적으로 트리거할 때만. 평소엔 무시하세요.
/kdesigner:디자인초기설정
디자이너 모드 시작 (1회성). 전역으로 켤지 묻습니다.
/kdesigner:디자인끄기
디자이너 모드 종료. 전역 설정도 원본 그대로 복원합니다.
/kdesigner:되돌리기
작업 되돌리기. 되돌리기(git revert) 기반이라 되돌린 것도 다시 되돌릴 수 있어요.
💡 /만 친 다음 뒷부분(예: 초기, 끄기, 되돌)만 쳐도 자동완성이 잡아줍니다.
새로 만들거나 가져온 프로젝트엔 다음 폴더가 자동으로 생깁니다.
asset/
이미지·아이콘·폰트. "이 이미지 추가해줘"라고 말씀만 하시면 자동으로 들어갑니다.
mock/
가짜 데이터. 개발자가 실제 데이터로 교체할 자리가 명확하게 표시돼요.
components/
재사용 컴포넌트. 한 번 만든 카드·버튼은 다음 화면에서 자동으로 다시 쓰입니다.
디자이너가 의식하지 않아도 뒤에서 가드가 돕습니다.
필요한 도구 누락(dependency missing)·화면 출력 통로 충돌(port in use)·일시적 네트워크 오류는 자동으로 다시 시도. 영어 에러를 그대로 던지지 않아요.
큰 작업 마무리 시 자동으로 한 번 점검을 돌립니다. 텍스트 사소한 변경엔 발동 X — 시간 낭비 없이.
한 화면에서 시작한 색·간격 변경이 전 화면을 덮치는 사고를 막아드려요. "이 색은 다른 3곳에서도 쓰여요"같이 영향 범위를 보여주고 묻습니다.
"개발자한테 넘기기"라고 말씀하시면 HANDOFF.md가 자동으로 생깁니다. 그 한 파일에:
commit 해시) — 개발자가 정확히 그 시점을 다시 볼 수 있게개발자분께 (혹시 이 글을 읽고 계시다면)
디자이너에게 인계할 환경엔 package.json + 잠금 파일, tailwind.config.*, app/globals.css(또는 토큰 정의 파일), 핵심 라우트 1개 또는 디자인 시스템 페이지가 함께 들어가야 매끄럽습니다.
같은 동작을 슬래시로도 부를 수 있어요. "보여줘"가 안 먹으면 /kdesigner:디자인초기설정이 켜져 있는지 먼저 확인하세요. 켜져 있다면 표현을 살짝 바꿔서 다시.
자동 회복이 실패한 경우입니다. 화면에 같이 뜨는 개발자에게 복사해 보내주세요 블록을 그대로 개발자에게 전달하세요. 본문은 한국어로 정리되어 있어요.
클로드 코드 재시작 한 번 해보세요. 설치 직후엔 새 명령어가 잡히는 데 시간이 좀 걸리기도 합니다.
막히는 부분은 GitHub Issues로 알려주세요.