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 채팅에 그대로 붙여 넣을 수 있는 산출물을 만들어 줍니다.

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

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에 붙여넣기.

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

이 플러그인의 5개 스킬은 docs-site의 클로드 디자인 섹션에서 정리한 운영 원칙·베스트 프랙티스를 자동화한 것입니다. 깊은 배경 지식은 다음 페이지를 참고하세요.

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)