클로드 디자인

Claude Design은 텍스트·문서·코드베이스를 입력으로 받아 인터랙티브 프로토타입과 발표 자료를 만드는 Anthropic Labs 제품입니다. 이 섹션은 9개 페이지로 정리한 한국어 가이드입니다. 각 페이지 끝의 Sources가 원문 공식 문서로 연결됩니다.

인테리어 디자인 스튜디오를 떠올려 보세요. 손님이 “우리 매장 분위기에 맞는 카운터를 그려줘"라며 사진과 글로 요청하면, 디자이너는 그 자리에서 3D 모형과 견본을 만들어 보여줍니다. 손님이 “나무 톤을 좀 더 따뜻하게”, “선반을 하나 더 달아줘” 같은 코멘트를 던지면 디자이너는 즉시 고쳐서 다시 보여줍니다. Claude Design이 바로 이런 실시간 디자인 스튜디오의 디지털 버전입니다.

차이점은 디자이너가 사람이 아니라 Claude라는 점, 그리고 손님이 “텍스트와 이미지"로만 요청해도 Claude가 그것을 읽고(이것을 비전 기반 — 그림·사진·문서를 눈으로 보듯 이해하는 능력이라 합니다) 클릭할 수 있는 화면 시안으로 만들어낸다는 점입니다. 결과물은 그림 파일이 아니라 인터랙티브 프로토타입(버튼을 누르면 화면이 넘어가는 등 실제로 조작해 볼 수 있는 시안)입니다. “랜딩 페이지 하나 만들어줘"라고 말하면 당장 브라우저에서 클릭해 볼 수 있는 화면이 뜹니다.

“Anthropic Labs"와 “Research Preview"라는 표현이 자주 보입니다. Anthropic Labs는 Anthropic이 새 기능을 빠르게 실험해 보는 조직 단위이고, Research Preview는 “완성된 정식 제품이 아니라 공개적으로 시험 중인 단계"를 뜻합니다. 즉 Claude Design은 안정화가 계속 진행 중인, 쓸 만하지만 발전 중인 도구입니다.

