Claude Design 사용법: AI 디자인 시스템 구축부터 코드 배포까지 4단계 워크플로우

핵심 메시지

• Claude Design(claude.ai/design)은 피그마 없이도 랜딩페이지, 피치덱, 앱 프로토타입, 소셜 카드 등 시각물을 만들 수 있는 도구다.
• 성공의 핵심은 곧바로 생성 버튼을 누르지 않고 '디자인 시스템'을 먼저 설정하는 것이다. 대부분이 이 단계를 건너뛰는 게 가장 큰 실수다.
• 디자인 시스템이 탄탄할수록 프롬프트는 짧아도 되고, 짧은 프롬프트는 토큰 비용을 줄여준다.
• tweaks·markup·edit 세 가지 도구로 토큰을 거의 쓰지 않고 결과물을 다듬을 수 있어, 대부분의 반복 작업은 채팅이 아니라 이곳에서 해야 한다.
• 완성한 디자인은 템플릿으로 저장하고, Claude Code로 넘겨 GitHub·Vercel을 거쳐 실제 사이트로 배포할 수 있다.

쉽게 이해하기

Claude Design은 claude.ai/design에서 쓸 수 있는 AI 디자인 도구로, 피그마를 다루거나 디자이너를 고용하지 않고도 랜딩페이지, 피치덱, 앱 프로토타입, 소셜 미디어 캐러셀, 원페이저 같은 시각 결과물을 만들 수 있다. 모드는 프로토타입, 슬라이드 덱, 템플릿에서 시작, 기타 네 가지이며, 프로토타입 모드에서는 거친 탐색용 와이어프레임과 실제 결과물용 고해상도(high-fidelity) 중 항상 고해상도를 고르는 것이 권장된다.

영상이 강조하는 첫 단계는 '디자인 시스템 설정'이다. 브랜드 설명, 색상, 폰트, 보이스, 레퍼런스를 한 필드에 모두 넣되 최소 200단어를 목표로 구체적으로 써야 첫 초안부터 브랜드에 맞는 결과가 나온다. 여기서 소개된 요령이 getdesign.md로, Vercel·Linear·Stripe·Notion 등 유명 기업의 브랜드 시스템 파일을 마크다운으로 복사해 드래그로 넣을 수 있다. 영상에서는 가상의 브랜드 'Neuroflow'에 Vercel 스타일을 적용했다.

Claude가 시스템을 생성하면 타이포그래피 스케일, 색상 팔레트, 간격, 컴포넌트를 항목별로 검토해 승인한다. 예시에서는 헤드라인에 Space Grotesque, 본문에 Inter, 코드에 JetBrains Mono, 주요 색으로 짙은 인디고, 강조색으로 부드러운 시안이 추출됐다. 폰트 파일을 올리지 않으면 표준 웹폰트로 대체된다는 경고가 뜨는데, 표준 웹폰트는 문제없고 커스텀·유료 폰트만 직접 업로드하면 된다. 완성된 시스템은 기본값으로 게시되어 이후 모든 프로젝트에 자동 적용된다.

프로젝트를 만들 때는 'skills'라 불리는 내장 생성 모드를 고른다. interactive prototype은 정적 이미지가 아닌 클릭되는 작동 페이지를, make a deck은 슬라이드를, animated video는 모션을 만든다. 디자인 시스템이 위에서 모든 스타일을 책임지므로 프롬프트는 세 문장 정도로 짧아도 충분하며, 영상의 예시에서는 히어로·로고 스트립·기능 블록·Python 코드가 든 SDK 섹션·3단 가격표·푸터가 첫 시도에 약 85% 완성도로 나왔다.

결과를 다듬을 때는 전체 재생성 대신 toolbar의 세 도구를 쓴다. tweaks는 분위기·강조색·간격·모션 같은 맞춤 컨트롤로 토큰을 쓰지 않고 미리보기처럼 조정하고, markup은 페이지의 특정 요소를 클릭해 지시하며, edit은 좌측 속성 패널에서 색·폰트·크기를 직접 바꾼다. 마지막으로 share에서 템플릿으로 저장하고, zip·PDF·PPTX·HTML·Canva로 내보내거나 Claude Code로 넘겨 GitHub·Vercel을 통해 약 10분 만에 실제 URL을 만든다.

주요 인사이트

• 도구를 '또 하나의 이미지 생성기'로 보면 핵심을 놓친다. 영상은 Claude Design을 '이미 당신의 브랜드북을 읽은 주니어 디자이너'에 비유하며, 핵심 가치는 '생산 속도에서의 일관성'이라고 설명한다.
• 토큰 절약 3원칙: ①전체 페이지가 아니라 바꿀 섹션만 재생성한다(전체는 약 10배 비용), ②관련 작업은 한 세션에 몰아서 한다, ③디자인 시스템이 탄탄하면 프롬프트를 짧게 써 비용을 줄인다.
• 가장 적합한 사용자는 디자이너를 따로 두지 않은 1인 창업자·소규모 팀, 매주 브랜드 시각물을 찍어내는 크리에이터·마케터, 새 클라이언트의 브랜드 키트를 약 1시간에 세팅하려는 프리랜서·소규모 에이전시다.
• 예전에는 브랜드 작업이 디자이너 고용(수천 달러)이나 이틀간의 피그마 씨름 중 하나였지만, 셋업을 제대로 하면 이를 하루 오후로 압축할 수 있다는 것이 영상의 주장이다.

자주 묻는 질문

관련 AI 소식