「디자이너」 — 에이전틱 디자인 담당
“디자인 감각이 없어서요"라는 말 뒤에는 대개 감각의 문제가 아니라 체계의 부재가 있습니다. 색은 어떤 기준으로 고르고, 버튼 모서리는 왜 그 값이어야 하는지 — 좋은 디자인은 규칙의 집합이고, 그 규칙을 문서로 만든 것이 디자인 시스템입니다. 디자이너 직원은 이 규칙을 세우고 지키게 하는 직원입니다. 인테리어로 치면 벽지 한 장을 골라 주는 사람이 아니라, 집 전체의 컬러·자재·조명 기준표를 만들어 어떤 방을 꾸며도 톤이 맞게 해 주는 설계사입니다.
스킬 14종의 중심에는 두 축이 있습니다. 하나는 Claude Design 연동(cd-*) — 브리프 작성부터 프롬프트 빌드, 결과물 업로드, 슬롭 체크(AI 특유의 어색한 디자인 패턴 점검)까지 Claude의 디자인 도구와 오가는 파이프라인입니다. 다른 하나는 토큰 파이프라인 — 디자인 토큰(색·글꼴·간격 같은 디자인 값을 변수로 정리한 것)을 DTCG 표준↔CSS↔shadcn 3계층으로 변환해, 디자인 결정이 코드까지 일관되게 흐르게 합니다. 여기에 GAN 품질 루프(생성과 비평을 반복해 완성도를 끌어올리는 반복 개선 방식)가 얹힙니다. 세운 규칙 위에서 실제 이미지를 뽑는 축도 붙었습니다 — Higgsfield 커넥터를 통해 히어로·OG·목업·마스코트 비주얼을 만들되, 만들기 전에 프로젝트의 토큰을 읽어 팔레트와 형태 언어를 제약으로 걸어 둡니다. 여기서 한 걸음 더 나가 움직이는 랜딩까지 만듭니다. 스크롤 스크럽·시차 레이어·WebGL 왜곡·파티클·키네틱 타이포 같은 효과를 카탈로그에서 하나만 골라 완성하고, 초기 렌더와 저감모션·모바일 열화를 기계적으로 점검합니다.
NoteClaude Design 연동은 Claude Cowork 전용 기능입니다./design·/upload명령과cd-*계열 스킬은 Claude Cowork에서만 동작하며, ChatGPT Work에서는 지원하지 않습니다. 다른 스킬(토큰 파이프라인·GAN 루프·Higgsfield 연동)은 양쪽 런타임에서 모두 작동합니다.
/design으로 브리프부터 시작하고 /upload로 Claude Design 업로드까지 이어지는 명령형 진입점을 제공합니다.
flowchart LR A["요청
(/design 브리프)"] --> B["design-brief
브리프 정리"] B --> C["시스템·토큰 생성"] C --> D["GAN 루프
생성↔비평 반복"] D --> E["design-slop-check
품질 점검"] E --> F["산출물
(DESIGN.md·토큰·업로드)"]
cd-*(Claude Design 연동)와 design-*/moai-*(시스템·토큰·워크플로우) 계열의 전체 목록입니다.
스킬 17종 — 아래 표는 마켓플레이스 정본(v1.1.0)에서 자동 생성됩니다.
| 스킬 | 무엇을 해주나 |
|---|---|
design-brand-system | 웹 프로젝트의 브랜드 정합 시각 디자인 시스템 전문가. 히어로 우선 레이아웃 체이닝, WCAG 2.1 AA 접근성, Lighthouse 80점 이상, 브랜드 정체성 파일에서 디자인 토큰 추출을 보장합니다. 색상 팔레트, 타이포그래피, 여백, 컴포넌트 사양을 다룹니다. Use for brand-aligned visual d |
design-brand-visual | 디자인 시스템에 맞는 브랜드 비주얼을 생성합니다. 프로젝트의 토큰(색·타이포·반경·여백)과 브랜드 보이스를 먼저 읽어 생성 프롬프트에 반영하므로, 만들어진 이미지가 디자인 시스템과 어긋나지 않습니다. 다음과 같은 요청 시 사용하세요: - "히어로 이미지 만들어 줘", "랜딩 상단 비주얼" - "브랜드 톤에 맞는 일러스트" |
design-brief | Claude Design용 6요소 브리프(Project·Audience·Pages·Tone·Reference·Constraints)를 자동으로 작성해 주는 스킬. 자연어 한 줄 요청에서 시작해 누락된 요소를 차례로 채우고, AI 슬롭 회피 블록을 포함한 복붙용 프롬프트를 출력합니다. 완성된 프롬프트는 claude.ai/d |
design-copywriting | 마케팅·제품 텍스트의 브랜드 정합 카피라이팅 전문가. 브랜드 보이스, AI 특유 어조 배제 규칙, 구체적 숫자, 다운스트림 에이전트 소비를 위한 JSON 섹션 구조를 보장합니다. 히어로, 기능, 소셜 증명, CTA, 푸터 섹션을 A/B 변형 출력으로 다룹니다. Use for brand-aligned marketing an |
design-gui-guide | 모든 화면을 구성하는 10개 GUI 요소(버튼·폼·메뉴·링크·다이얼로그·알림·아이콘·체크박스/라디오·탭·검색)와 보너스 2(윈도우·포인터)에 대한 증거 기반 사용성 가이드라인 86종. UX Tigers(Jakob Nielsen, 2026-07-29) "10 GUI Design Elements"를 shadcn 컴포넌트와 1 |
design-handoff-reader | Claude Design → Claude Code 핸드오프 번들(공식 구성: README + 디자인 파일 + chat)을 방어적으로 분석해 요약 보고서와 Claude Code에 넘길 짧은 지시 1줄을 자동 생성합니다. README를 source of truth로 먼저 파싱하고, 토큰/컴포넌트 JSON은 있으면 사용·없으면 |
design-handoff | /design Path A 워크플로의 Claude Design 핸드오프 패키지 전문가. 붙여넣기 바로 쓰는 claude.com Design 세션용 5파일 핸드오프 번들(prompt/context/references/acceptance/checklist)을 조립합니다. 브랜드 미비 폴백과 섹션 재생성을 처리합니다. Use |
design-iteration-loop | 반복적 디자인 품질 개선을 위한 빌더-평가자 GAN 루프 워크플로. 스프린트 컨트랙트 협상, 4차원 평가(디자인 품질·오리지널리티·완결성·기능성), 정체 감지, 에스컬레이션 프로토콜을 구현합니다. design.yaml에서 파라미터를 읽습니다. Use for the Builder-Evaluator GAN loop: iter |
design-landing-motion | 기억에 남는 다이나믹 랜딩 페이지를 만듭니다. 브리프에서 컨셉 스파인을 뽑고, 시그니처 효과를 하나만 골라 끝까지 완성하며, 화면에 들어갈 비주얼은 Higgsfield로 생성해 브랜드 팔레트에 잠급니다. 스크롤 스크럽·시차 레이어·WebGL 디스플레이스먼트·파티클·마스크 리빌·수평 레일·키네틱 타이포 등을 다루고, Rea |
design-logo | 디자인 시스템에 맞는 로고를 생성합니다. 프로젝트의 토큰(색·타이포·형태 언어)과 브랜드 보이스를 먼저 읽어 생성 프롬프트에 반영하므로, 만들어진 로고가 브랜드와 어긋나지 않습니다. 로고는 히어로·OG 이미지와 달리 작아도 보이고 컬러·흑백·단색으로 변형되어야 하므로 벡터/심볼 접근으로 다룹니다. 다음과 같은 요청 시 사 |
design-prompt-builder | Claude Design용 시니어 UX 프롬프트를 10가지 전문 패턴(정보 구조·디자인 시스템·카피·온보딩·접근성·대시보드·폼·테스트·휴리스틱·리서치) 중 적합한 것을 골라 완성해 줍니다. 각 패턴은 구체적 역할(예: IDEO 시니어 UX 아키텍트 12년차)을 부여해 결과 분산을 30-40% 감소시킵니다. 다음과 같은 요 |
design-slop-check | Claude Design에서 생성된 결과 카피(헤드라인·서브헤드·CTA·feature·푸터)를 AI 슬롭 패턴으로 검수합니다. 영문(Reimagine your·Unleash your potential 등)과 한국어(혁신적인·차세대·재정의하는 등) 진부 표현을 검출하고 수정안을 제안합니다. 후속으로 moai-writer:k |
design-sync-upload | 디자인 시스템 자산(DESIGN.md·토큰·로고)을 Claude Design에 업로드합니다. 자동 우선 + 수동 폴백 양경로. 자동 경로는 DesignSync MCP로 바로 등록하며(`list/read` → `finalize_plan` → `write_files` 순서 강제, `register_assets`는 legacy |
design-system-library | 75개 글로벌 브랜드 디자인 시스템(Claude · ClickHouse · Clay 포함)을 단일 파일 HTML 산출물에 적용합니다. 각 시스템의 토큰(색·타이포·radius·spacing·컴포넌트)을 Tailwind Play CDN config + shadcn 스타일 vanilla 컴포넌트로 변환해 렌더합니다. doc- |
design-system-prep | 브랜드 자산(로고·색·타이포·기존 사이트·PPTX 등)을 분석해 Claude Design 업로드용 DESIGN.md를 자동으로 합성합니다. Claude Design 디자인 시스템 셋업의 가장 흔한 실패(자산이 흩어져 있고 정리가 안 된 채 업로드)를 해결합니다. 결과는 그대로 claude.ai/design 온보딩에 업로드 |
design-tokens-transformer | 하나의 브랜드 토큰을 3계층(DTCG SSOT ↔ 원시 CSS 변수 ↔ semantic/shadcn 롤)으로 양방향 변환합니다. L1 DTCG(W3C `$value`/`$type`/`$description`)를 진실 원천으로 삼아 L2 CSS custom properties와 L3 Tailwind v4 `@theme` + |
design-workflow | 통합 디자인 워크플로 스킬 — Path A(Claude Design 핸드오프 번들 가져오기, 필요시 Figma 추출기 경유)와 .moai/design/(research·system·spec)에서 design-brief 컨텍스트 로딩을 처리합니다. DTCG 토큰을 검증하고 브랜드 컨텍스트 헌법 우선순위를 보장합니다. /mo |
디자이너는 별도의 worker/auditor 에이전트 대신 GAN 품질 루프 스킬(design-iteration-loop)이 검수 역할을 겸합니다. 생성한 시안을 비평자 관점으로 다시 뜯어보고 고치는 반복이 스킬 파이프라인 안에 내장되어 있는 구조입니다.
이 직원은 별도 에이전트 없이 스킬 자동 매칭으로만 동작합니다.
1. 브랜드 디자인 시스템 만들기. “우리 브랜드 컬러랑 폰트 기준 잡아줘"라고 하면 design-brand-system과 design-system-prep이 브랜드 시스템 문서(DESIGN.md)를 만들어, 이후 어떤 산출물이든 같은 톤을 유지하게 합니다.
2. 디자인 토큰을 코드로. “이 디자인 토큰을 우리 웹사이트 CSS로 변환해줘"라고 요청하면 design-tokens-transformer가 DTCG 표준 토큰을 CSS 변수와 shadcn 테마로 변환합니다. 디자이너와 개발자 사이의 수작업 전달이 사라집니다.
3. Claude Design 왕복 작업. /design으로 브리프를 정리해 Claude Design에서 시안을 만들고, 결과를 design-handoff-reader로 읽어 와 design-slop-check로 어색한 부분을 점검한 뒤 /upload로 다시 올리는 왕복 루프를 돕습니다.
4. 브랜드에 맞는 이미지 뽑기. “랜딩 히어로 이미지 만들어줘"라고 하면 design-brand-visual이 먼저 프로젝트의 디자인 토큰과 브랜드 규칙을 읽습니다. 그 값을 프롬프트 제약으로 바꾼 뒤 생성을 미디어 크리에이터에게 넘기고, 돌아온 이미지가 팔레트와 형태 언어를 벗어나지 않았는지 다시 확인합니다. 근거가 될 토큰이 없으면 색을 지어내지 않고 “근거 없음"이라고 적습니다.
5. 움직이는 랜딩 만들기. “스크롤하면 영상이 재생되는 랜딩 만들어줘"처럼 요청하면 design-landing-motion이 먼저 이 사이트가 말하려는 한 가지(컨셉 스파인)를 정하고, 12종 효과 카탈로그에서 딱 하나를 골라 끝까지 완성합니다. 화면에 들어갈 이미지는 브랜드 팔레트에 잠근 채 생성하고, 마지막에 초기 렌더·저감모션·모바일 열화·대비를 기계적으로 점검합니다. React면 R3F와 GSAP로, 정적 사이트면 바닐라 three.js로 갈라집니다. 배포와 호스팅은 다루지 않습니다.
6. 브랜드에 맞는 로고 뽑기. “로고 만들어줘"라고 하면 design-logo가 먼저 프로젝트의 브랜드 컨텍스트(토큰·보이스)를 읽고 로고 타입을 정합니다. 로고는 히어로와 달리 작아도 보이고 컬러·흑백·단색으로 변형되어야 하므로 벡터/심볼로 다룹니다 — recraft 모델로 디자이너 용어 기반 프롬프트를 조립해 생성을 미디어 크리에이터에게 넘기고, 스케일러빌리티와 단색 실루엣 내성을 점검합니다.
잘 안 될 때 — 시안 톤이 계속 흔들리면 브리프를 건너뛰고 바로 생성부터 시작했을 가능성이 큽니다. design-brief로 타깃·톤·금지 요소를 먼저 못 박은 뒤 생성 단계로 넘어가세요.
- higgsfield — 브랜드 비주얼과 랜딩 에셋 킷 생성.
design-brand-visual·design-logo·design-landing-motion이 사용하며, 실제 생성 실행과 모델 선택, 크레딧 사전 고지는 미디어 크리에이터의 Higgsfield 계약에 위임합니다. Higgsfield OAuth 인증이 필요합니다 (설정 가이드).