---
title: "moai-designer"
description: "브랜드 디자인 시스템과 DESIGN.md, 디자인 토큰, 로고·비주얼, 모션 랜딩 제작을 돕는 스킬. Claude Design 핸드오프를 읽고 공식 Higgsfield 연결 또는 앱 이미지 도구로 브랜드 이미지 작업을 진행합니다."
canonical: https://agentpluginsdirectory.com/plugins/moai-designer
last-updated: 2026-10-07
---

# moai-designer
브랜드 디자인 시스템과 DESIGN.md, 디자인 토큰, 로고·비주얼, 모션 랜딩 제작을 돕는 스킬. Claude Design 핸드오프를 읽고 공식 Higgsfield 연결 또는 앱 이미지 도구로 브랜드 이미지 작업을 진행합니다.
- Slug: moai-designer
- Publisher: 모두의 AI
- Repository: https://github.com/modu-ai/moai-cowork
- Manifest: plugins/moai-designer/plugin.json
- Version: 1.4.73
- License: Apache-2.0
- Category (editorial): other
- Skills: 17 (design-brand-system, design-brand-visual, design-brief, design-copywriting, design-gui-guide, design-handoff-reader, design-handoff, design-iteration-loop, design-landing-motion, design-logo, design-prompt-builder, design-slop-check, design-sync-upload, design-system-library, design-system-prep, design-tokens-transformer, design-workflow)
- MCP servers: 1 (higgsfield)
- Stars: 306
- Repository created: 2026-02-15
- Repository last pushed: 2026-10-06
- Publisher type: Organization
- Listing: https://agentpluginsdirectory.com/plugins/moai-designer
- Schema: https://agent-plugins.org/schemas/1.0.0/plugin.schema.json

## What moai-designer does, in the publisher's words

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

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

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

- 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을 누르세요. 외부 서비스 연결은 별도 인증이 필요합니다.
- 두 갈래 경로: 디자인 작업 요청이 Path A(Claude Design import)와 Path B(코드 기반 브랜드 디자인)를 1라운드 인터뷰로 선택
- 품질 검수: Design Quality·Originality·Completeness·Functionality를 실제 브리프 기준으로 점검한다. MoAI-ADK 파이프라인을 설치한 프로젝트에서는 config/design.yaml과 해당 런타임의 평가 단계를 확인한다.

From the project README, punctuation lightly normalized. Full text: https://raw.githubusercontent.com/modu-ai/moai-cowork/HEAD/plugins/moai-designer/README.md

## Skills

