Claude Design 사용법 을 검색해서 들어왔다면 아마 이미 한 번쯤 겪었을 거다. 빈 채팅창에 “예쁜 랜딩페이지 만들어줘”라고 친 다음, 나온 결과를 보고 “음, 이건 좀 별로인데”라고 중얼거리는 순간 말이다.

다시 “좀 더 모던하게”라고 친다. 또 산으로 간다. 세 번쯤 반복하다 결국 “역시 AI는 디자인은 아직이네” 하고 직접 피그마를 켠다. 나도 처음엔 그랬다.

그런데 같은 화면, 같은 버튼을 쥐여줘도 누구는 30분 만에 시안 세 개를 뽑아 회의에 들고 들어간다. 도구가 다른 게 아니다. 주문하는 방식이 다른 거다.

마침 2026년 6월 18일, Anthropic이 Claude Design을 크게 손봤다. 이제 GitHub 저장소·디자인 파일·로컬 코드베이스에 박힌 디자인 시스템을 그대로 import할 수 있고, 로컬 코드베이스에서 시작해 Claude Code로 작업을 넘기는 양방향 연동이 들어왔다. 여러 작업 공간과 사용량 한도를 공유하게 되면서 턴당 토큰 소비는 줄고 에러율도 떨어졌다. 도구는 그만큼 세졌는데, 결과가 갈리는 이유는 그대로다.

이번 업데이트와 함께 Anthropic이 정리해 둔 활용법을 읽어보면 핵심은 한 문장으로 줄어든다. Claude Design은 채팅이 아니라 협업이다. 검색창에 키워드 던지듯 쓰면 검색 결과가 나오고, 동료에게 일을 맡기듯 쓰면 결과물이 나온다.

이 글은 그 차이를 실제로 가르는 프롬프트를 바로 복붙할 수 있게 정리했다. 원리 설명은 짧게, 가져다 쓸 문장은 길게 넣었다.

시작을 설계하면 결과가 튀지 않는다

못 쓰는 사람은 빈 채팅창에 형용사를 던진다. “세련되게”, “고급스럽게”, “트렌디하게.” AI 입장에서 이건 정보가 아니라 분위기다. 분위기로는 일관성이 안 나온다. 같은 프롬프트를 두 번 넣으면 두 개의 다른 화면이 나온다.

잘 쓰는 사람은 시작부터 재료를 깐다. 이제 Claude Design은 GitHub 저장소든 기존 디자인 파일이든 코드베이스든, 거기 박혀 있는 디자인 시스템을 그대로 import할 수 있다. Claude Code 동기화도 된다. 색과 폰트와 컴포넌트가 정의된 판을 먼저 깔고 시작하면 결과가 매번 튀지 않는다.

디자인 시스템이 이미 있다면, 작업을 시작할 때 이 문장을 먼저 넣어라.

지금 만들 화면의 디자인 시스템은 이미 [GitHub 저장소 / 디자인 파일 / 코드베이스 경로]에 있다.
거기 정의된 색, 폰트, 컴포넌트, 간격 토큰을 먼저 읽고 그 규칙 안에서만 작업해줘.
새 색이나 새 폰트를 임의로 만들지 말고, 정의된 토큰이 부족하면 먼저 나에게 물어봐.
이 시스템에서 자주 쓰는 컴포넌트 이름을 먼저 목록으로 정리해서 보여줘.

정리된 디자인 시스템이 아직 없다면, 규격을 읊는 대신 실물을 던지는 게 낫다. “블루에 Pretendard 폰트” 같은 사양보다, 마음에 드는 랜딩페이지 하나를 통째로 보여주는 게 빠르다. 색 코드는 브랜드의 공기를 못 담지만 완성된 화면은 담는다.

이 랜딩페이지(첨부)와 비슷한 결로 만들어줘.
색감, 여백 리듬, 타이포 위계, 버튼 모양, 전체적인 무드를 분석한 다음
우리 콘텐츠에 맞게 옮겨줘.
색 코드를 그대로 베끼지 말고, 이 화면이 주는 '분위기'를 우리 브랜드 색으로 번역해줘.

한 번에 다 시키면 죽도 밥도 안 된다

처음부터 레이아웃에 색에 인터랙션에 예외 처리까지 한 프롬프트에 욱여넣으면, AI는 모든 걸 적당히 한다. 그러면 어디를 고쳐달라고 해야 할지도 모르게 된다.

공식 가이드가 말하는 순서는 단순하다. 기본 레이아웃과 콘텐츠부터 세우고, 그 위에 한 겹씩 올린다. 집을 짓는데 “멋진 집”이라고 외치는 사람과, 평면도부터 들고 오는 사람의 차이다.

한 번에 다 만들지 마.
1단계: 레이아웃과 콘텐츠 구조만 잡아줘. 색과 디테일은 아직 넣지 마.
내가 확인하면 2단계로 넘어간다.
2단계: 디자인 시스템의 색과 타이포를 입혀줘.
3단계: 인터랙션, 호버, 예외 상태(빈 화면, 로딩, 에러)를 채워줘.
지금은 1단계만 해줘.

