클로드 코드, UI 초안 그려주는 /design 스킬 연구 프리뷰로 공개

코드만 짜던 도구가 화면부터 그린다

지금까지 클로드 코드는 터미널 안에서 코드를 쓰고 고치는 도구였다. 화면 디자인이 필요하면 사람이 먼저 레이아웃을 그리고, 그걸 말로 설명해 코드로 옮겨야 했다. 이번에 앤스로픽이 추가한 /design 스킬은 이 순서를 바꾼다. 슬래시 명령 형태로 호출하지만 공식 발표가 명시한 분류는 '스킬(skill)'이다. 스킬을 실행하면 클로드가 먼저 편집 가능한 화면 초안, 이른바 '아트보드'를 여러 개 만들어 보여주고, 사용자가 그중 하나를 골라 손보면 클로드가 그걸 실제 코드로 구현하는 방식이다.

이 소식은 ClaudeDevs 계정이 공개했고, 테스팅카탈로그가 이를 받아 전했다. 발표에 따르면 /design은 아직 연구 프리뷰 단계이며, 클로드의 산출물 형식인 artifacts — 클로드가 만든 코드나 문서를 별도 창에 띄워 바로 확인·수정할 수 있게 한 기능 — 위에 아트보드 워크플로우를 얹은 구조다. 아트보드 자체는 Claude Design에서 쓰이던 개념으로, 여러 UI 시안을 나란히 놓고 비교하며 다듬는 작업 방식을 가리킨다.

어떻게 써보나

발표 기준 지원 환경은 클로드 코드 CLI와 데스크톱 앱이다. 명령창에 /design을 입력해 시작하며, 연구 프리뷰 단계인 만큼 계정이나 롤아웃 상황에 따라 아직 노출되지 않을 수 있다.

1. 클로드 코드 CLI나 데스크톱 앱을 연 뒤 /design을 입력한다.
2. 클로드가 요청한 화면에 대해 편집 가능한 아트보드 여러 개를 생성해 보여준다.
3. 마음에 드는 시안을 하나 고른다.
4. 색상·배치·문구 등을 직접 조정하거나 말로 수정을 요청한다.
5. 확정한 아트보드를 클로드에게 넘기면 실제로 동작하는 코드로 구현한다.

이용 조건은 연구 프리뷰라는 점 외에 요금제나 지역 제한이 발표에 명시되지 않았다. 예를 들어 웹서비스 랜딩페이지 시안을 여러 개 뽑아보고 그중 하나를 골라 바로 배포 가능한 코드로 바꾸거나, 사내 대시보드 레이아웃을 반복해서 다듬는 작업에 붙여볼 수 있다.

클로드 디자인, 여기까지 오는 데 2년 남짓

이번 스킬은 갑자기 나온 기능이 아니라, 앤스로픽이 디자인과 코드 사이의 거리를 꾸준히 좁혀온 흐름의 최신 단계다.

• 2024년 6월 — artifacts 도입: 클로드가 만든 코드·문서를 대화창 옆 별도 창에서 바로 확인하고 고칠 수 있게 됐다. 이번 아트보드가 올라탄 기반이다.
• 2026년 4월 17일 — Claude Design 공개: 앤스로픽 랩스가 아트보드 기반 디자인 도구를 연구 프리뷰로 내놨다. Pro·Max·Team·Enterprise 플랜 대상이며, 시각 작업에 맞춰 조정된 클로드 오퍼스 4.7이 기반이다.
• 2026년 6월 18일 — 클로드 코드와 첫 연동: 완성한 시안을 'handoff bundle'로 묶어 클로드 코드에 넘기는 구현 연계가 열렸고, 사용량 한도도 채팅·클로드 코드와 통합됐다.
• 2026년 8월 17일 — /design 스킬 연구 프리뷰: 별도 앱을 오가던 아트보드 워크플로우가 클로드 코드 CLI·데스크톱 안으로 직접 들어왔다.

넉 달 만에 '별도 제품 → 핸드오프 연동 → 도구 내장'으로 단계가 좁혀진 셈이다.

구분	이전 방식	/design 도입 후
시안 제작	사람이 직접 초안 작성	클로드가 여러 아트보드 자동 생성
수정 방식	텍스트로 요청 후 코드 확인	아트보드에서 직접 조정
산출물 위치	별도 문서·이미지	artifacts 안에서 바로 편집

에디터의 시선

이번 /design은 코딩 에이전트 경쟁이 이제 '코드를 잘 짜느냐'를 넘어 '화면까지 통째로 맡길 수 있느냐'로 옮겨가고 있다는 신호로 읽는 게 맞다. 커서 같은 경쟁 도구들도 최근 코드베이스 전체를 들여다보는 탭을 비공개 베타로 테스트하고 있는데, 방향은 비슷하다. 에이전트가 코드 한 줄이 아니라 프로젝트 전체의 맥락 — 이번엔 디자인까지 — 을 쥐고 움직이게 만드는 쪽으로 다들 가고 있다.

세대 비교로 보면 체감이 분명하다. 예전 코딩 에이전트에게 "로그인 화면 좀 예쁘게 만들어줘"라고 하면 코드 뭉치 하나가 뚝 떨어졌다. 마음에 안 들면 처음부터 다시 프롬프트를 써야 했다. 이번 방식은 그 사이에 '고르고 다듬는' 단계를 하나 끼워 넣었다는 점이 다르다. 시안 여러 개를 놓고 비교하는 절차 자체가 사람이 디자인 툴에서 하던 작업과 닮았다는 뜻이다.

실무적으로는 아직 '연구 프리뷰'라는 딱지를 가볍게 볼 일이 아니다. 실제 서비스 코드베이스에 붙이기보다는 사이드 프로젝트나 프로토타입 단계에서 먼저 써보고, 한 번에 몇 개 파일까지 건드리는지 스스로 확인하는 게 순서다. 호출 한 번에 여러 파일이 함께 바뀌는 기능은 리뷰 없이 그대로 병합하기엔 이르다.

앞으로 몇 주 안에는 이 기능을 실제로 써본 개발자들의 후기가 쏟아질 것이고, 아트보드가 얼마나 실전 코드 품질까지 이어지는지가 관건이 될 것이다. 연구 프리뷰 딱지가 언제 떨어지는지도 지켜볼 대목이다.