「디자이너」 — 에이전틱 디자인 담당
“디자인 감각이 없어서요"라는 말 뒤에는 대개 감각의 문제가 아니라 체계의 부재가 있습니다. 색은 어떤 기준으로 고르고, 버튼 모서리는 왜 그 값이어야 하는지 — 좋은 디자인은 규칙의 집합이고, 그 규칙을 문서로 만든 것이 디자인 시스템입니다. 디자이너 직원은 이 규칙을 세우고 지키게 하는 직원입니다. 인테리어로 치면 벽지 한 장을 골라 주는 사람이 아니라, 집 전체의 컬러·자재·조명 기준표를 만들어 어떤 방을 꾸며도 톤이 맞게 해 주는 설계사입니다.
스킬 13종의 중심에는 두 축이 있습니다. 하나는 Claude Design 연동(cd-*) — 브리프 작성부터 프롬프트 빌드, 결과물 업로드, 슬롭 체크(AI 특유의 어색한 디자인 패턴 점검)까지 Claude의 디자인 도구와 오가는 파이프라인입니다. 다른 하나는 토큰 파이프라인 — 디자인 토큰(색·글꼴·간격 같은 디자인 값을 변수로 정리한 것)을 DTCG 표준↔CSS↔shadcn 3계층으로 변환해, 디자인 결정이 코드까지 일관되게 흐르게 합니다. 여기에 GAN 품질 루프(생성과 비평을 반복해 완성도를 끌어올리는 반복 개선 방식)가 얹힙니다.
/design으로 브리프부터 시작하고 /upload로 Claude Design 업로드까지 이어지는 명령형 진입점을 제공합니다.
flowchart LR
A["요청
(/design 브리프)"] --> B["cd-brief
브리프 정리"]
B --> C["시스템·토큰 생성"]
C --> D["GAN 루프
생성↔비평 반복"]
D --> E["cd-slop-check
품질 점검"]
E --> F["산출물
(DESIGN.md·토큰·업로드)"]cd-*(Claude Design 연동)와 design-*/moai-*(시스템·토큰·워크플로우) 계열의 전체 목록입니다.
스킬 13종 — 아래 표는 마켓플레이스 정본(v6.2.0)에서 자동 생성됩니다.
| 스킬 | 무엇을 해주나 |
|---|---|
cd-brief | | Claude Design용 6요소 브리프(Project·Audience·Pages·Tone·Reference·Constraints)를 자동으로 작성해 주는 스킬. 자연어 한 줄 요청에서 시작해 누락된 요소를 차례로 채우고, AI 슬롭 회피 블록을 포함한 복붙용 프롬프트를 출력합니다. 완성된 프롬프트는 claude.ai |
cd-handoff-reader | | Claude Design → Claude Code 핸드오프 번들(공식 구성: README + 디자인 파일 + chat)을 방어적으로 분석해 요약 보고서와 Claude Code에 넘길 짧은 지시 1줄을 자동 생성합니다. README를 source of truth로 먼저 파싱하고, 토큰/컴포넌트 JSON은 있으면 사용·없 |
cd-prompt-builder | | Claude Design용 시니어 UX 프롬프트를 10가지 전문 패턴(정보 구조·디자인 시스템·카피·온보딩·접근성·대시보드·폼·테스트·휴리스틱·리서치) 중 적합한 것을 골라 완성해 줍니다. 각 패턴은 구체적 역할(예: IDEO 시니어 UX 아키텍트 12년차)을 부여해 결과 분산을 30-40% 감소시킵니다. 다음과 같은 |
cd-slop-check | | Claude Design에서 생성된 결과 카피(헤드라인·서브헤드·CTA·feature·푸터)를 AI 슬롭 패턴으로 검수합니다. 영문(Reimagine your·Unleash your potential 등)과 한국어(혁신적인·차세대·재정의하는 등) 진부 표현을 검출하고 수정안을 제안합니다. 후속으로 moai-writer |
cd-system-prep | | 브랜드 자산(로고·색·타이포·기존 사이트·PPTX 등)을 분석해 Claude Design 업로드용 DESIGN.md를 자동으로 합성합니다. Claude Design 디자인 시스템 셋업의 가장 흔한 실패(자산이 흩어져 있고 정리가 안 된 채 업로드)를 해결합니다. 결과는 그대로 claude.ai/design 온보딩에 업 |
design-sync-upload | | 디자인 시스템 자산(DESIGN.md·토큰·로고)을 Claude Design에 업로드합니다. 자동 우선 + 수동 폴백 양경로. 자동 경로는 DesignSync MCP로 바로 등록하며(`list/read` → `finalize_plan` → `write_files` 순서 강제, `register_assets`는 lega |
design-system-library | | 75개 글로벌 브랜드 디자인 시스템(Claude · ClickHouse · Clay 포함)을 단일 파일 HTML 산출물에 적용합니다. 각 시스템의 토큰(색·타이포·radius·spacing·컴포넌트)을 Tailwind Play CDN config + shadcn 스타일 vanilla 컴포넌트로 변환해 렌더합니다. of |
design-tokens-transformer | | 하나의 브랜드 토큰을 3계층(DTCG SSOT ↔ 원시 CSS 변수 ↔ semantic/shadcn 롤)으로 양방향 변환합니다. L1 DTCG(W3C `$value`/`$type`/`$description`)를 진실 원천으로 삼아 L2 CSS custom properties와 L3 Tailwind v4 `@theme` |
moai-domain-brand-design | | Brand-aligned visual design system specialist for web projects. Enforces hero-first layout chaining, WCAG 2.1 AA accessibility, Lighthouse >= 80, and design token extraction from |
moai-domain-copywriting | | Brand-aligned content-copywriting specialist for marketing and product text. Enforces brand voice, anti-AI-slop rules, concrete numbers, and JSON section structure for downstream |
moai-domain-design-handoff | | Claude Design handoff package specialist for the /design Path A workflow. Assembles 5-file handoff bundle (prompt/context/references/acceptance/checklist) for paste-ready claude. |
moai-workflow-design | | Unified design workflow skill — handles Path A (Claude Design handoff bundle import, via Figma extractor when needed) and design-brief context loading from .moai/design/ (researc |
moai-workflow-gan-loop | | Builder-Evaluator GAN loop workflow for iterative design quality improvement. Implements Sprint Contract negotiation, 4-dimension scoring (Design Quality, Originality, Completene |
디자이너는 별도의 worker/auditor 에이전트 대신 GAN 품질 루프 스킬(moai-workflow-gan-loop)이 검수 역할을 겸합니다. 생성한 시안을 비평자 관점으로 다시 뜯어보고 고치는 반복이 스킬 파이프라인 안에 내장되어 있는 구조입니다.
이 직원은 별도 에이전트 없이 스킬 자동 매칭으로만 동작합니다.
1. 브랜드 디자인 시스템 만들기. “우리 브랜드 컬러랑 폰트 기준 잡아줘"라고 하면 moai-domain-brand-design과 cd-system-prep이 브랜드 시스템 문서(DESIGN.md)를 만들어, 이후 어떤 산출물이든 같은 톤을 유지하게 합니다.
2. 디자인 토큰을 코드로. “이 디자인 토큰을 우리 웹사이트 CSS로 변환해줘"라고 요청하면 design-tokens-transformer가 DTCG 표준 토큰을 CSS 변수와 shadcn 테마로 변환합니다. 디자이너와 개발자 사이의 수작업 전달이 사라집니다.
3. Claude Design 왕복 작업. /design으로 브리프를 정리해 Claude Design에서 시안을 만들고, 결과를 cd-handoff-reader로 읽어 와 cd-slop-check로 어색한 부분을 점검한 뒤 /upload로 다시 올리는 왕복 루프를 돕습니다.
잘 안 될 때 — 시안 톤이 계속 흔들리면 브리프를 건너뛰고 바로 생성부터 시작했을 가능성이 큽니다. cd-brief로 타깃·톤·금지 요소를 먼저 못 박은 뒤 생성 단계로 넘어가세요.