moai-designer (디자이너) — 흩어진 브랜드를 Claude Design으로 합성하는 동료

디자이너는 로고·색·타이포 같은 흩어진 브랜드 자산을 모아 Claude Design에 올릴 DESIGN.md로 합성하고, 코드 기반 브랜드 디자인과 Claude Design 시안 핸드오프까지 처리하는 동료입니다.

무엇을 하나요

역할	언제	무엇을 하나요
🎨 브랜드 시스템 합성	브랜드 자산(로고·색·타이포·기존 사이트·PPT)이 흩어져 있을 때	자산 수집 → Claude Design용 DESIGN.md + 디자인 토큰(DTCG) 생성
📥 Claude Design 핸드오프	claude.ai/design에서 만든 시안을 코드로 받을 때	핸드오프 번들(.zip·URL) 분석 → 토큰·컴포넌트 추출
✍️ 디자인 카피 검수	랜딩 페이지·카드뉴스 카피의 AI 맛을 뺄 때	AI 슬롭 감사 → 검수 보고서 + 자연스러운 대안
🛠️ 코드 기반 브랜드 디자인	브랜드 컨텍스트에서 카피+비주얼 토큰을 코드로 만들 때	카피·비주얼 토큰 병렬 생성 → GAN 품질 루프
🖼️ 브랜드 정합 비주얼 생성	히어로·OG·목업·마스코트 이미지가 필요할 때	디자인 토큰을 제약으로 변환 → 현재 앱의 이미지 도구 또는 공식 Higgsfield 연결로 생성 → 정합 검증
🏷️ 브랜드 정합 로고 생성	로고·브랜드 마크·앱 아이콘이 필요할 때	브랜드 컨텍스트 → 로고 타입 선택 → 지원 도구로 컨셉 생성 → 결과 형식·스케일 검증
✨ 다이나믹 랜딩 제작	스크롤·three.js·모션이 들어간 랜딩이 필요할 때	컨셉 스파인 → 시그니처 효과 1개 → 에셋 킷 생성 → 구현 → 기계 게이트

실무 문서·카피·글쓰기는 코워커가 담당합니다.

사용법

그냥 말걸기

"우리 브랜드 자산 정리해서 Claude Design에 올릴 수 있게 만들어줘"
→ 브랜드 자산 수집 → DESIGN.md + 디자인 토큰 합성

"claude.ai/design에서 만든 시안 핸드오프 받아줘"
→ 핸드오프 번들 분석 → 토큰·컴포넌트 추출

"랜딩 페이지 카피 AI 맛 좀 빼줘"
→ 디자인 카피 AI 슬롭 감사 → 자연스러운 대안

이렇게 말하면 됩니다

이 플러그인은 자체 슬래시 명령을 제공하지 않습니다. 아래처럼 자연어로 요청하면 해당 스킬을 사용할 수 있습니다. 앱의 스킬 선택과 연결 가능 여부는 설치 환경에서 확인해야 합니다.

이렇게 말하면	무슨 일
"디자인 작업 시작해줘"	브리프부터 핸드오프까지 (Path A/B 자동 선택)
"디자인 브리프 만들어줘"	6요소 브리프(Project·Audience·Pages·Tone·Reference·Constraints)
"브랜드 디자인 토큰 만들어줘"	브랜드 자산 → DESIGN.md + DTCG 토큰(색·타이포·spacing·radii·shadows)
"핸드오프 번들 읽어줘"	Claude Design 핸드오프 번들(.zip·URL) import·분석
"이 카피 AI 티 나는지 봐줘"	디자인 카피 AI 슬롭 감사 → 검수 보고서 + 대안
"디자인 시스템 라이브러리 보여줘"	75종 브랜드 디자인 시스템 라이브러리 + Tailwind CDN 매핑

프로젝트 시작하기

처음 브랜드 컨텍스트를 셋업할 때는 PM 플러그인의 /project가 안내합니다("디자인 시스템 셋업해줘"처럼 자연어로 시작).

/project
"러닝 브랜드라 색상·타이포 정리하고 싶어"
→ PM이 디자이너 브랜드 셋업으로 연결

자세한 건 moai-pm README를 참고하세요.

설치

Claude Cowork와 ChatGPT Work는 마켓플레이스 등록 권한과 경로가 다릅니다.

Claude Cowork: Settings(또는 Plugins) → Marketplace → +에서 modu-ai/moai-cowork를 추가한 뒤 Plugins에서 moai-designer를 설치하세요.
ChatGPT Work: 워크스페이스 관리자가 Workspace settings → Plugins → Add → Import marketplace에서 https://github.com/modu-ai/moai-cowork를 가져와야 합니다. 이용자는 권한이 부여된 뒤 Plugins에서 moai-designer를 찾아 Install plugin을 누르세요. 외부 서비스 연결은 별도 인증이 필요합니다.

브랜드·디자인 시스템 작업이 필요할 때 설치하세요.

앱별 정확한 클릭 경로와 잘 안 될 때 대처법은 플러그인 설치와 관리에 정리해 두었습니다.

다른 AI 코워커과 함께 쓰기

디자이너는 다른 플러그인과 함께 사용할 수 있습니다.

AI 코워커	언제
🧑‍💼 코워커	실무·콘텐츠·작가
🎨 디자이너(본 플러그인)	브랜드·디자인 시스템·Claude Design
📋 PM	프로젝트 시작 허브 (`/project`)

실무 문서·카피는 코워커가, 프로젝트 셋업은 PM이 담당합니다.

더 알아보기 (개발자·디자이너 기술)

두 갈래 경로 — 디자인 작업 요청이 Path A(Claude Design import)와 Path B(코드 기반 브랜드 디자인)를 1라운드 인터뷰로 선택
품질 검수 — Design Quality·Originality·Completeness·Functionality를 실제 브리프 기준으로 점검한다. MoAI-ADK 파이프라인을 설치한 프로젝트에서는 config/design.yaml과 해당 런타임의 평가 단계를 확인한다.
파이프라인 — MoAI-ADK가 설치된 프로젝트에서는 manager-spec(BRIEF) → 카피·비주얼 토큰 생성 → frontend 구현 → sync-auditor 평가 경로를 사용할 수 있다. 이 플러그인만 설치한 데스크톱 앱에는 해당 에이전트가 포함되지 않는다.
MCP 연동 — 이 플러그인에 공식 Higgsfield 연결이 포함된다. design-brand-visual·design-logo는 연결이 실제 활성화됐을 때 모델·크레딧 견적을 확인한다. 별도 moai-media 설치 없이도 연결된 도구를 사용할 수 있다. 인증은 Higgsfield 계정 로그인/OAuth 승인으로 진행한다.
anti-slop 정본 — 디자인 카피 AI 슬롭 사전(영문·한국어 Tier 1/2)은 design-copywriting이 정본, design-slop-check는 다운스트림 QA 게이트
디자인 헌법 — rules/moai/design/constitution.md (파이프라인 순서·5 안전 계층·GAN 루프 계약·평가자 관대성 방지, FROZEN)
설정 — config/design.yaml은 MoAI-ADK 파이프라인의 참고 설정이다. 데스크톱 앱이 이 파일을 자동 적용한다고 가정하지 않는다.
런타임 산출물 경로 — .moai/design/(토큰·컴포넌트·브리프), .moai/project/brand/(브랜드 컨텍스트). 플러그인은 참조만, 스캐폴드하지 않음

라이선스: Apache-2.0 · 작성자: 모두의AI