이렇게 끊어가면 각 단계에서 방향을 잡아줄 수 있다. 1단계 레이아웃이 틀렸는데 색까지 다 입힌 다음 발견하면, 그건 수정이 아니라 재작업이다.

고칠 때는 형용사 말고 숫자로 말한다

여기서 대부분 갈린다. 첫 결과물이 마음에 안 들 때 못 쓰는 사람은 이렇게 말한다. “이거 좀 어색한데.” “느낌이 안 사네.” “다시 해줘.” AI는 그 말을 듣고 룰렛을 돌린다. 어디가 어떻게 어색한지 모르니까.

잘 쓰는 사람은 좌표를 찍는다. 모호한 형용사 열 번보다 정확한 수치 한 번이 의도를 살린다.

전체를 다시 만들지 말고 아래만 수정해줘.
- 폼 필드 사이 세로 간격을 8px로 줄여줘.
- 히어로 제목을 32px에서 40px로 키워줘.
- 카드 사이 간격을 24px로 통일해줘.
- Primary Button 컴포넌트로 교체해줘.
나머지는 건드리지 마.

“나머지는 건드리지 마”가 중요하다. 이 한 줄을 빼면 AI가 멀쩡한 다른 부분까지 새로 그려서 어렵게 잡아둔 화면이 다시 흐트러진다.

컴포넌트는 이름을 그대로 불러라

디자인 시스템에 정의된 컴포넌트가 있다면, “버튼 좀 바꿔줘”가 아니라 정확한 명칭을 부르는 게 다르다.

• “Primary Button 컴포넌트를 사용해줘.”
• “Card 레이아웃 패턴을 적용해줘.”
• “이 영역에 Secondary Button과 Badge 컴포넌트를 써줘.”

이름을 부르면 AI가 비슷한 걸 새로 만드는 대신, 이미 시스템에 있는 걸 그대로 가져온다. 이게 import를 먼저 시켜둬야 하는 이유이기도 하다. 시스템을 읽혀두면 그 안의 컴포넌트 이름을 부를 수 있게 된다.

그리고 반응형은 처음부터 조건으로 깔아라. 모바일인지 태블릿인지 데스크톱인지, 전부 대응할 건지. 다 만들고 나서 “아 모바일도요”라고 하면 재작업이다.

AI를 생성기가 아니라 파트너로 쓴다

이게 진짜 차이다. 못 쓰는 사람에게 Claude Design은 자판기다. 주문하면 결과물이 나오는 기계. 그래서 결과가 별로면 발로 찬다. 잘 쓰는 사람에게는 디자인 파트너다. 생성만 시키지 않고 평가도 시킨다.

화면이 한 번 나왔으면, 거꾸로 AI한테 의견을 물어라. 디자인 좀 아는 동료에게 묻듯이.

이 화면을 만들지 말고 평가해줘.
- 색 명도 대비가 WCAG AA를 통과하는지
- 정보 위계가 한눈에 읽히는지, 강조가 한 화면에 하나로 모이는지
- 모바일에서 터치 타깃이 44px 이상인지
- 시선 흐름이 자연스러운지
문제 지점을 좌표(어느 요소, 어떤 수치)로 짚고, 각각 어떻게 고칠지 제안해줘.

접근성, 명도 대비, 정보 위계는 사람 눈으로 매번 잡기 번거로운 것들이다. AI한테 점검을 시키면 빠르게 걸러진다. 만드는 AI와 검수하는 AI를 같은 채팅에서 번갈아 쓰는 셈이다.

방향이 안 잡힐수록 시안을 여러 개 깔아라

머릿속으로 “어떤 느낌이 좋을까”를 굴리는 것보다, 눈앞에 대안을 깔고 고르는 게 빠르다. 방향이 안 잡힐 때일수록 더 그렇다.

이 섹션의 시안을 한 번에 3개로 보여줘.
- 1안: 안전하고 정보 위주
- 2안: 여백 많고 미니멀
- 3안: 과감하고 시선 끄는 버전
각 안마다 어떤 상황에 어울리는지 한 줄로 설명해줘.
내가 하나 고르면 그 방향으로만 디테일을 발전시킨다.

세 개를 받아 하나를 고르면, 그 다음부터는 고른 방향으로만 디테일을 발전시키면 된다. 한 번에 정답을 맞히려 하지 말고, 선택지를 좁혀가는 방식이다. 첫 결과가 최종이라고 믿는 순간 거기서 끝난다.

같은 요청, 다른 결과 — 피드백 한 줄 차이

말을 어떻게 바꾸면 결과가 어떻게 달라지는지, 실제 피드백 문장으로 보면 빠르다.

검색창처럼 쓰는 사람의 피드백.

이 폼 좀 답답해 보여요. 더 깔끔하게 다시 해주세요.

