kdesigner

케이디자이너 (Claude Code For KDesigner)

한국 디자이너가 git·터미널 지식 없이 Claude Code로 화면을 만들고 개발자에게 깔끔히 넘기는 플러그인. 자연어로 말씀만 하시면 됩니다.

📖 웹에서 보기 → seonggwangju.github.io/k-designer (이 README를 잘 디자인된 페이지로)

이게 뭐죠?

지금까진 보통 이런 식이었죠.

디자이너가 *피그마(Figma)*에서 화면을 그려요 → 퍼블리셔·개발자가 그걸 진짜 화면으로 옮겨요 → 그제서야 만져볼 수 있어요.

중간에 끼어드는 사람이 많고, 디자이너의 원래 그림이 옮겨지는 동안 미묘하게 비틀어지기도 합니다. 그리고 진짜로 클릭해보기까지 며칠이 걸려요.

케이디자이너는 그 사이를 지웁니다. 디자이너가 키보드 딸깍 한 줄로 — "이런 카드 3개 가로로 깔아줘" — 진짜로 클릭되고 스크롤되는 화면을 바로 만들 수 있어요. 그 결과물은 그대로 개발자에게 넘어가서 데이터만 진짜 걸면 끝인 상태가 됩니다.

원래 클로드 코드(Claude Code)는 개발자 도구예요. 케이디자이너는 그걸 디자이너 도구로 탈바꿈시키는 플러그인입니다. 영어 에러·터미널 명령·git 같은 걸 다 가리고, 한국어로만 대화하게 만들어요.

설치하면 뭐가 좋은데요?

• 🖱️ 만질 수 있는 결과물 — 피그마 시안만이 아니라 진짜로 스크롤·클릭되는 화면. 모바일 크기로 줄여보고 다크모드도 켜볼 수 있어요
• 🚀 0에서 1까지 30분 — 빈 폴더에서 시작해도 30분 안에 화면 1개 + 개발자 인계까지 가능. 회사 프로젝트가 이미 있으면 그 디자인 시스템을 그대로 이어 받아서 새 화면을 만들어요
• 🎨 AI 티 안 나는 디자인 — 보라 그라디언트, Inter·Roboto 폰트, 이니셜 박스 아바타, Lorem ipsum 같은 AI가 흔히 만드는 클리셰를 처음부터 자동으로 피해줘요. 좋아하는 디자인·본인 작업을 한 번 답해두면 매번 내 결에서 시작
• 🛡️ 실수 방어 — 색·간격 한 곳 바꾸면 전 화면을 덮치는 사고를 자동으로 잡아주고 영향 범위를 보여줘요. 영어 에러는 자동 회복부터 시도, 안 되면 한국어로 풀어 설명
• 🧠 고품질 결정엔 깊이 고민 — 0→1 셋업·디자인 시스템 추출·인계 정리 같은 디자인 결정 작업은 케이디자이너가 메인 두뇌로 깊이 고민. 가벼운 명령(저장·서버 켜기·빌드 검증)만 보조 모델로 빠르게 — 비용보다 디자이너 결과 신뢰도를 먼저
• 📦 개발자에게 매끄럽게 — 디자이너가 작업한 그 시점 그대로 handoff/ 폴더에 회차별 파일로 누적. INDEX.md가 한눈에 요약, 개발자는 데이터만 연결하면서 적용 항목을 체크박스로 추적
• 🇰🇷 그냥 한국어 — "저장해줘", "보여줘", "더 둥글게" 같은 말 한 줄이면 됩니다. git이나 npm 같은 단어를 알 필요 없어요

설치 한 번이면 매일의 디자인 사이클 — 새 화면 만들기, 점검, 저장, 인계 — 이 그저 한국어로 흘러갑니다.

처음 쓰시는 분께

1단계 — 준비물 깔기 (한 번만)

이 플러그인은 클로드 코드라는 도구 위에서, git이라는 코드 가져오기 도구를 빌려서 동작합니다. 본인 운영체제 접은글을 펼쳐서 위에서 아래로 한 번에 쭉 따라 해주세요.

⚠️ 시작 전 — 유료 구독이 필요해요 클로드 코드는 Claude의 유료 요금제 위에서만 동작합니다. 무료 Claude.ai 계정으론 안 돼요.

• 최소: Pro 요금제 (월 $20)
• 권장: Max 요금제 (월 $100 이상) — 디자이너 작업처럼 길게 도는 사이클에선 Pro 한도가 빠르게 소진됩니다

회사에서 쓰실 거면 IT·관리자 분께 Pro 또는 Max 자리 부탁드리세요. 미리 결제·로그인까지 끝내두시면 아래 단계가 매끄럽게 흘러갑니다.

xcode-select --install

git --version

curl -fsSL https://claude.ai/install.sh | bash

claude --version

claude

irm https://claude.ai/install.ps1 | iex

claude

git 설치 가이드 출처: 코딩애플 — git 설치하기 (Windows·Mac) · 클로드 코드 설치 가이드 출처: Anthropic 공식 (한국어)

⚠️ 데스크탑 앱(Claude Desktop App)을 쓰고 계신가요? 데스크탑 앱 안의 클로드 코드 패널에선 플러그인 설치 명령(/plugin)이 아직 작동하지 않아요 ("/plugin isn't available in this environment"). 다음 2단계만큼은 터미널을 한 번 열어 진행해주세요. 설치가 끝나면 평소처럼 데스크탑 앱에서도 쓰실 수 있습니다.

2단계 — 이 플러그인 설치

1단계 끝에 claude로 켜둔 그 화면에서 그대로 진행합니다. (혹시 닫으셨다면 터미널 다시 열고 claude 한 번 더)

켜진 화면에서 다음 두 줄을 차례로 입력하세요. (앞에 / 그대로 붙여서)

/plugin marketplace add https://github.com/SeongGwangJu/claudecode-kdesigner.git
/plugin install kdesigner@claudecode-kdesigner

첫 줄이 플러그인 카탈로그를 등록, 둘째 줄이 실제 설치입니다.

설치 중간에 이런 화면이 뜨면

> Install for you (user scope)
  Install for all collaborators on this repository (project scope)
  Install for you, in this repo only (local scope)

→ 첫 번째 항목 (Install for you, user scope) 권장. 내 컴퓨터 어느 폴더에서든 디자이너 모드로 작동합니다. (회사 동료와 함께 쓸 거면 두 번째, 이 한 폴더에서만 쓸 거면 세 번째)

설치 중간에 이런 경고가 뜨면

⚠ Make sure you trust a plugin before installing...
Will install:
· Component summary not available for remote plugin

→ 정상입니다. 원격에서 가져오는 플러그인은 미리보기가 안 뜨는 게 기본이에요. 그대로 진행하세요.

설치 완료 확인

설치가 성공하면 이런 메시지가 뜹니다:

✓ Installed kdesigner. Run '/reload-plugins' to apply.