flowchart LR
    A["사용자 입력
텍스트·이미지·문서"] --> B["Claude Design
실시간 스튜디오"]
    B --> C["인터랙티브 시안
클릭 가능"]
    B <-. 코멘트 .-> A
    C --> D["내보내기
Canva·PPTX·코드"]

    style A fill:#eaeaea,stroke:#6e6e6e,color:#09110f
    style B fill:#fbf0dc,stroke:#c47b2a,stroke-width:2px,color:#09110f
    style C fill:#e6f0ef,stroke:#144a46,color:#09110f
    style D fill:#d6ebe7,stroke:#1c7c70,color:#09110f

flowchart TD
    A["1. 시작하기
입력 4종"] --> B["2. 디자인 시스템
★ 가장 중요"]
    B --> C["3. 리파인먼트
+ 협업"]
    C --> D["4. 내보내기·핸드오프"]
    D --> E["5. 사용 사례·BP"]
    E --> F["6. 요금제·제한"]

    style A fill:#eaeaea,stroke:#6e6e6e,color:#09110f
    style B fill:#fbf0dc,stroke:#c47b2a,stroke-width:2px,color:#09110f
    style C fill:#e6f0ef,stroke:#144a46,color:#09110f
    style D fill:#dceee9,stroke:#2a8a8c,color:#09110f
    style E fill:#d6ebe7,stroke:#1c7c70,color:#09110f
    style F fill:#cce4dc,stroke:#155a52,color:#09110f

Note

플러그인과 다릅니다. claude.ai/design(이 섹션의 주제)은 비주얼 생성 제품이고, claude.com/plugins/design은 Cowork에서 디자인 비평·UX 카피·접근성 감사를 돕는 별도 플러그인입니다. 두 도구는 함께 쓸 수 있지만 같은 도구가 아닙니다.

sequenceDiagram
    autonumber
    participant U as 사용자
    participant CD as Claude Design (web)
    participant DS as 디자인 시스템
    participant CC as Claude Code
    participant OUT as 내보내기

    U->>CD: 텍스트·이미지·DOCX·웹 캡처 입력
    CD->>DS: 등록된 디자인 시스템 적용
    DS-->>CD: 색·타이포·컴포넌트 주입
    CD-->>U: 초기 시안 (인터랙티브)

    loop 리파인먼트
        U->>CD: 인라인 코멘트 · 슬라이더 · 자연어 수정
        CD-->>U: 부분 또는 전체 적용
    end

    alt 발표·공유
        U->>OUT: PPTX · PDF · Canva · 조직 URL
    else 코드로 빌드
        U->>OUT: Claude Code 핸드오프 번들
        OUT->>CC: 의도 + 토큰 + 컴포넌트 트리 전달
        CC-->>U: 프로덕션 코드
    end

햄버거 프랜차이즈를 생각해 봅니다. 본사가 “우리 매장 톤은 따뜻한 갈색, 글씨체는 이것, 버튼은 둥근 형태"라고 정해둔 매뉴얼이 없으면 매장마다 분위기가 제각각이 됩니다. 어떤 곳은 차가운 파란색, 어떤 곳은 빨간 글씨. 손님은 같은 브랜드인지 헷갈립니다. 이 매뉴얼이 브랜드 가이드북입니다.

Claude Design에서도 똑같습니다. 우리 회사의 색·글씨체·버튼 모양을 디자인 시스템(한 번 정해두면 모든 시안에 일관되게 적용되는 스타일 규칙 묶음)으로 미리 알려주지 않으면, Claude는 세상에 널린 수많은 디자인의 **“평균적인 모습”**을 뱉어냅니다. 쉽게 말해 인터넷에서 가장 흔하게 보이는 무난한 회색빛 디자인 — 누가 봐도 “AI가 만든 것 같은” 그 느낌입니다. 이를 학습 데이터 평균값으로 수렴한다고 표현합니다. Claude가 학습한 방대한 웹사이트들의 중간값으로 결과가 쏠린다는 뜻입니다.

반대로 디자인 시스템을 먼저 등록하면 어떻게 될까요. 우리 브랜드 색과 글씨체가 시안에 일관되게 묻어납니다. 매장마다 분위기가 같아지는 것처럼, 어떤 페이지를 만들든 우리 회사 느낌이 유지됩니다. 그래서 학습 경로 두 번째 단계에 ★ 표시가 붙어 있고, “디자인 시스템 페이지를 반드시 통과할 것"을 권장하는 것입니다. 한두 단계 건너뛰면 결과가 AI 냄새 나는 일반적 디자인으로 퇴색합니다.

가이드북이 아직 없다면 — 밑바닥부터 토큰을 정의하는 대신, moai-design 플러그인의 design-system-library 스킬이 제공하는 56개 글로벌 브랜드 시스템(Notion·Linear·Stripe·Vercel·Figma·Sentry 등) 중 하나에서 시작하세요. 검증된 시스템을 DESIGN.md 소스로 가져오면 “학습 데이터 평균값으로 수렴"하는 함정을 피할 수 있습니다. 자세한 원칙은 디자인 시스템 설정 페이지의 “사전 빌트인 시스템에서 시작"을 참고하세요.

건축 프로젝트에 세 전문가가 있다고 상상해 보세요. 첫째 설계 사무실은 건축가가 아이디어를 스케치하고 모형을 만듭니다. 둘째 시공사는 그 설계도를 받아 실제 건물을 짓습니다. 셋째 인테리어 코디네이터·운영 담당은 공사가 끝난 뒤 자재 주문, 문서 정리, 반복되는 잡무를 처리합니다. 세 사람은 각자 다른 구간을 맡지만 도면과 산출물을 주고받으며 하나의 건물을 완성합니다.

Claude 생태계도 이와 같습니다. 세 도구는 목적이 다르고 다른 구간을 담당합니다.

• Claude Design (claude.ai/design) — 설계 사무실. 아이디어와 참고 자료를 받아 클릭할 수 있는 화면 시안을 만듭니다. 비주얼(눈에 보이는 것)이 중심.
• Claude Code — 시공사. 시안을 받아 실제로 동작하는 코드(프로덕션 빌드)로 짓습니다. Claude Design의 결과물을 핸드오프 번들(설계 의도와 컴포넌트 구조를 담은 전달 묶음) 형태로 넘겨받습니다.
• Cowork + MoAI 플러그인 — 운영·자동화 담당. 설계와 시공 사이사이에서 UX 카피 작성, 접근성 검사, 디자인 비평, 반복 문서 생성, 발행 자동화를 보조합니다.

즉 “아이디어 → 시안 → 코드 → 검토·자동화"라는 흐름에서 Claude Design은 앞쪽(아이디어를 시안으로), Claude Code는 중간(시안을 코드로), Cowork는 양쪽을 잇는 보조 구간을 맡습니다. 같은 Anthropic 계정으로 로그인된 모든 디바이스에서 결과물을 이어 받을 수 있습니다.

flowchart LR
    A["아이디어
텍스트·이미지·문서"] --> D["Claude Design
설계 사무실"]
    D -->|"시안 (인터랙티브)"| CC["Claude Code
시공사"]
    D -->|"핸드오프 번들"| CC
    CC -->|"프로덕션 코드"| P["완성물"]

    CW["Cowork + MoAI 플러그인
운영·자동화"] -.->|"UX 카피·접근성
문서·반복 작업"| D
    CW -.->|"검토·디자인 비평"| CC

    style A fill:#eaeaea,stroke:#6e6e6e,color:#09110f
    style D fill:#fbf0dc,stroke:#c47b2a,stroke-width:2px,color:#09110f
    style CC fill:#e6f0ef,stroke:#144a46,color:#09110f
    style P fill:#d6ebe7,stroke:#1c7c70,color:#09110f
    style CW fill:#dceee9,stroke:#2a8a8c,color:#09110f

flowchart LR
    IDEA["아이디어
텍스트 · 이미지 · 문서"]
    DESIGN["Claude Design
(설계 사무소)

시안을 만든다 — 비전 중심"]
    CODE["Claude Code
(시공사)

시안을 코드로 짓는다"]
    PRODUCT["완성물
프로덕션 빌드"]
    COWORK["Cowork + MoAI 플러그인
(운영 · 자동화 담당)

UX 카피 · 접근성 검사 · 디자인 비평 · 반복 문서 · 발행 자동화"]

    IDEA --> DESIGN
    DESIGN -->|"시안 + 핸드오프 번들"| CODE
    CODE --> PRODUCT

    COWORK -.->|"보조"| DESIGN
    COWORK -.->|"보조"| CODE

    classDef ideaNode fill:#EAEAEA,stroke:#6E6E6E,color:#141413
    classDef designNode fill:#FBF0DC,stroke:#C47B2A,stroke-width:3px,color:#141413
    classDef codeNode fill:#E6F0EF,stroke:#144A46,stroke-width:2px,color:#141413
    classDef productNode fill:#D6EBE7,stroke:#1C7C70,color:#141413
    classDef coworkNode fill:#DCEEE9,stroke:#2A8A8C,stroke-width:2px,color:#141413

    class IDEA ideaNode
    class DESIGN designNode
    class CODE codeNode
    class PRODUCT productNode
    class COWORK coworkNode

자세한 동선은 내보내기와 핸드오프·역할별 사용 사례 페이지에서.

이 섹션의 운영 원칙·베스트 프랙티스를 자동화한 moai-design 플러그인이 마켓플레이스에 정식 등록되어 있습니다(6개 스킬). Cowork에서 자연어로 호출하면 AskUserQuestion으로 정보를 모은 뒤 claude.ai/design 채팅에 그대로 붙여 넣을 수 있는 산출물을 만들어 줍니다.

특히 **design-system-library**는 우리 브랜드 가이드북이 없을 때 가장 먼저 손댈 곳입니다. Notion·Linear·Stripe·Vercel·Figma·Sentry 등 56개 글로벌 브랜드 디자인 시스템을 빌트인으로 품고 있어, 밑바닥부터 토큰을 정의하지 않고도 검증된 시스템에서 출발할 수 있습니다. 디자인 시스템 설정 페이지의 “사전 빌트인 시스템에서 시작” 원칙(원칙 6)과 직결됩니다.

먼저 시작하기에서 첫 프롬프트와 입력 4종을 익히세요. 그다음 디자인 시스템 설정 ★ 페이지를 반드시 통과하는 것을 권장합니다. 디자인 시스템 셋업을 건너뛰면 결과 품질이 학습 데이터 평균값으로 수렴해 “AI가 만든 것 같은” 일반적 디자인이 나옵니다.

• Introducing Claude Design by Anthropic Labs — 공식 출시 공지 (2026-04-17)
• Using Claude Design for prototypes and UX (Anthropic Tutorial) — 공식 튜토리얼
• Set up your design system in Claude Design — 디자인 시스템 설정 도움말
• Claude Design admin guide for Team and Enterprise plans — 관리자 가이드
• Design — Claude Plugin — Cowork 디자인 플러그인 (별개 제품)

페이지별 추가 출처는 각 페이지 하단의 Sources 섹션에 정리되어 있습니다.