<aside> 🎨 코드를 짜기 전에 디자인 시안부터 보여주는 Claude Code의 새 기능 '/design' 사용법이에요. 시안을 고르고 → 직접 고치고 → 그대로 구현까지, 아래 순서대로 따라 하면 됩니다.

</aside>

공식 발표 원문은 여기서 볼 수 있어요 👇🏻

시작 전 준비

• Claude 요금제 Pro 이상(Pro · Max · Team · Enterprise)이면 쓸 수 있어요. 무료 요금제는 아직 지원되지 않아요.
• Claude Code를 최신 버전으로 업데이트하세요. 터미널에서는 claude update 한 줄이면 되고, 데스크톱 앱은 재시작하면 자동으로 업데이트돼요.
• research preview(시험 공개) 단계라 계정에 따라 순차 적용될 수 있어요. /design이 안 보이면 하루 이틀 뒤 다시 확인해 보세요.

사용 순서 5단계

1. Claude Code를 열어요. 터미널(CLI), 데스크톱 앱, 슬랙(Claude Tag) 어디서든 됩니다.
2. /design 뒤에 만들고 싶은 화면을 한 문장으로 적어요. 예: /design 우리 서비스 로그인 화면을 더 단순하게 다시 디자인해 줘
3. 공식 데모의 첫 문장은 /design redesign the composer based on what people actually use it for — '사람들이 실제로 쓰는 기능 중심으로 입력창을 다시 디자인해 줘'였어요.
4. 시안(아트보드) 여러 장이 나란히 만들어져요. 시안마다 '왜 이렇게 설계했는지' 메모가 붙어 있으니 비교하면서 읽어보세요.
5. 마음에 드는 시안을 골라 그 자리에서 직접 고쳐요. 요소를 클릭하면 문구·색·모서리 둥글기 같은 걸 바로 바꿀 수 있어요. 다 됐으면 채팅창에 '이 시안대로 구현해 줘'라고 하면 클로드가 그대로 코드로 만들어줘요.

활용 팁

• 화면 이름만 말하기보다 '누가, 어떤 상황에서 쓰는 화면인지'를 함께 적으면 시안 방향이 훨씬 정확해져요.
• 시안을 꼭 하나 골라야 하는 건 아니에요. 'A안 레이아웃에 C안 버튼으로 섞어줘'처럼 변형을 요청한 뒤 구현해도 됩니다.
• 만들어진 시안은 아티팩트 링크로 저장돼요. 링크만 열면 다시 볼 수 있어서 팀원과 공유할 때 편해요.