# Claude Code /design — 터미널에서 UI 시안까지

> Anthropic이 8월 셋째 주 Claude Code에 /design 스킬을 리서치 프리뷰로 넣었습니다. 한 줄 브리프로 편집 가능한 아트보드 여러 장을 받아 고른 뒤 바로 구현시키는 흐름을, 요구 조건과 한계까지 실무자 관점에서 정리했습니다.

- 출처 사이트: AI피셜 (https://aifficial.net/posts/claude-code-design-skill/)
- 발행: 2026-08-22
- 카테고리: 활용·도구 · 태그: Claude Code, 코딩 에이전트, 디자인 도구, 아티팩트, Anthropic

## 핵심 답변

Anthropic은 Claude Code 주간 다이제스트 Week 34(2026년 8월 17~21일)에서 /design 스킬을 리서치 프리뷰로 공개했습니다. 브리프 한 줄을 주면 Claude가 편집 가능한 아트보드 캔버스를 claude.ai 아티팩트로 발행하고 하나를 고르면 코드로 구현하며, Pro 이상 플랜과 Claude Code v2.1.234 이상, claude.ai 로그인 세션이 필요합니다.

## 요약

- /design 브리프 한 줄이면 Claude가 여러 아트보드로 된 캔버스를 claude.ai 아티팩트로 발행하고, 하나를 고르면 코드로 구현합니다.
- Pro·Max·Team·Enterprise 플랜, Claude Code v2.1.234 이상, claude.ai 로그인 세션이 필요하며 API 키·Bedrock·Vertex 경로에서는 동작하지 않습니다.
- 저장이 켜진 계정은 캔버스에서 요소를 직접 고쳐 새 버전으로 발행하고, 아니면 보기와 PNG·PDF 내보내기만 됩니다.
- 4월에 나온 Anthropic Labs의 Claude Design 편집기를 Claude Code 안으로 끌어온 것으로, 같은 주에 Concise 출력 스타일과 Remote Control 정식화도 함께 나왔습니다.

## 핵심 사실

| 항목 | 값 |
|---|---|
| 공개 시점 | Week 34 (2026-08-17 ~ 21) (Claude Code 공식 주간 다이제스트, 리서치 프리뷰) |
| 필요 버전 | Claude Code v2.1.234 이상 (아티팩트 자체는 CLI 2.1.183 또는 데스크톱 1.13576.0 이상) |
| 플랜 | Pro · Max · Team · Enterprise (Enterprise는 관리자가 아티팩트를 켜야 함) |
| 불가 경로 | Bedrock · Google Cloud Agent Platform · Microsoft Foundry (API 키·게이트웨이 토큰 세션도 발행 불가) |
| 렌더링 크기 제한 | 16MiB 이하 |
| Claude Design 출시 | 2026-04-17 (Anthropic Labs 별도 제품) |


## 무슨 일인가요

Anthropic은 Claude Code 공식 주간 다이제스트 Week 34(2026년 8월 17~21일)에서 새 스킬 **`/design`**을 리서치 프리뷰로 공개했습니다.  설명은 짧습니다. "Claude Design의 아트보드 워크플로를 CLI와 Claude Code Desktop 안으로 가져온 것으로, 아티팩트 위에 만들어졌다. 브리프와 함께 실행하면 Claude가 편집 가능한 아트보드 캔버스를 발행한다. 하나를 고르고 손본 뒤 Claude에게 구현시키면 된다." 

여기서 Claude Design은 2026년 4월 17일 Anthropic Labs가 내놓은 별도 제품으로, 텍스트 프롬프트나 문서, 코드베이스에서 디자인·프로토타입·슬라이드를 만들고 "빌드할 준비가 되면 핸드오프 번들을 Claude Code에 한 문장으로 넘기는" 구조였습니다.  이번 변화는 그 반대 방향입니다. 디자인 단계 자체가 Claude Code 안에서 시작됩니다. 




다이제스트가 든 예시는 `/design redesign the composer based on what people actually use it for` 한 줄입니다. 실행하면 Claude가 발행된 캔버스 링크를 출력하고, 사용자는 링크를 열어 아트보드를 고른 뒤 어느 안을 구현할지 알려주면 됩니다. 


## 실제 흐름은 이렇습니다



`/design` 뒤에 "모바일 뱅킹 앱 설정 화면"처럼 그리고 싶은 것을 산문으로 적습니다. 공식 문서는 UI 목업, 화면 흐름, 랜딩 페이지, 포스터를 예로 듭니다. 


Claude가 여러 아트보드를 한 캔버스에 그려 claude.ai 아티팩트로 올립니다. 이 아티팩트는 Claude Design 편집기의 리서치 프리뷰를 실행합니다. 


저장이 켜진 계정이라면 요소를 선택해 바꾸고 저장하면 새 버전이 발행됩니다. 아니면 시안을 보고 PNG·PDF로 내보내는 것까지만 됩니다. 


"2번 안으로 구현해줘"처럼 고른 아트보드를 지정하면 Claude가 코드를 씁니다. 이미 만든 캔버스의 수정은 발행된 아티팩트 안에서 하고, `/design`은 새 캔버스를 만들거나 다시 시드할 때만 씁니다. 



## 쓰기 전에 확인할 조건

`/design`은 아티팩트 위에서 동작하므로 아티팩트의 제공 조건을 그대로 물려받습니다. 공식 문서 기준 조건은 다음과 같습니다. 

| 항목 | 조건 |
| --- | --- |
| 플랜 | Pro, Max, Team, Enterprise (Enterprise는 관리자가 아티팩트를 켜야 함) |
| 인증 | `/login`으로 claude.ai 계정에 로그인한 세션. API 키·게이트웨이 토큰·클라우드 자격증명 세션은 발행 불가 |
| 모델 제공자 | Anthropic API만 가능. Amazon Bedrock, Google Cloud Agent Platform, Microsoft Foundry 불가 |
| 조직 정책 | CMEK, HIPAA, Zero Data Retention이 켜진 조직은 불가 |
| 버전 | `/design`은 Claude Code v2.1.234 이상. 아티팩트 자체는 CLI 2.1.183 또는 데스크톱 1.13576.0 이상 |


사내 게이트웨이나 Bedrock·Vertex로 Claude Code를 쓰는 조직에서는 `/design`이 아예 켜지지 않습니다. Claude가 링크 없이 로컬 HTML만 쓰거나 "발행할 수 없다"고 답하면 이 조건 중 하나가 빠진 것이라고 문서는 안내합니다. 


## 비용과 한계

아티팩트 생성은 다른 응답과 똑같이 출력 토큰을 쓰며, 스타일이 입혀진 페이지는 같은 내용을 터미널 텍스트로 낼 때보다 토큰을 더 씁니다. 인라인 CSS, 인터랙션용 JavaScript, 특히 data URI로 박힌 이미지가 주범입니다.  아트보드 여러 장을 한 번에 그리는 `/design`은 그 비용을 그대로 안고 가므로, 작은 수정보다 새 화면을 처음 잡을 때 쓰는 편이 합리적입니다. 

아티팩트는 백엔드 없는 단일 페이지라 폼 입력을 저장하거나 여러 경로를 서빙할 수 없고, 렌더링 결과는 16MiB 이하여야 합니다.  또 Claude는 v2.1.182부터 아티팩트를 만들 때 내장 디자인 스킬을 적용하며, 프로젝트의 CLAUDE.md 같은 곳에 색·타이포·간격을 적어 두면 자체 선택보다 그 디자인 시스템을 우선합니다.  `/design` 결과를 제품 브랜딩에 맞추려면 이 방법이 첫 번째 지렛대입니다. 

리서치 프리뷰인 만큼 문서화되지 않은 부분도 있습니다. Blake Crosley의 정리 글은 아트보드 개수나 캔버스 크기, 기기 프레임을 지정하는 플래그가 없고, 재시드 동작과 저장 활성 기준이 명확히 적혀 있지 않다고 지적합니다. 

## 같은 주에 나온 것들



v2.1.237에 추가된 내장 출력 스타일입니다. 결과를 먼저 말하고 서두와 진행 설명을 생략하되, 작업 자체는 기본 스타일과 같은 깊이로 합니다. 오류 보고·보안 경고·파괴적 작업 확인은 줄이지 않습니다. `/config`의 Output style에서 켭니다. 


`claude remote-control`을 실행 중인 기기가 Claude 앱 Code 탭 상단에 기기 카드로 뜹니다. 탭에서 디렉터리를 골라 세션을 시작할 수 있고, Remote Control은 리서치 프리뷰를 졸업했습니다. 


새 세션이 시작할 모델을 환경 변수로 지정합니다. `/model`로 고른 값이 여전히 우선하며 재시작 후에도 유지됩니다. 


claude.ai 사용량 한도가 풀리면 세션을 자동으로 이어갑니다. `/config`의 해당 항목에서 끌 수 있습니다. 한도 자체가 늘어나는 것은 아닙니다. 



바로 앞 주인 Week 32 다이제스트에는 8월 14일부터 Pro·Max·Team 플랜의 새 세션에서 **auto mode**가 기본 권한 모드가 된다는 내용도 있습니다.  아티팩트 발행은 auto mode에서 분류기가 검토하고 넘어가므로, 사용자가 프롬프트를 보지 않은 채 페이지가 발행될 수 있다는 점은 알아 두어야 합니다. 

## 그래서 무엇을 보면 되나요

- **개인 개발자·소규모 팀**: Pro 이상 플랜에 `/login`만 돼 있으면 바로 써볼 수 있습니다. 새 화면을 처음 잡는 단계에 한정해 쓰고, 브랜드 토큰을 CLAUDE.md에 적어 두는 것부터 시작하세요.
- **디자이너와 협업하는 팀**: Team·Enterprise는 아티팩트를 조직 내 공유하고 편집자 역할을 줄 수 있으므로, 디자이너가 캔버스에서 고치고 개발자가 터미널에서 구현하는 분업이 가능합니다. 
- **엔터프라이즈·규제 산업**: Bedrock·Vertex·게이트웨이 경로거나 ZDR·HIPAA·CMEK가 켜져 있으면 대상이 아닙니다. 별도 제품인 Claude Design을 쓰는 편이 현실적입니다.
- **지켜볼 것**: 리서치 프리뷰라 아트보드 수 지정, 저장 활성 기준 같은 세부가 바뀔 수 있습니다. 주간 다이제스트와 아티팩트 문서의 Availability 항목을 주기적으로 확인하세요.


Anthropic의 올해 흐름은 계속 "Claude Code 밖에 있던 것을 안으로 끌어오기"였습니다. 4월 Claude Design은 디자인에서 코드로 넘기는 핸드오프였고, 6월 아티팩트는 세션 결과를 웹 페이지로 내보내는 통로였는데, `/design`은 그 둘을 이어서 디자인·검토·구현이 한 세션에서 끝나게 합니다. 다만 리서치 프리뷰 표기와 문서화되지 않은 옵션이 말해 주듯 아직은 "코드를 쓰기 전에 방향을 맞추는 도구"이지, Figma를 대체하는 편집기는 아닙니다. 팀 단위 도입은 저장·공유 조건이 안정된 뒤에 판단해도 늦지 않다고 봅니다. 



이 글은 Claude Code 공식 주간 다이제스트(Week 34)와 아티팩트 문서, Anthropic의 Claude Design 발표, 그리고 두 건의 2차 정리 글을 바탕으로 작성한 비공식 요약입니다. 리서치 프리뷰 기능은 예고 없이 바뀔 수 있으니 최신 조건은 공식 문서를 확인해 주세요.



## 자주 묻는 질문

**Q. /design 스킬을 쓰려면 무엇이 필요한가요?**

Pro·Max·Team·Enterprise 플랜, Claude Code v2.1.234 이상, 그리고 /login으로 claude.ai 계정에 로그인한 세션이 필요합니다. API 키·게이트웨이 토큰 세션이나 Bedrock·Google Cloud Agent Platform·Microsoft Foundry 경로, CMEK·HIPAA·Zero Data Retention이 켜진 조직에서는 동작하지 않습니다.

**Q. 만들어진 시안을 직접 고칠 수 있나요?**

저장이 켜진 계정이라면 캔버스에서 요소를 선택해 바꾸고 저장하면 새 버전이 발행됩니다. 아니면 시안을 보고 PNG·PDF로 내보내는 것까지만 됩니다.

**Q. Claude Design과는 어떤 관계인가요?**

Claude Design은 2026년 4월 17일 Anthropic Labs가 내놓은 별도 제품으로, 디자인을 만든 뒤 핸드오프 번들을 Claude Code에 넘기는 구조였습니다. /design은 그 아트보드 워크플로를 Claude Code 안으로 가져와 디자인 단계 자체가 터미널에서 시작되게 합니다.

## 출처

1. [Week 34 · August 17–21, 2026 (Claude Code 공식 다이제스트)](https://code.claude.com/docs/en/whats-new/2026-w34) (official)
2. [Share session output as artifacts (Claude Code 공식 문서)](https://code.claude.com/docs/en/artifacts) (official)
3. [What's new (Claude Code 공식 문서, 주간 목록)](https://code.claude.com/docs/en/whats-new) (official)
4. [Introducing Claude Design by Anthropic Labs (Anthropic 공식 발표)](https://www.anthropic.com/news/claude-design-anthropic-labs) (official)
5. [Claude Code /design Skill: What the Research Preview Does (Blake Crosley)](https://blakecrosley.com/blog/claude-code-design-skill) (report)
6. [What's New in Claude Code — August 2026 (Origami)](https://origami.sa/en/blog/claude-code-august-2026/) (report)

_이 문서는 AI피셜 편집부가 작성했습니다. 인용 시 출처를 표기해 주세요._