본문으로 건너뛰기

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

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

AI피셜 편집부· 5분 읽기원문 보기 ↗
나무 책상 위에 펼쳐 놓은 종이 프로토타입 — 손으로 그린 웹페이지 화면 레이아웃 여러 장을 두 사람이 함께 살펴보는 모습
사진: Sage Ross · CC BY-SA 4.0

핵심 답변

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

TL;DR세 줄 요약

  • /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 · EnterpriseEnterprise는 관리자가 아티팩트를 켜야 함
불가 경로
Bedrock · Google Cloud Agent Platform · Microsoft FoundryAPI 키·게이트웨이 토큰 세션도 발행 불가
렌더링 크기 제한
16MiB 이하
Claude Design 출시
2026-04-17Anthropic 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 스킬은 이런 터미널에 한 줄을 입력하는 데서 시작해, 브라우저에 열리는 아트보드 캔버스로 이어집니다.· 사진: Solijon Solayev · CC BY-SA 4.0

실제 흐름은 이렇습니다

  1. 브리프를 씁니다

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

  2. 캔버스가 아티팩트로 발행됩니다

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

  3. 브라우저에서 고르고 손봅니다

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

  4. 터미널로 돌아와 구현시킵니다

    "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 이상

비용과 한계

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

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

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

같은 주에 나온 것들

Concise 출력 스타일

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

휴대폰에서 내 컴퓨터 세션 시작

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

ANTHROPIC_DEFAULT_MODEL

새 세션이 시작할 모델을 환경 변수로 지정합니다. /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 항목을 주기적으로 확인하세요.

자주 묻는 질문

/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이 켜진 조직에서는 동작하지 않습니다.
만들어진 시안을 직접 고칠 수 있나요?
저장이 켜진 계정이라면 캔버스에서 요소를 선택해 바꾸고 저장하면 새 버전이 발행됩니다. 아니면 시안을 보고 PNG·PDF로 내보내는 것까지만 됩니다.
Claude Design과는 어떤 관계인가요?
Claude Design은 2026년 4월 17일 Anthropic Labs가 내놓은 별도 제품으로, 디자인을 만든 뒤 핸드오프 번들을 Claude Code에 넘기는 구조였습니다. /design은 그 아트보드 워크플로를 Claude Code 안으로 가져와 디자인 단계 자체가 터미널에서 시작되게 합니다.

출처 · 6

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

이 글의 마크다운 원문: /posts/claude-code-design-skill/md/ · 인용 시 출처를 “AI피셜”으로 표기해 주세요.

이 글이 도움이 됐다면 동료에게 보내 주세요.

AI피셜 새 글 알림

새 글이 올라오면 메일로 알려드려요

매일 5편, 5분 브리프. 스팸 없이 새 글 소식만. 언제든 한 번에 해지.

같은 태그·카테고리의 글을 골랐습니다.

활용·도구· 2

MaxKernel — 에이전트가 쓴 TPU 커널, 사람 대비 2.32배

Google이 Gemini 3.1 Pro 기반 멀티 에이전트로 TPU 커널을 자동 작성·최적화하는 MaxKernel 논문과 코드를 공개했습니다. JAXBench 50개 과제와 실제 모델 커널 결과를 정리했습니다.

  • #Google
  • #TPU
  • #코딩 에이전트
활용·도구· 2

Copilot 모델 4종 폐기 — 논문 42%가 '은퇴 모델' 인용

GitHub이 9월 3일 Copilot에서 Gemini 3.5·3.6 Flash, Kimi K2.7 Code, Claude Opus 4.7을 10월 2일 폐기한다고 공지했습니다. 같은 주 논문은 생의학 연구 42%가 은퇴 모델을 인용했다고 짚었습니다.

  • #코딩 에이전트
  • #GitHub Copilot
  • #모델 폐기
활용·도구· 2

GPT-6 Astra, Copilot 정식 제공 — API 제어 3종

9월 4일 GitHub Copilot에 GPT-6 Astra가 정식 제공됐습니다. 대상 플랜·10개 표면·과금 조건과, 9월 3일 Responses API에 더해진 비동기 툴 호출·중간 조향·추론 강도 변경을 정리했습니다.

  • #OpenAI
  • #GPT-6
  • #GitHub Copilot