비주얼
클로드 디자인으로 시안 만들기
claude.ai/design에 design.md나 디자인 시스템을 연결해 카드뉴스·슬라이드 같은 시안을 만들고 채팅으로 고칠 수 있습니다
단계 1 / 6
Claude Code 또는 Codex에서 시안 제작에 쓸 요청문을 준비합니다
그대로 붙여넣기
첨부한 design.md를 읽고 클로드 디자인에 붙여넣을 [만들 결과물] 요청문을 작성해 주세요. 색·폰트·배치 기준과 확인할 항목을 포함하고, 정하지 않은 값은 제게 물어봐 주세요. 지금은 요청문만 작성하며 로그인·구독·유료 생성은 실행하지 마세요.
확인
design.md 기준과 만들 결과물이 담긴 요청문이 나오며, 로그인이나 유료 생성은 실행하지 않습니다.
단계 2 / 6
브라우저에서 claude.ai/design에 들어가 로그인합니다
클로드 디자인은 Pro 이상 구독에서 열립니다.
확인
"What should we create?"라는 입력 화면이 나옵니다.
단계 3 / 6
만들 것의 기준을 먼저 넣습니다
design.md 파일을 첨부하거나, 피그마 디자인 시스템이 있으면 Create Design System에서 .fig 파일을 올립니다.
확인
입력창 아래에 첨부한 design.md나 등록한 디자인 시스템 이름이 보입니다.
단계 4 / 6
만들 것을 문장으로 설명하거나, 아래 붙여넣기 요청을 입력창에 넣습니다
템플릿(Card News·Slides)을 골라서 시작해도 됩니다.
그대로 붙여넣기
첨부한 design.md를 먼저 읽어. 이 기준에 맞춰 [카드뉴스 표지 / 소개 슬라이드 5장 / 랜딩 첫 화면] 시안을 만들어 줘. 서로 다른 3가지 방향으로 만들어 줘. - 1안: 기준에 충실한 안 - 2안: 여백을 더 크게 둔 안 - 3안: 자유롭게 그라디언트 배경, 이모지, AI가 직접 그린 일러스트는 쓰지 마.
확인
설명한 화면이 서로 다른 3가지 방향으로 만들어집니다.
단계 5 / 6
마음에 드는 안을 고르고, 채팅으로 색·문구·배치를 고칩니다
화면이 바로 바뀌는 것을 보면서 반복합니다.
확인
요청한 부분만 바뀐 새 시안이 나옵니다.
단계 6 / 6
마지막으로 design.md 값과 대조합니다
색·폰트가 기준과 다르면 고쳐 달라고 요청합니다.
그대로 붙여넣기
지금 시안에서 쓴 색과 폰트를 design.md의 값과 비교해서, 어긋난 부분만 표로 정리해 줘. 어긋난 곳은 design.md 값으로 고쳐 줘.
확인
기준과 어긋난 색·폰트가 표로 나오고, 기준 값으로 맞춰집니다.