Anthropic, 터미널 UI 목업 제작을 위한 Claude Code의 /design 명령어 추가
Anthropic이 개발자가 터미널을 벗어나지 않고도 UI 목업을 생성, 반복 수정 및 확인할 수 있는 새로운 /design 명령어를 통해 Claude Code의 기능을 확장했습니다.
터미널에서 직접 수행하는 UI 프로토타이핑
Figma와 셸(shell) 사이를 오가는 대신, 이제 /design a few options for a login screen과 같이 입력하기만 하면 됩니다. Claude는 고정밀(high-fidelity) 목업을 보여주는 여러 개의 인터랙티브한 "아트보드(artboards)"로 응답합니다. 실제 프로덕션 코드를 단 한 줄도 작성하기 전에 레이아웃을 비교하고, 마음에 드는 것을 선택하며, 후속 질문을 통해 디자인을 다듬을 수 있습니다.
코드베이스를 반영한 문맥 인식형 목업
개발자 Nate Parrott는 Claude가 실제로 현재 저장소(repository)를 읽는다는 점에 주목했습니다. Claude는 색상 팔레트, 컴포넌트 라이브러리, 레이아웃 컨벤션을 추출하여 각 디자인이 프로젝트의 기존 스타일과 일치하도록 맞춤 조정합니다. 결과물은 별도의 그래픽 에디터를 열지 않고도 이미지를 보여주는 Claude 내부의 전용 뷰인 "Artifacts"로 나타납니다. 이 단계에서 목업은 Claude의 워크스페이스에만 존재하며, 코드로 변환하기 전에 반드시 파일 시스템에 명시적으로 저장해야 합니다.
AI 지원 개발에서 이것이 중요한 이유
이 명령어는 소프트웨어 개발 생명 주기(SDLC)의 두 단계인 디자인과 코딩을 하나로 통합합니다. 속도를 중시하는 팀은 단 한 번의 프롬프트로 여러 레이아웃 옵션을 생성하여 초기 단계의 탐색 과정을 가속화할 수 있습니다. Claude는 실제 코드베이스를 사용하기 때문에 목업이 브랜드 정체성을 유지하고 컴포넌트 시스템과 호환되며, 일반적인 이미지 생성 후에 뒤따르는 수동 정리 작업을 줄여줍니다.
Anthropic은 이를 로직과 미학을 모두 다루는 "AI 소프트웨어 엔지니어"로 나아가는 단계로 정의합니다. 터미널이 멀티모달(multi-modal) 워크스페이스 역할을 할 수 있다면, 코드 작성과 사용자 경험(UX) 설계 사이의 경계는 극적으로 좁아질 것입니다.
현재의 한계점
이 기능은 아직 프리뷰 단계입니다. 생성된 목업이 자동으로 소스 파일이 되지는 않으므로, 사용자가 직접 내보내고 통합해야 합니다. 이러한 추가 단계는 특히 수십 개의 컴포넌트가 있는 대규모 프로젝트에서는 시간 절감 효과를 반감시킬 수 있습니다.
사용 방법
claude update를 실행하여 최신 프리뷰 빌드를 가져오고 /design 명령어를 활성화하세요.
핵심 요약
- 통합된 프로토타이핑:
/design을 통해 터미널 프롬프트에서 직접 여러 UI 아트보드를 생성합니다. - 문맥적 일관성: Claude가 현재 코드베이스를 스캔하여 목업이 기존 디자인 시스템과 일치하도록 유지합니다.
- 간소화된 워크플로우: Claude Design의 프롬프트 능력과 Claude Code의 실행력을 결합함으로써, 개발자는 도구를 전환하지 않고도 컨셉에서 시각적 프로토타입으로 바로 넘어갈 수 있습니다.
Anthropic의 새로운 /design 명령어는 개발자가 터미널에서 즉시 UI 목업을 생성하고 반복 수정할 수 있게 하여, 많은 빠른 팀들이 여전히 겪고 있는 병목 현상인 디자인 도구와 코드 에디터 사이의 번거로운 전환 과정을 줄여줍니다.
CLI 프롬프트로 시각적 초안 생성하기
/design a few options for a login screen과 같은 명령어를 입력하면 Claude가 일련의 인터랙티브한 아트보드를 반환합니다. 각 아트보드는 고정밀 목업을 보여주며, 사용자는 후속 질문을 통해 이를 검토하고 비교하며 다듬을 수 있습니다.
Claude는 현재 프로젝트의 파일을 읽어 색상 팔레트, 컴포넌트 라이브러리, 레이아웃 컨벤션을 추출한 다음 이에 맞춰 디자인을 조정합니다. 결과물은 별도의 그래픽 에디터를 열지 않고도 이미지를 보여주는 "Artifacts" 뷰로 나타납니다. 이 시점에서 목업은 Claude의 워크스페이스에만 존재하므로, 코드로 변환하기 전에 반드시 파일 시스템에 명시적으로 저장해야 합니다.
개발자들이 터미널 내 디자인 도구에 주목하는 이유
대부분의 개발자는 업무 시간의 상당 부분을 코드 터미널과 UI 디자인 앱 사이를 오가는 데 소비합니다. 시각적 프로토타이핑을 코드가 작성되는 동일한 창으로 가져옴으로써 소프트웨어 개발 생명 주기의 두 단계를 하나로 통합할 수 있습니다.
속도 중심의 팀에게는 단 한 번의 프롬프트로 여러 레이아웃 옵션을 생성하는 것이 초기 탐색 단계를 가속화할 수 있습니다. Claude가 기존 코드베이스를 읽음으로써 목업이 브랜드 정체성을 유지하고 프로젝트의 컴포넌트 시스템과 호환되도록 하여, 일반적인 이미지 생성 단계 이후에 발생하는 수동 정리 작업을 줄여줍니다.
Anthropic은 이번 추가 기능을 로직과 미학을 모두 다룰 수 있는 "AI 소프트웨어 엔지니어"로 나아가는 단계로 정의합니다. 터미널이 이제 멀티모달 워크스페이스 역할을 할 수 있다면, 코드 작성과 사용자 경험 설계 사이의 경계는 더욱 얇아질 것입니다.
한계점 및 기존 디자인 도구의 필요성
이 기능은 아직 프리뷰 단계이며, 몇 가지 실질적인 제약 사항이 남아 있습니다. 첫째, 생성된 목업이 자동으로 소스 파일이 되지는 않으므로, 개발자가 직접 내보내고 통합해야 합니다. 수십 개의 컴포넌트를 동기화해야 하는 대규모 프로젝트의 경우, 이러한 추가 단계로 인해 시간 절약 효과가 반감될 수 있습니다.
기능이 성숙해짐에 따라 주목해야 할 점
Anthropic의 업데이트 노트에 따르면, 간단한 claude update 명령으로 이 기능을 활성화할 수 있습니다.
시사점: Claude Code의 터미널 내에 디자인 프롬프트를 삽입하는 것은 개발자에게 컨셉에서 시각적 프로토타입으로 넘어가는 지름길을 제공하지만, 워크플로우가 여전히 수동 전달에 의존하며 전용 UI 도구만큼의 깊이가 부족합니다. 이 기능의 발전 여부에 따라 해당 명령어가 단순한 편의 기능으로 남을지, 아니면 AI 기반 개발 스택의 핵심 요소가 될지가 결정될 것입니다.