AI는 “깔끔하게”가 뭘 뜻하는지 모른다. 여백을 늘리라는 건지, 색을 빼라는 건지, 필드를 줄이라는 건지. 그래서 전체를 새로 그리고, 운이 좋으면 맞고 보통은 또 어긋난다. 파트너처럼 쓰는 사람의 피드백은 이렇다.

폼 필드 사이 간격을 16px에서 8px로 줄이고, 라벨을 필드 위로 올려줘. 입력창 테두리는 1px 회색으로 통일하고, 제출 버튼만 Primary Button으로. 나머지는 그대로 둬.

두 번째 문장은 AI가 추측할 여지가 없다. 좌표가 다 찍혀 있다. 같은 도구가 한 번에 의도대로 움직이는 건 이 차이 하나다.

이렇게 쓰면 망한다 — 피해야 할 포인트

형용사로 시작해서 형용사로 고친다. “예쁘게”로 시작해 “좀 더 예쁘게”로 고치면 영원히 룰렛이다. 시작은 재료(디자인 시스템·레퍼런스)로, 수정은 수치로 가야 한다.

한 프롬프트에 전부 욱여넣는다. 레이아웃·색·인터랙션·예외를 한 번에 시키면 어디를 고칠지조차 모르게 된다. 단계로 끊어라.

매번 “전체를 다시 만들어줘”라고 한다. 잘 나온 부분까지 새로 그려져 작업이 뒤로 간다. 수정 프롬프트엔 “나머지는 건드리지 마”를 항상 붙여라.

첫 결과를 최종으로 본다. 별로면 발로 차는 대신, 레퍼런스를 더 주고 시안을 여러 개 받아 좁혀가라. 첫 화면은 초안이지 결론이 아니다.

작업 전 체크리스트

• 디자인 시스템(저장소·파일·코드베이스)을 먼저 import하거나, 마음에 드는 레퍼런스 화면을 던졌는가
• 형용사 대신 색·폰트·컴포넌트 같은 실물 재료로 시작했는가
• 레이아웃 → 색 → 인터랙션 순으로 단계를 끊었는가
• 수정 요청을 수치와 컴포넌트 이름으로 했는가
• 수정 프롬프트에 “나머지는 건드리지 마”를 붙였는가
• 반응형(모바일·태블릿·데스크톱) 범위를 처음에 지정했는가
• AI에게 접근성·위계 평가를 한 번 시켰는가
• 방향이 애매할 때 시안을 여러 개 받아 비교했는가

자주 묻는 질문

디자인 시스템이 없는데 어떻게 import하나요?

정리된 시스템이 없으면 import는 건너뛰고 레퍼런스 화면을 던지는 방식으로 가면 된다. 마음에 드는 사이트 한두 개를 캡처해서 보여주고, 그 무드를 우리 콘텐츠에 옮겨달라고 하면 충분하다. 작업이 반복되면 그때 색·폰트·컴포넌트를 한 파일로 정리해 두고, 다음부터 그걸 import하면 점점 일관성이 올라간다.

수치 피드백을 하려면 디자인을 알아야 하는 거 아닌가요?

8px, 16px 같은 정확한 값을 몰라도 된다. “간격을 절반으로”, “제목을 한 단계 크게”처럼 방향과 정도만 줘도 “예쁘게”보다 훨씬 낫다. 그리고 앞에서 본 평가 프롬프트로 AI한테 “어디를 어떻게 고치면 좋을지 수치로 제안해줘”라고 시키면, 거꾸로 AI가 수치를 만들어 준다.

매번 이렇게 길게 쓰면 더 번거롭지 않나요?

처음 한 번만 길다. import 문장과 단계 프롬프트는 한 번 저장해두고 재사용하면 되고, 수정은 오히려 한 줄짜리 좌표 지시라 더 짧아진다. 번거로운 건 “별로야 다시”를 다섯 번 반복하는 쪽이다.

도구는 모두에게 똑같이 열렸다

Claude Design은 누구에게나 같은 화면을 준다. 같은 모델, 같은 기능, 같은 import 버튼. 그런데 한 달 뒤 결과물은 완전히 갈린다.

갈리는 건 도구가 아니다. 시작을 설계했는가, 수치로 고쳤는가, AI를 동료로 봤는가. 그 세 가지다. 디자인을 말로 시키는 시대가 왔다는 건 모두가 안다. 근데 말을 할 줄 아는 사람은 따로 있다.

위 프롬프트 중 하나라도 다음 작업에 그대로 넣어보면, 같은 도구가 다르게 움직이는 걸 바로 느낄 거다.

참고 자료

이 글은 2026년 6월 18일 Claude Design 업데이트(디자인 시스템 import·Claude Code 양방향 연동·토큰/사용량 한도 공유)와 Anthropic이 함께 정리한 활용법을 바탕으로 StayPick Korea AI Guide 형식에 맞게 재구성했습니다.

• Claude Design (Anthropic): https://claude.ai/design
• Anthropic Claude Design 활용법 (2026-06-18 업데이트)