modu-ai/moai-designer

제공된 브랜드 자료와 화면 목적을 바탕으로 웹 시각 디자인 토큰과 컴포넌트 사양을 만듭니다. 색상·서체·간격·레이아웃·접근성 검토가 필요할 때 사용하세요. Claude Cowork와 ChatGPT Work에서는 사용자 자료를 바로 입력으로 받고, MoAI 프로젝트에서는 기존 브랜드 파일을 함께 확인합니다.

브랜드 자료에 맞는 히어로·OG·목업·마스코트 이미지의 구도와 제약을 정하고 실제 이미지 생성 경로로 보냅니다. ChatGPT Work에서는 현재 대화의 이미지 생성 도구를, Higgsfield 지정 요청에는 이 플러그인의 공식 Higgsfield 연결을 사용합니다. "브랜드 히어로 이미지 만들어줘", "OG 이미지 생성해줘", "마스코트 다른 포즈로 그려줘" 같은 요청에 사용하세요.

화면·프로토타입·시각 문서 제작 요청을 검토 가능한 디자인 브리프로 정리합니다. "Claude Design 브리프 만들어줘", "디자인 요청 정리해줘", "프로토타입 프롬프트 작성해줘" 같은 요청에 사용하세요. 사용자 자료에 없는 대상·브랜드·참고 사례는 미정으로 남깁니다.

브랜드 보이스와 실제 제품 자료에 맞춰 웹 화면의 제목·설명·버튼·오류 문구를 작성합니다. 디자인 파이프라인이 필요하면 섹션별 JSON으로, 단독 요청이면 사용자가 원하는 형식으로 제공합니다. 수치·보증·후기는 확인된 근거가 있을 때만 사용합니다.

모든 화면을 구성하는 10개 GUI 요소(버튼·폼·메뉴·링크·다이얼로그·알림·아이콘·체크박스/라디오·탭·검색)와 보너스 2(윈도우·포인터)에 대한 증거 기반 사용성 가이드라인 86종. UX Tigers(Jakob Nielsen, 2026-07-29) "10 GUI Design Elements"를 shadcn 컴포넌트와 1:1로 매핑해 한국어 실용 지침으로 증류. design-prompt-builder 패턴 3(디자인 시스템 생성)·패턴 6(사용성 감사)이 컴포넌트별 체크리스트로 참조. 다음과 같은 요청 시 반드시 이 스킬을 사용하세요: - "컴포넌트 사용성 가이드라인" - "GUI 위젯 설계 규칙" - "버튼/폼/다이얼로그 잘 만드는 법" - "Nielsen GUI 가이드라인" - "디자인 시스템 컴포넌트 감사 체크리스트"

디자인 브리프와 실제 브랜드·화면 자료로 Claude Design 또는 코드 구현에 넘길 핸드오프 문서를 만듭니다. "디자인 핸드오프 준비해줘", "Claude Design에 넘길 프롬프트 써줘" 같은 요청에 사용하세요. MoAI 프로젝트의 기존 다섯 파일 경로는 해당 파이프라인에서 필요할 때 사용합니다.

사용자가 제공한 Claude Design 핸드오프 파일·폴더·링크를 읽고 구현에 필요한 디자인 결정과 미확인 사항을 정리합니다. "핸드오프 분석해줘", "디자인 파일 읽어줘", "구현 지시 정리해줘" 같은 요청에 사용하세요. 파일 형식과 내용은 실제 받은 자료에서 확인합니다.

반복적 디자인 품질 개선을 위한 빌더-평가자 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, Completeness, Functionality), stagnation detection, and escalation.

기억에 남는 다이나믹 랜딩 페이지를 만듭니다. 브리프에서 컨셉 스파인을 뽑고, 시그니처 효과를 하나만 골라 끝까지 완성하며, 필요한 비주얼은 기존 자산 또는 사용 가능한 이미지 생성 경로로 준비합니다. 스크롤 스크럽·시차 레이어·WebGL 디스플레이스먼트·파티클·마스크 리빌·수평 레일·키네틱 타이포 등을 다루고, React/Next(R3F·Framer Motion·GSAP)와 정적 사이트(바닐라 three.js·GSAP) 양쪽으로 냅니다. 다음과 같은 요청 시 사용하세요: - "랜딩 페이지 만들어 줘", "히어로 인상적으로" - "스크롤에 반응하는 사이트", "스크롤하면 영상이 재생되는" - "three.js 넣어 줘", "WebGL 효과", "3D로 보이게" - "패럴랙스", "마우스 따라 움직이는", "파티클" - "어워드 받을 만한 사이트", "밋밋해 보여" 호스팅·배포·도메인·DB는 범위 밖입니다. 코드는 사용자 프로젝트 안에 만들며 외부 호스팅에 올리지 않습니다. 브랜드 이미지 한 장만 필요하면 design-brand-visual을 쓰세요.

