본문으로 건너뛰기

/design 명령: 코드보다 먼저 아트보드

중급

Anthropic이 의도적으로 코딩을 건너뛰는 슬래시 명령을 Claude Code에 넣었습니다. /design은 평범한 영어로 쓴 브리프에서 편집 가능한 UI 아트보드 캔버스를 발행합니다. 당신이 하나를 골라 손보고, 그다음에야 Claude가 그것을 실제 코드로 바꿉니다. 산출물이 코드가 아닌 첫 Claude Code 기능입니다 — 디자인 단계 자체가 아티팩트입니다.

What you'll learn
  • 아트보드가 무엇인지, 그리고 그것이 코딩 우선 흐름을 어떻게 바꾸는지 이해하기
  • 첫 시도에 /design을 올바르게 실행하기(버전, 플랜, 프롬프트 형태)
  • 세 단계를 알기: 초안 → 선택+편집 → 구현
  • 알려진 세 가지 함정 피하기: 토큰 비용, 당신의 리포에서 벗어나는 스타일 드리프트, 무료 요금제 벽
  • 같은 주에 출시된 Concise 출력 스타일과 /design을 짝지어 쓰기

실제로 무엇인가​

/design은 스킬입니다 — 평범한 슬래시 명령이 아닙니다. 호출하면 Claude Code가 Claude Design의 아트보드 워크플로로 넘기고 발행된 캔버스 링크를 출력합니다. 아트보드는 당신이 조작할 수 있는 작동하는 화면입니다: 색을 바꾸고, 블록을 옮기고, 간격을 넓힐 수 있습니다. 아티팩트 런타임에서 렌더링되므로 당신의 리포 안 파일이 아니라 Claude 계정 안에 살아 있습니다.

그 구분이 중요합니다. /design의 출력은 diff가 아니라 URL입니다. 당신이 구현하라고 말하기 전까지는 git status에 아무것도 올라오지 않습니다.

What you'll learn
  • 가용성: Pro, Max, Team, Enterprise. 무료 요금제 불가. Claude Code v2.1.233 이상 필요. CLI와 Claude Code Desktop 양쪽에 출시.
  • 상태: 리서치 프리뷰 — 호출 형태, 출력 형식, 포함되는 아트보드 개수가 바뀔 것을 예상하세요.

세 단계​

Guided walkthrough1 of 3
  1. 그 화면이 무엇을 위한 것인지 말하는 브리프로 /design을 실행하세요. Claude가 여러 아트보드 변형을 나란히 발행하며, 각각 편집할 수 있습니다. 링크를 받으면 브라우저에서 엽니다.

통하는 프롬프트 형태​

/design은 픽셀 목표가 아니라 목적과 대상을 설명하는 브리프에 잘 반응합니다. 두 가지 패턴:

/design — 기능 브리프

/design a few options for the sign-in screen. Users are engineers on mobile.
Optimize for one-hand thumb reach; SSO is the primary path, email/password
secondary. Show a state for a locked-out account.

/design — 기존 화면 다시 디자인하기

/design redesign our composer based on what people actually use it for:
drafting long messages, attaching files, and switching model. The current
version buries the model picker; make it a first-class control.

그 브리프들에서 조용히 많은 일을 해내는 두 가지:

  • 사용자와 제약을 지목하는 것("engineers on mobile", "one-hand thumb reach")은 Claude를 기본값인 통계적 평균 레이아웃에서 끌어냅니다.
  • 실패 상태를 지목하는 것("locked-out account")은 아트보드가 해피 패스만이 아니라 빈/오류/경계 사례까지 다루게 만듭니다.

세 가지 함정​

1. 토큰을 많이 먹습니다. 호출마다 여러 개의 완전한 충실도 아트보드를 만들기 때문에 일반 채팅 턴보다 예산을 더 빨리 소모합니다. 리서치 프리뷰 사용자들이 일관되게 보고하는 내용입니다. /design은 버리는 스케치가 아니라 진짜 결정에 쓰세요.

