moai-design — Claude Design 보조

claude.ai/design에서 디자인을 만들 때 그 앞과 뒤를 받쳐 주는 Cowork 플러그인입니다. Claude Design 자체를 대체하지 않습니다 — 더 좋은 입력을 만들어 주고, 결과물을 잘 활용하도록 돕습니다.

flowchart TD
    A["1. claude-design-system-prep
브랜드 자산 → DESIGN.md"] --> B["claude.ai/design
디자인 시스템 셋업"]
    B --> C["2. claude-design-brief
6요소 자동 채움"]
    B --> D["3. claude-design-prompt-builder
시니어 UX 10 패턴"]
    C --> E["claude.ai/design
시안 생성·리파인"]
    D --> E
    E --> F["4. claude-design-slop-check
AI 슬롭 검수"]
    F --> G["moai-content:humanize-korean
(선택)"]
    E --> H["Claude Design 핸드오프"]
    H --> I["5. claude-design-handoff-reader
번들 분석 + 지시 1줄"]
    I --> J["Claude Code 구현"]

    style B fill:#fbf0dc,stroke:#c47b2a,color:#09110f
    style E fill:#fbf0dc,stroke:#c47b2a,color:#09110f
    style A fill:#e6f0ef,stroke:#144a46,color:#09110f
    style C fill:#e6f0ef,stroke:#144a46,color:#09110f
    style D fill:#e6f0ef,stroke:#144a46,color:#09110f
    style F fill:#dceee9,stroke:#2a8a8c,color:#09110f
    style I fill:#dceee9,stroke:#2a8a8c,color:#09110f
    style J fill:#d6ebe7,stroke:#1c7c70,stroke-width:2px,color:#09110f

Claude Design은 강력하지만 입력 품질이 결과 품질을 결정합니다. 디자인 시스템을 셋업하지 않고 막연한 프롬프트를 던지면 “AI 티"가 나는 평균값 디자인이 나옵니다.

이 플러그인은 그 입력 단계를 정돈하고, 결과물의 출력 단계를 다듬어 줍니다. Cowork 채팅에서 자연어로 호출하면 AskUserQuestion으로 필요한 정보를 모은 뒤 claude.ai/design 채팅에 그대로 붙여 넣을 수 있는 산출물을 만들어 줍니다. 플러그인은 Claude Design 워크플로우를 받쳐 주는 다섯 단계의 스킬과, 별도 축으로 HTML 산출물에 브랜드 무드를 입히는 design-system-library 라이브러리(스킬 포함 총 6개)로 이루어져 있습니다.

외주 디자이너(Claude Design)에게 작업을 맡긴다고 상상해 봅시다. 그냥 “예쁘게 만들어 주세요"라고만 하면 디자이너는 내 회사가 어떤 색을 쓰는지, 어떤 말투를 쓰는지 알 수 없어 뻔하고 평범한 결과물을 가져옵니다. 반면 작업 전에 브랜드 가이드북을 책상 위에 펼쳐두고, 의뢰서를 깔끔하게 써주고, 특정 영역은 시니어의 체크리스트를 골라주면 결과물의 수준이 확 달라집니다. 이 플러그인은 바로 그 비서 역할을 합니다.

다섯 스킬은 한 방향으로 이어지는 하나의 흐름입니다. (1) system-prep은 회사 웹사이트·로고·기존 발표자료에서 “우리 색깔은 이거, 글꼴은 이거"라는 브랜드 가이드북을 자동으로 뽑아 정리해 줍니다. (2) brief는 “이런 페이지를 이런 톤으로 만들어 달라"는 의뢰서를 빈칸 없이 깔끔하게 써줍니다. (3) prompt-builder는 접근성·폼 같은 특정 영역에 시니어 디자이너의 체크리스트를 골라줍니다. (4) slop-check는 외주가 가져온 시안의 카피를 붉은 펜으로 교열합니다. (5) handoff-reader는 최종 결과물을 개발팀에 넘길 인계 서류를 써줍니다. Claude Design 자체를 대체하지 않고, 그 앞(입력)과 뒤(출력)를 받쳐 주는 보조 파이프라인(작업이 한 방향으로 흘러가는 연결선)이라는 점이 이 플러그인의 핵심입니다.

앞선 그림이 5개 스킬과 Claude Design 내부 단계를 함께 담고 있어 세부적으로는 좋지만, “플러그인이 끼어드는 지점이 어디인지"를 한눈에 보기에는 노드가 많습니다. 아래는 본질만 남긴 단순 버전입니다. 왼쪽 세 스킬(system-prep·brief·prompt-builder)은 외주 디자이너에게 넘기기 전 의뢰서를 준비하는 비서, 가운데 Claude Design은 외주 디자이너가 직접 그리는 작업 자체, 오른쪽 두 스킬(slop-check·handoff-reader)은 시안이 나온 뒤 결과물을 정제하고 개발팀에 인계하는 비서입니다. 플러그인은 양끝의 비서 역할만 할 뿐, 가운데 그림을 그리는 일은 Claude Design 본체가 합니다.

flowchart LR
    subgraph Input["입력 준비 (비서)"]
        I1["1 system-prep
브랜드 가이드북"]
        I2["2 brief
의뢰서 6요소"]
        I3["3 prompt-builder
시니어 체크리스트"]
    end

    CD["Claude Design
외주가 직접 그리는 작업"]

    subgraph Output["출력 정제·인계 (비서)"]
        O1["4 slop-check
카피 교열"]
        O2["5 handoff-reader
개발 인계 서류"]
    end

    Input --> CD --> Output

    style Input fill:#e6f0ef,stroke:#144a46,color:#09110f
    style CD fill:#fbf0dc,stroke:#c47b2a,color:#09110f
    style Output fill:#dceee9,stroke:#2a8a8c,color:#09110f

배경 지식은 docs-site의 클로드 디자인 섹션 10페이지에 정리되어 있습니다.

요리사에게 “한국식 비빔밥을 만들어 달라"고 할 때 냉장고에 어떤 재료와 양념이 있는지 미리 알려주지 않으면 제대로 된 비빔밥이 나오지 않습니다. 디자인도 마찬가지입니다. Claude Design은 “우리 회사 색깔이 무엇인지, 글꼴은 무엇인지, 버튼은 어떤 모양인지"를 알아야 우리 브랜드에 맞는 결과물을 만듭니다. 이 레시피북 역할을 하는 것이 디자인 시스템이며, 플러그인에서는 DESIGN.md라는 파일 한 장으로 저장합니다.

system-prep은 회사 웹사이트 주소·로고 파일·잘 만들어진 기존 발표자료(PPTX)에서 이 레시피북을 자동으로 뽑아 정리해 줍니다. 손으로 일일이 색상 코드와 글꼴 이름을 적지 않아도 됩니다. 완성된 DESIGN.md를 Claude Design에 업로드하고 Published 토글(스위치처럼 켜고 끄는 설정)을 켜 두면, 이후 모든 시안이 우리 브랜드 가이드를 기준으로 만들어집니다. 이 단계를 건너뛰고 곧바로 시안을 요청하면 “어디서 본 듯한” 평균값 디자인이 나오는 가장 흔한 이유가 됩니다.

Cowork에서 /claude-design-system-prep 호출 → 자사 웹사이트 URL + 로고 파일 + 잘 만든 PPTX 1개 입력 → DESIGN.md 자동 생성 → 그 폴더를 claude.ai/design에 업로드 → Published 토글 ON.

Cowork에서 /claude-design-brief 호출 → “마케팅 자동화 SaaS 가격 페이지” 같이 한 줄 입력 → AskUserQuestion으로 누락 요소 보완 → 완성된 프롬프트를 Claude Design 채팅에 복붙.

Cowork에서 /claude-design-prompt-builder 호출 → “접근성 점검” 키워드 → 패턴 8(Level Access 시니어 컨설턴트) 자동 선택 → CONTEXT만 보완 → 완성된 프롬프트.

Claude Design에서 “Hand off to Claude Code” → 번들 다운로드 → Cowork에서 /claude-design-handoff-reader 호출 + 번들 경로 입력 → 요약 + Claude Code 지시 1줄 자동 생성 → Claude Code에 붙여넣기.

번역기를 거친 글이 어딘가 어색한 것처럼, AI가 만든 카피와 디자인에도 뻔한 상투구절이 섞여 나옵니다. “Reimagine your”, “혁신적인”, “원터치로”, “더 나은 내일을” 같은 표현은 누가 써도 비슷하게 튀어나오는 기계적인 문구입니다. 이렇게 어딘가 본 듯한, AI의 존재가 느껴지는 티를 슬롭(slop)이라고 부릅니다. 슬롭이 섞인 카피는 읽는 사람의 머리에 남지 않고, 브랜드의 개성도 흐려집니다.

slop-check는 교정 선생님이 빨간 펜으로 상투적 표현에 밑줄을 치는 것과 같습니다. Claude Design이 만들어 낸 카피를 붙여 넣으면, 슬롭 패턴을 찾아내고 각각에 대해 “이렇게 바꿔 보세요” 수정안을 3개씩 내줍니다. 검수 한 번을 거치는 것만으로 카피가 훨씬 사람스러워집니다. 한국어 카피는 이어서 moai-content:humanize-korean으로 한 번 더 다듬으면 더 자연스럽게 완성됩니다.

Claude Design에서 생성된 카피를 Cowork의 /claude-design-slop-check에 붙여넣기 → “Reimagine your” “혁신적인” 같은 슬롭 패턴 검출 → 수정안 3개 → (선택) moai-content:humanize-korean으로 한국어 카피 자연화.

design-system-library는 Claude·ClickHouse·Clay 기본 3테마부터 Notion·Linear·Stripe·Vercel·Figma·Sentry 등 75개 글로벌 브랜드 디자인 시스템 토큰(색·타이포·radius·spacing)을 단일 진실 원천으로 보관하는 라이브러리입니다. 위 5단계 워크플로우와는 별개 축으로, HTML 산출물에 브랜드 무드를 입히는 용도입니다.

두 소비 경로:

design_system을 지정하지 않으면 기존 html-report 0의존 템플릿이 그대로 쓰입니다(하위 호환). 전체 75개 시스템(56개 풍부 분석 + 19개 경량 토큰)을 보관하며, 기본 3테마(claude·clickhouse·clay)는 Tailwind 매핑이 검증됐고 19개 경량 토큰은 typography 스케일 등 후속 보완이 예정돼 있습니다. 상세 토큰과 전체 카탈로그는 SKILL.md와 systems/registry.md를 참조하세요.

이 플러그인의 워크플로우 5단계 스킬은 docs-site의 클로드 디자인 섹션에서 정리한 운영 원칙·베스트 프랙티스를 자동화한 것입니다. (design-system-library는 브랜드 토큰 라이브러리로 별도 축입니다.) 깊은 배경 지식은 다음 페이지를 참고하세요.

MIT · 2026

• 클로드 디자인 섹션 (이 docs-site의 10 페이지 가이드)
• Introducing Claude Design by Anthropic Labs
• Using Claude Design for prototypes and UX (Anthropic Tutorial)
• Set up your design system in Claude Design
• Claude Design admin guide
• 10 Advanced Prompts for Claude Design
• Claude Design Starter Guide (Claudia + AI)