디자인 시스템에 맞는 로고를 생성합니다. 프로젝트의 토큰(색·타이포·형태 언어)과 브랜드 보이스를 먼저 읽어 생성 프롬프트에 반영하므로, 만들어진 로고가 브랜드와 어긋나지 않습니다. 로고는 히어로·OG 이미지와 달리 작아도 보이고 컬러·흑백·단색으로 변형되어야 하므로 벡터/심볼 접근으로 다룹니다. 다음과 같은 요청 시 사용하세요: - "로고 만들어 줘", "브랜드 마크 디자인" - "워드마크", "레터마크", "심볼 로고" - "앱 아이콘 만들어 줘", "파비콘 디자인" - "로고 컨셉 몇 개 뽑아 줘", "로고 아이디어" - "기존 로고 다른 스타일로", "로고 리디자인" 이 스킬은 로고 타입·브랜드 정합·제약과 실제 산출물 점검을 맡습니다. ChatGPT Work에서는 네이티브 이미지 생성으로 컨셉을 만들 수 있고, 사용자가 선택한 Higgsfield 경로의 모델·출력 형식은 실행 전에 확인합니다. 최종 벡터 마스터가 필요한 경우 실제 SVG 결과를 별도로 검증합니다.

사용자의 UX 디자인 요청을 실행 가능한 프롬프트로 정리합니다. 정보 구조·리서치·디자인 시스템· 마이크로카피·온보딩·사용성·대시보드·접근성·폼·프로토타입 테스트 중 필요한 관점만 고릅니다. Claude Design에 전달할 수 있으며, ChatGPT Work 등 다른 디자인 대화에도 맞게 씁니다.

디자인 결과물의 한국어·영어 카피에서 상투적인 표현, 근거 없는 주장, 어색한 문장 구조를 문맥과 브랜드 말투에 비추어 검토하고 수정안을 제안합니다. Claude Design·ChatGPT Work의 화면 문구, CTA, 오류 메시지, 랜딩 카피에 사용합니다.

브랜드·디자인 시스템 자료를 Claude Design에 전달할 수 있게 준비하고, 현재 세션에서 확인된 업로드 경로로 진행합니다. Claude Cowork는 대화·첨부, ChatGPT Work는 전달 패키지와 앱 UI 안내를 기본으로 하며, DesignSync 도구가 실제로 있을 때만 그 계약을 확인해 사용합니다.

글로벌 브랜드 디자인 시스템 참고 자료(Claude · ClickHouse · Clay 포함)의 색·타이포·간격·컴포넌트 구조를 읽고, 사용자 브랜드에 맞는 HTML 디자인 토큰을 설계합니다. Tailwind Play CDN 예시는 개발용이며 최종 산출물은 대상 환경에서 렌더·대비를 검증합니다. 별도로 설치된 moai-officer:doc-html-report에서 design_system을 지정하면 토큰 참고 자료로 쓸 수 있습니다. Claude Design 핸드오프 시에는 DESIGN.md 지침 소스로 제공됩니다. 다음과 같은 요청 시 반드시 이 스킬을 사용하세요: - "Claude 스타일로 HTML 보고서 만들어줘" - "ClickHouse 다크 테마로 랜딩 만들어줘" - "Clay 디자인 시스템 적용해서 문서 생성" - "브랜드 디자인 시스템 골라서 HTML로" - "Notion / Linear / Stripe 스타일로 리포트" - "어두운 테마 / 따뜻한 화이트 테마로" - "Claude Design에 올릴 디자인 시스템 자료 정리"

사용자 브랜드 자산을 조사하고 출처가 드러나는 디자인 시스템 문서와 Claude Design에 전달할 자료 목록을 준비합니다.

실제 디자인 토큰을 DTCG 형식과 프로젝트의 CSS 변수·테마 형식 사이에서 변환하고, 매핑 손실과 색 대비를 확인합니다.

디자인 자료를 프로젝트의 브랜드 기준과 함께 읽고, 확인된 토큰과 자산을 구현에 전달합니다. 프로젝트 설정이 있을 때만 MoAI 전용 경로를 사용합니다.