2. 당신의 코드베이스와 맞지 않습니다. Claude Design은 당신의 기존 컴포넌트가 아니라 일반적인 미감에서 생성합니다. 아트보드가 앱의 나머지와 같은 느낌이 나길 원한다면 리포 루트에 DESIGN.md(폰트, 간격 스케일, 색 토큰, 기존 컴포넌트)를 미리 올려두고 브리프에서 참조하세요 — /design의 구현 단계가 당신의 버튼 프리미티브를 다시 발명하지 않게 막는 것과 같은 수법입니다.

/design 전에 DESIGN.md 참조시키기

Before you draft anything, read DESIGN.md and list the type scale, spacing
scale, and named color tokens you'll use. Then /design a settings screen
that respects those tokens.

3. 무료 요금제 벽. /design은 유료 플랜(Pro 이상) 뒤에 게이트되어 있습니다. 팀이 Claude Code 좌석을 결제하고 있지만 외주 인력이 무료 요금제라면, 그들에게는 /design이 조용히 존재하지 않습니다.

Concise 출력 스타일과 짝지어 쓰기​

Anthropic은 같은 주에 내장 Concise 출력 스타일을 출시했습니다(v2.1.237). 이 스타일은 Claude가 결과부터 말하고 사족을 건너뛰게 만듭니다 — /design과 좋은 짝입니다. 넘기는 턴("implement option 2")에는 설명이 필요하지 않기 때문입니다:

~/.claude/settings.json
{
  "outputStyle": "Concise"
}

Concise는 오류 보고, 보안 경고, 파괴적 동작 확인에 대해서는 여전히 전체 세부 내용을 유지합니다 — 잃는 것은 설명이지, 안전장치가 아닙니다.

/design이 코드를 직접 쓰는 것보다 이기는 때​

/design을 쓸 때건너뛸 때
시각적 결정이 어려운 부분일 때(새 화면, 불명확한 레이아웃)레이아웃을 이미 알고 있고 코드만 필요할 때
확정하기 전에 3개 이상의 방향을 저렴하게 비교하고 싶을 때기존 화면의 형태가 아니라 로직을 반복 수정할 때
이해관계자가 승인하려면 클릭할 수 있을 듯한 아티팩트가 필요할 때화면이 기존 디자인 시스템과 1:1로 일치해야 할 때
실패/빈/로딩 상태가 중요할 때버릴 내부 도구를 프로토타이핑할 때

눈에 잘 안 띄는 동작​

  • 캔버스 URL은 공유 가능합니다. 아트보드가 아티팩트에 살기 때문에, 당신의 Claude 계정 뷰에 접근할 수 있는 누구에게나 링크가 작동합니다 — 아무것도 내보내지 않고 디자이너나 PM에게 보낼 수 있습니다.
  • 반복은 이중 채널입니다. 캔버스에서 편집하면서 동시에 Claude Code 스레드에서 계속 프롬프트할 수 있습니다. 둘 다 같은 컨텍스트로 들어갑니다.
  • 구현은 여전히 당신의 리포를 존중합니다. 일단 당신이 "구현해"라고 말하면 Claude Code는 평소의 리포 인식 동작으로 돌아갑니다 — 당신의 Tailwind 설정, 당신의 컴포넌트, 당신의 파일 구조를 씁니다. 아트보드는 목표이고, 코드베이스는 지형입니다.
Enter 또는 스페이스 키를 눌러 카드를 뒤집습니다. 좌우 화살표 키로 카드를 이동할 수 있습니다.용어가 표시되었습니다.
1 / 7

스스로 점검하기

0/4
  1. /design이 만든 아트보드는 어디에 사나요?
  2. Claude Code v2.1.230과 무료 Claude 계정을 쓰고 있습니다. /design은 어떻게 되나요?
  3. 어떤 브리프 형태가 /design에게 유용한 아트보드를 만들 최선의 기회를 주나요?
  4. Concise 출력 스타일이 /design과 좋은 짝인 이유는?

출처 및 더 읽을거리​

다음​