바이브코딩으로 기능은 만들었는데 화면이 밋밋하고 "AI가 만든 티"가 나는 경우 많죠. Claude Design(베타)은 바로 그 "예쁘게"를 담당하는 Anthropic의 디자인 도구입니다. 말로 설명하면 시안을 만들어 주고, 클릭·슬라이더로 다듬은 뒤 HTML로 내보내거나 Vercel·Claude Code로 넘겨 실제 사이트로 만들 수 있어요.

준비물

  • Claude Pro / Max / Team 플랜 (Enterprise는 기본 꺼짐 — 관리자가 조직 설정에서 켜야 함)
  • 브라우저

1단계 — Claude Design 열기

  1. 브라우저에서 claude.ai/design 접속 (또는 제품 페이지의 Start designing 버튼)
  2. 로그인하면 디자인 화면으로 들어갑니다.

2단계 — 말로 설명해서 초안 받기

만들고 싶은 걸 최대한 구체적으로 적으세요. 예시(복붙해서 고쳐 쓰기):

> 핀테크 스타트업용 랜딩페이지를 만들어줘. 히어로 섹션, 핵심 기능 3개, 고객 후기, 요금제, 하단 CTA로 구성. 톤은 신뢰감 있고 미니멀하게, 메인 컬러는 딥블루(#1E3A8A).

Claude가 첫 버전을 만들면, 거기에 반응하며 고쳐 나가면 됩니다.

3단계 — 우리 브랜드 입히기 (선택)

회사 디자인 시스템이 있으면 불러오세요. GitHub 저장소 / 디자인 파일 / 로컬 코드베이스 중 하나로 import하면, Claude가 여러분의 실제 컴포넌트로 만들고 결과를 디자인 시스템과 대조해 어긋난 부분을 스스로 교정합니다.

4단계 — 예쁘게 다듬기 (핵심)

시안 위에서 바로 조정할 수 있어요.

  • 요소를 클릭해 코멘트로 "이 버튼 더 크게"처럼 지시
  • 텍스트는 더블클릭해서 바로 수정(인라인 편집)
  • Claude가 만들어 주는 슬라이더로 여백·색 미세 조정
  • 요소를 드래그해서 위치·크기·정렬 변경

예쁘게 뽑는 요령: 처음부터 "여러 방향으로 3개 뽑아줘"라고 하면 시안을 비교해 고를 수 있고, 브랜드 컬러·폰트를 먼저 못 박으면 결과가 훨씬 일관돼요.

5단계 — 실제 사이트로 내보내기

  • HTML / PDF / PPTX로 export
  • Vercel · Wix · Canva 등 연동 도구로 바로 넘기기
  • 코드로 이어서 개발하려면 Claude Code로 핸드오프: 채팅에서 /design-sync 또는 /design 입력

알아둘 점

  • Claude Design은 베타이고, 그 자체가 호스팅(도메인 연결) 서비스는 아닙니다. 실제 배포는 HTML을 내보내 올리거나 Vercel·Wix 연동으로 처리하세요.
  • Enterprise 계정은 기본으로 꺼져 있어, 관리자가 Organization settings에서 켜야 메뉴가 보입니다.