클로드 코드 /design 스킬, 화면 시안부터 코드까지 세션 하나로 끝냅니다
클로드 코드로 화면을 만들 때 가장 번거로운 순간은 디자인 시안이 필요할 때였습니다. 클로드 디자인에서 시안을 뽑고, 그 결과물을 내보내서 클로드 코드 세션으로 다시 가져오고, 코드로 옮기다가 디테일이 어긋나면 또 클로드 디자인으로 돌아가는 식이었습니다.
Anthropic이 2026년 8월 17일 클로드 코드 v2.1.234에 리서치 프리뷰로 추가한 /design 스킬은 이 왔다갔다를 없앱니다. 클로드 코드 세션 안에서 바로 아트보드 캔버스를 열어 시안을 뽑고, 그 자리에서 수정하고, 같은 세션에서 코드로 구현까지 이어갑니다.
/design 스킬이 실제로 하는 일
/design 뒤에 원하는 화면을 문장으로 설명하면, 클로드가 코드 파일을 바로 내놓는 대신 나란히 비교할 수 있는 여러 개의 편집 가능한 아트보드를 만들어 캔버스로 발행합니다. 클로드 코드 공식 문서에 실린 예시 명령은 다음과 같습니다.
> /design redesign the composer based on what people actually use it for
클로드 코드 공식 What’s New 문서에 실린 /design 스킬 소개
캔버스 링크를 열어 마음에 드는 아트보드를 고르면, 그때부터는 클릭으로 요소를 선택하고 속성 패널로 색상과 여백을 조정하고 텍스트를 인라인으로 바로 고치는 편집 화면이 뜹니다. 이 편집 기능은 클로드 디자인이 4월 출시 이후 쌓아온 아트보드 편집기를 그대로 가져온 것이라, 되돌리기와 다시 실행도 지원합니다.
아트보드를 고른 뒤 열리는 편집 화면, 오른쪽 Tweaks 패널에서 테마와 타이포그래피를 바로 조정할 수 있다
계정에서 저장이 허용된 경우에는 Save를 눌러 이 편집 결과를 새 버전으로 발행하고, 저장이 막힌 계정에서는 PNG나 PDF로 내보내는 미리보기 화면만 받게 됩니다.
이전 방식과 다른 점은 컨텍스트가 끊기지 않는다는 것
기존에는 클로드 디자인과 클로드 코드가 완전히 분리된 세션이었습니다. 기획서를 클로드 디자인에 다시 설명하고, 디자인 시스템 파일을 옮기고, 개발 관련 요구사항을 코드 세션에 별도로 전달해야 했습니다.
/design은 아티팩트 기반으로 동작하기 때문에 코드 세션 하나에 기획, 디자인, 개발 문맥이 전부 남습니다. PRD로 화면의 목적을 설명하고, design.md로 컬러와 타이포그래피 같은 디자인 시스템을 정의해두면, 클로드가 아트보드를 만들 때도 이 문서들을 그대로 참고합니다. 시안을 고르고 코드로 구현하라고 지시할 때도 같은 세션이라 앞서 나눈 논의를 다시 설명할 필요가 없습니다.
레퍼런스부터 개발까지, 한 세션 안의 루프
/design을 활용하는 실전 흐름은 보통 네 단계를 오갑니다. 레퍼런스가 될 만한 화면을 모으고, 그 레퍼런스를 바탕으로 컨셉 시안 여러 개를 뽑고, 마음에 드는 시안에서 디자인 시스템을 정리하고, 마지막으로 그 시스템에 맞춰 코드로 구현하는 순서입니다. 이 네 단계가 모두 같은 세션 안에서 돌아간다는 점이 핵심입니다.
레퍼런스 수집부터 개발 구현까지, 세션을 나가지 않고 도는 작업 루프
레퍼런스 수집 단계에서는 Mobbin MCP를 붙여 참고할 만한 실제 서비스 화면을 가져오는 방식이 많이 쓰입니다. Mobbin은 유료 플랜이 필요한 서비스라, 이 부분은 직접 캡처해둔 참고 화면 폴더를 클로드 코드에 넘기는 방식으로 대신할 수도 있습니다. 이후 컨셉 시안, 디자인 시스템, 개발 구현 단계는 모두 /design과 클로드 코드의 기본 대화만으로 이어집니다.
아직 남은 한계
/design은 리서치 프리뷰 단계라 완성된 기능은 아닙니다. 가장 크게 걸리는 부분은 내보내기입니다. 아트보드를 코드로 구현하는 것과 별개로, 디자인 산출물 자체를 파일로 내보내는 기능은 아직 없습니다.
디자인 시스템을 정교하게 관리해야 하는 팀이라면 여전히 기존 클로드 디자인 쪽이 유리할 수 있습니다. 클로드 디자인은 팀 단위로 디자인 시스템을 온보딩하고 Canva, PDF, PPTX로 내보내는 기능까지 갖추고 있는 반면, /design은 코드로 바로 이어지는 것에 초점이 맞춰져 있어 이런 관리 기능은 빠져 있습니다.
정리
/design은 화면 하나를 만들 때마다 디자인 툴과 코드 에디터를 오가던 습관을 없애는 쪽에 가깝습니다. 별도 디자인 산출물 관리나 팀 협업이 중요한 프로젝트라면 클로드 디자인을 계속 쓰고, 아이디어를 빠르게 시안으로 뽑아 바로 코드로 옮기고 싶다면 클로드 코드 세션 안에서 /design을 먼저 써보면 됩니다. Pro, Max, Team, Enterprise 플랜에서 클로드 코드 CLI나 데스크톱 앱을 v2.1.234 이상으로 올리면 바로 쓸 수 있습니다.
Leave a comment