- design-brand-system: 제공된 브랜드 자료와 화면 목적을 바탕으로 웹 시각 디자인 토큰과 컴포넌트 사양을 만듭니다. 색상·서체·간격·레이아웃·접근성 검토가 필요할 때 사용하세요. Claude Cowork와 ChatGPT Work에서는 사용자 자료를 바로 입력으로 받고, MoAI 프로젝트에서는 기존 브랜드 파일을 함께 확인합니다.
- design-brand-visual: 브랜드 자료에 맞는 히어로·OG·목업·마스코트 이미지의 구도와 제약을 정하고 실제 이미지 생성 경로로 보냅니다. ChatGPT Work에서는 현재 대화의 이미지 생성 도구를, Higgsfield 지정 요청에는 이 플러그인의 공식 Higgsfield 연결을 사용합니다. "브랜드 히어로 이미지 만들어줘", "OG 이미지 생성해줘", "마스코트 다른 포즈로 그려줘" 같은 요청에 사용하세요.
- design-brief: 화면·프로토타입·시각 문서 제작 요청을 검토 가능한 디자인 브리프로 정리합니다. "Claude Design 브리프 만들어줘", "디자인 요청 정리해줘", "프로토타입 프롬프트 작성해줘" 같은 요청에 사용하세요. 사용자 자료에 없는 대상·브랜드·참고 사례는 미정으로 남깁니다.
- design-copywriting: 브랜드 보이스와 실제 제품 자료에 맞춰 웹 화면의 제목·설명·버튼·오류 문구를 작성합니다. 디자인 파이프라인이 필요하면 섹션별 JSON으로, 단독 요청이면 사용자가 원하는 형식으로 제공합니다. 수치·보증·후기는 확인된 근거가 있을 때만 사용합니다.
- design-gui-guide: 모든 화면을 구성하는 10개 GUI 요소(버튼·폼·메뉴·링크·다이얼로그·알림·아이콘·체크박스/라디오·탭·검색)와 보너스 2(윈도우·포인터)에 대한 증거 기반 사용성 가이드라인 86종. UX Tigers(Jakob Nielsen, 2026-07-29) "10 GUI Design Elements"를 shadcn 컴포넌트와 1:1로 매핑해 한국어 실용 지침으로 증류. design-prompt-builder 패턴 3(디자인 시스템 생성)·패턴 6(사용성 감사)이 컴포넌트별 체크리스트로 참조. 다음과 같은 요청 시 반드시 이 스킬을 사용하…
- design-handoff-reader: 사용자가 제공한 Claude Design 핸드오프 파일·폴더·링크를 읽고 구현에 필요한 디자인 결정과 미확인 사항을 정리합니다. "핸드오프 분석해줘", "디자인 파일 읽어줘", "구현 지시 정리해줘" 같은 요청에 사용하세요. 파일 형식과 내용은 실제 받은 자료에서 확인합니다.
- design-handoff: 디자인 브리프와 실제 브랜드·화면 자료로 Claude Design 또는 코드 구현에 넘길 핸드오프 문서를 만듭니다. "디자인 핸드오프 준비해줘", "Claude Design에 넘길 프롬프트 써줘" 같은 요청에 사용하세요. MoAI 프로젝트의 기존 다섯 파일 경로는 해당 파이프라인에서 필요할 때 사용합니다.
- design-iteration-loop: 반복적 디자인 품질 개선을 위한 빌더-평가자 GAN 루프 워크플로. 스프린트 컨트랙트 협상, 4차원 평가(디자인 품질·오리지널리티·완결성·기능성), 정체 감지, 에스컬레이션 프로토콜을 구현합니다. design.yaml에서 파라미터를 읽습니다. Use for the Builder-Evaluator GAN loop: iterative design-quality improvement via Sprint Contract negotiation, 4-dimension scoring (Design Quality, Originality, Com…
- design-landing-motion: 기억에 남는 다이나믹 랜딩 페이지를 만듭니다. 브리프에서 컨셉 스파인을 뽑고, 시그니처 효과를 하나만 골라 끝까지 완성하며, 필요한 비주얼은 기존 자산 또는 사용 가능한 이미지 생성 경로로 준비합니다. 스크롤 스크럽·시차 레이어·WebGL 디스플레이스먼트·파티클·마스크 리빌·수평 레일·키네틱 타이포 등을 다루고, React/Next(R3F·Framer Motion·GSAP)와 정적 사이트(바닐라 three.js·GSAP) 양쪽으로 냅니다. 다음과 같은 요청 시 사용하세요: "랜딩 페이지 만들어 줘", "히어로 인상적으로", "스크…
- design-logo: 디자인 시스템에 맞는 로고를 생성합니다. 프로젝트의 토큰(색·타이포·형태 언어)과 브랜드 보이스를 먼저 읽어 생성 프롬프트에 반영하므로, 만들어진 로고가 브랜드와 어긋나지 않습니다. 로고는 히어로·OG 이미지와 달리 작아도 보이고 컬러·흑백·단색으로 변형되어야 하므로 벡터/심볼 접근으로 다룹니다. 다음과 같은 요청 시 사용하세요: "로고 만들어 줘", "브랜드 마크 디자인", "워드마크", "레터마크", "심볼 로고", "앱 아이콘 만들어 줘", "파비콘 디자인", "로고 컨셉 몇 개 뽑아 줘", "로고 아이디어", "기존 로고…
- design-prompt-builder: 사용자의 UX 디자인 요청을 실행 가능한 프롬프트로 정리합니다. 정보 구조·리서치·디자인 시스템· 마이크로카피·온보딩·사용성·대시보드·접근성·폼·프로토타입 테스트 중 필요한 관점만 고릅니다. Claude Design에 전달할 수 있으며, ChatGPT Work 등 다른 디자인 대화에도 맞게 씁니다.
- design-slop-check: 디자인 결과물의 한국어·영어 카피에서 상투적인 표현, 근거 없는 주장, 어색한 문장 구조를 문맥과 브랜드 말투에 비추어 검토하고 수정안을 제안합니다. Claude Design·ChatGPT Work의 화면 문구, CTA, 오류 메시지, 랜딩 카피에 사용합니다.
- design-sync-upload
- design-system-library
- design-system-prep
- design-tokens-transformer
- design-workflow

Descriptions come from the frontmatter of each SKILL.md, punctuation lightly normalized.

## MCP servers

- higgsfield: transport: streamable-http; url: https://mcp.higgsfield.ai/mcp

Read from the plugin's own mcp.json. Environment variable names only, never values.