Claude Code /design: 코드베이스에 맞는 UI 초안을 개발 환경에서 검토하기
아이디어를 구현하기 전에 화면 구조를 검토하려면 보통 별도의 디자인 도구를 거쳐야 한다. Anthropic이 초기 프리뷰로 공개한 Claude Code의 /design은 이 전환을 줄이는 명령어다. 개발자는 터미널이나 데스크톱 앱에서 여러 UI 디자인 초안을 아트보드로 생성하고, 공유 가능한 Artifacts 형태의 목업으로 검토할 수 있다.1
단순한 이미지 생성과 무엇이 다른가
/design에는 Claude Design의 편집기와 프롬프팅 기능이 통합돼 있다. Claude Design은 디자인, 인터랙티브 프로토타입, 프레젠테이션 등을 대화 방식으로 제작하는 도구이며, 비전 모델 Claude Opus 4.7로 구동된다. 작업 화면은 왼쪽의 채팅 인터페이스와 오른쪽의 캔버스로 구성된다.23
핵심은 첫 결과물보다 반복 수정 과정에 있다. 화면 구조를 바꾸거나 새 섹션을 추가하는 등 전체에 영향을 주는 작업은 채팅으로 요청할 수 있다. 특정 컴포넌트나 간격처럼 범위가 좁은 수정은 인라인 댓글로 지정하고, 캔버스에서는 요소를 직접 드래그하거나 크기와 정렬을 조정할 수 있다.23
이처럼 수정 방식을 작업 범위에 따라 나누면 프롬프트를 반복해서 다시 작성하지 않고도 초안을 구체화할 수 있다.
핵심 가치는 코드베이스의 맥락이다
일반적인 AI 목업은 시각적으로 그럴듯해도 실제 제품의 색상, 타이포그래피, 컴포넌트와 어긋날 수 있다. Claude Design은 온보딩 과정에서 코드베이스와 디자인 파일을 읽어 팀의 디자인 시스템을 구축한다. 여기서 파악한 색상, 타이포그래피, 컴포넌트는 이후 프로젝트에 자동으로 적용된다.2
Claude Code의 /design도 기존 코드베이스를 읽고 현재 UI 스타일에 맞는 목업을 만든다. 따라서 가치는 이미지를 빠르게 생성하는 데 그치지 않는다. 개발 환경을 벗어나지 않고 제품의 기존 규칙을 반영한 여러 방향을 비교한 뒤, 선택한 안을 빌드 단계로 이어갈 수 있다는 점이 중요하다.1
다만 현재는 초기 프리뷰 단계이며, 생성한 디자인을 수동으로 저장해야 한다. 설계부터 구현까지 완전히 자동화된 흐름이라기보다, 구현 전에 방향을 빠르게 탐색하고 합의하는 도구로 이해하는 편이 정확하다.1
실무에서는 이렇게 활용할 수 있다
처음부터 완성된 화면 하나를 요구하기보다 다음 순서로 접근하면 수정 범위를 관리하기 쉽다.
화면의 목표, 사용자, 필수 정보와 주요 구성을 제시한다.
여러 초안을 생성해 구조와 시각적 방향을 비교한다.
전체 구조 변경은 채팅으로 요청한다.
특정 컴포넌트나 간격은 인라인 댓글로 수정한다.
위치, 크기, 정렬 같은 시각 조정은 캔버스에서 직접 처리한다.
선택한 디자인을 저장하고 빌드 단계로 넘긴다.
이 과정에서 가장 먼저 확인할 것은 “멋진 화면인가”보다 “기존 제품의 디자인 규칙과 구현 맥락을 제대로 반영했는가”다. /design의 실질적인 효용은 디자인 산출물 자체보다 설계 검토와 구현 사이의 왕복을 줄이는 데 있다.
한줄 요약: Claude Code의 /design은 기존 코드베이스와 UI 스타일을 반영한 여러 초안을 개발 환경에서 만들고 검토함으로써, 설계에서 구현으로 넘어가는 과정을 단축한다.
1Claude Code gets a /design command that lets developers create UI mockups right in the terminal
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.