From mj-design
v2: Design review (5-agent) + Design generation (--gen, claude.ai/design quality). Review triggers: "/mj-design", "디자인 리뷰", "UI 감사", "design audit", "UX 분석". Generation triggers: "/mj-design --gen", "디자인 만들어줘", "UI 생성", "design generate", "make a design", "create UI", "디자인 생성". Generation produces ec-* namespaced CSS, oklch() colors, self-contained HTML or Next.js TSX.
How this skill is triggered — by the user, by Claude, or both
Slash command
/mj-design:mj-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**두 가지 모드**:
두 가지 모드:
design-lead 에이전트가 5개의 전문 분석 에이전트를 조율하여 UI/UX 종합 리뷰 리포트를 생성합니다.--gen): design-generator 에이전트가 claude.ai/design과 동등한 품질의 디자인 아티팩트를 생성합니다. oklch() 색상, ec-* CSS 네임스페이스, 자립 HTML 또는 Next.js TSX 출력./mj-design # 현재 디렉토리 전체 디자인 분석
/mj-design [path] # 특정 경로 분석
/mj-design --focus visual # 시각 계층만 분석
/mj-design --focus interaction # 인터랙션 품질만 분석
/mj-design --focus consistency # 디자인 시스템 일관성만 분석
/mj-design --focus responsive # 반응형/접근성만 분석
/mj-design --focus antipatterns # 안티패턴 탐지만 실행
/mj-design --fix # 발견된 안티패턴 자동 수정
/mj-design --gen "brief" # 자립형 HTML 프로토타입 생성
/mj-design --gen --dark "brief" # 다크 모드 우선 생성
/mj-design --gen --next "brief" # React TSX + globals.css 블록 출력
/mj-design --gen --palette-only "brief" # 색상/타이포 시스템만 출력
생성 예시:
/mj-design --gen "SaaS 분석 대시보드 — 스타트업 창업자용"
/mj-design --gen --dark "AI 스타트업 랜딩 페이지"
/mj-design --gen --next "회원가입 폼 컴포넌트"
| 관점 | 역할 | 참조 |
|---|---|---|
| visual-hierarchy | 폰트 스케일, 색상 대비, 공간 구조 감사 | references/typography.md + color-contrast.md |
| interaction-quality | 8대 컴포넌트 상태, focus, loading, error | references/interaction-states.md |
| design-system-consistency | 토큰 일관성, 컴포넌트 재사용률, 명명 규칙 | gstack /design-consultation 패턴 |
| responsive-accessibility | 모바일 우선, WCAG AA, 4pt 간격 시스템 | references/spacing-layout.md |
| anti-pattern-detector | 24개 AI slop 지표, 안티패턴 코드 탐지 | references/anti-patterns.md |
GEN_MODE = --gen 플래그 존재 여부
BRIEF = --gen 뒤의 인용문 (생성 모드 전용)
OUTPUT_FMT = --next → "next" | --palette-only → "palette" | 기본 → "html"
DARK_MODE = --dark 플래그 존재 여부
DESIGN_PATH = 지정 경로 (미지정 시 현재 작업 디렉토리, 리뷰 모드 전용)
FOCUS = --focus [aspect] (선택: visual/interaction/consistency/responsive/antipatterns)
FIX_MODE = --fix (선택: 안티패턴 자동 수정 활성화)
OUTPUT_DIR = "design-results"
GEN_MODE = true 이면 → Step 2-GEN으로 분기. 리뷰 프로토콜(Step 2~4) 건너뜀.
GEN_MODE가 true일 때만 실행.
시작 안내 출력:
🎨 CS-design 생성 모드 시작
📝 Brief: [BRIEF]
🌗 모드: [DARK_MODE ? "다크 우선" : "라이트"]
📦 출력 형식: [OUTPUT_FMT]
📁 저장 위치: design-results/
design-generator 에이전트가 claude.ai/design급 디자인을 생성합니다...
Task(
subagent_type: "general-purpose",
name: "design-generator",
model: "sonnet",
prompt: "당신은 mj-design v2의 design-generator입니다.
agents/design-generator.md 프로토콜을 따라 아래 brief로 디자인을 생성하세요.
BRIEF: [BRIEF]
MODE: [DARK_MODE ? 'dark' : 'light']
OUTPUT_FORMAT: [OUTPUT_FMT]
OUTPUT_DIR: design-results
반드시 references/generation-spec.md의 모든 규칙을 따르세요:
- oklch() 색상 필수 (hex/rgb 팔레트 금지)
- ec-* CSS 네임스페이스 필수
- Google Fonts에서 비-제네릭 폰트 선택 (Inter/Roboto/DM Sans 금지)
- 4pt 간격 그리드만 사용
- 모든 인터랙티브 요소에 8가지 컴포넌트 상태 구현
- 출력 전 anti-patterns.md 체크리스트 0건 위반 확인"
)
design-generator 완료 후 생성 결과 요약을 main context에 출력하고 종료. Step 3, 4는 실행하지 않는다.
impeccable 원칙: 코드베이스를 읽어도 "누가 사용하는지", "어떤 느낌이어야 하는지"는 알 수 없음. 디자인 리뷰는 컨텍스트 없이는 제네릭한 결과만 나옴.
design-results/design-context.md 파일이 있으면 읽고 진행.
없으면 다음 3가지 확인:
컨텍스트 없이도 진행 가능 (안티패턴 탐지는 컨텍스트 불필요).
🎨 CS-design 시작
📂 분석 대상: [DESIGN_PATH]
🎯 분석 범위: [FOCUS 또는 "전체 (5관점)"]
🔧 수정 모드: [FIX_MODE ? "활성화" : "비활성화 (리포트만)"]
📁 결과 저장: [OUTPUT_DIR]/
design-lead 에이전트가 [N]개 분석 에이전트 팀을 조율합니다...
Task(
subagent_type: "general-purpose",
name: "design-lead",
model: "sonnet",
prompt: "당신은 CS-design의 design-lead입니다. 아래 컨텍스트로 디자인 리뷰를 수행하세요.
DESIGN_PATH: [DESIGN_PATH]
FOCUS: [FOCUS 또는 "none"]
FIX_MODE: [true/false]
OUTPUT_DIR: [OUTPUT_DIR]
DESIGN_CONTEXT: [컨텍스트 내용 또는 "not provided"]
agents/design-lead.md 프로토콜을 따라 분석 에이전트 팀을 오케스트레이션하고 DESIGN-REVIEW.md를 생성하세요."
)
design-lead가 5개 에이전트 조율, 결과 수집, DESIGN-REVIEW.md 합성을 모두 처리합니다.
installed_plugins.json의 gitCommitSha를 현재 marketplace HEAD와 대조해서 플러그인 유효성을 검증함. marketplace에서 git pull로 파일이 업데이트되어도 installed_plugins.json의 SHA가 갱신되지 않으면 불일치 발생 → 로드 거부. orphaned 캐시 디렉토리(.orphaned_at 파일 포함)도 동반 문제로 나타남.installed_plugins.json의 해당 항목 gitCommitSha를 git rev-parse HEAD로 확인 후 최신 SHA로 교체. orphaned 캐시 디렉토리 삭제 후 CC 재시작.white-space: pre-line은 줄바꿈만 보존하고 maxLines 제한이나 빈 줄 필터링이 불가능. split('\n').filter(Boolean) 후 인덱스 넘버링 방식이 더 유연하며, maxLines/small prop으로 컨텍스트(카드 요약 vs 히스토리 상세)별 재사용 가능.PlanLines 같은 컴포넌트로 추출. 줄 분리 → 빈 줄 제거 → 번호 + 텍스트 렌더링 패턴을 디자인 시스템에 등록할 것./design-shotgun은 3가지 시각적 변형(현재 스타일 개선 / 대안 스타일 / 최소 개입)을 생성하고 사용자가 비교 선택하게 함. 승인 패턴 학습으로 이후 제안을 편향시킴./design-review는 CSS-only 수정은 "free-pass"(무조건 실행), JSX/컴포넌트 변경은 20% 리스크 버짓 차감, 전체 30건 하드캡 적용.hsl(215, 75%, 20~75%)), (3) d30 null인 미완성 코호트는 strokeDasharray="4 2" 점선 처리, (4) 연도 필터 토글로 표시량 제어.tell application "Finder" to activate + delay 0.2를 choose folder 앞에 실행하면 Finder가 전면으로 올라오며 다이얼로그도 함께 노출됨.tell application "Finder" to activate 선행. 또한 다이얼로그 실패 시 "경로를 직접 입력하세요" 안내 토스트를 추가해 UX 단절 방지.height:1px) + 가운데 텍스트 레이블("main") + 서브 패널에 좌측 amber 보더(borderLeft: 2px solid)로 두 섹션을 명확히 분리. 중복 버튼은 실행 방식 차이(Terminal vs tmux)를 레이블에 직접 반영하면 혼동 제거.maxWidth:460/440 (343px 가용 초과) ② category pills overflow-x-auto + scrollbar-none (시각적으로 잘려보임, 사용자가 스크롤 가능 인지 못함) ③ device picker absolute w-60 (절대 위치 우측 오버플로우) ④ 검색 행 flexShrink:0 요소가 wrap 깨뜨림 ⑤ 헤더 좌측 그룹 min-w-0 누락.width: 'calc(100vw - 24px)', maxWidth:460 동시 지정 (큰 화면 maxWidth, 작은 화면 100vw-여백) ② overflow-x-auto scrollbar-none → flex-wrap (1-2줄 차지하지만 잘림 0) ③ 절대 드롭다운에 max-w-[calc(100vw-32px)] 1개 클래스 ④ 검색 input flex:'1 1 200px', minWidth:0, device pill maxWidth:140 + textOverflow:ellipsis ⑤ 헤더 컨테이너 min-w-0 flex-shrink.scrollWidth>clientWidth 1줄로 빠르게 잡고(test 도메인 #28), 수정은 ① 모달 width 패턴 ② 가로 스크롤 영역은 flex-wrap 또는 가시 스크롤바 둘 중 하나 (scrollbar-none 단독 금지) ③ 절대 위치 드롭다운은 항상 max-w-[calc(100vw-Npx)] ④ flex 행 내 모든 자식 minWidth:0 + truncate. 이 4-패턴이 모바일 overflow의 90%.ec-* 프리픽스로 모든 CSS 클래스를 네임스페이스화했기 때문에 Tailwind 클래스와 충돌이 없음. globals.css 끝에 디자인 CSS를 추가하면 별도 파일 없이 공존 가능. page.tsx의 쉘(레이아웃 구조)만 교체하면 기존 tab 컴포넌트 내부(FileUploader, Zustand store, API 호출 등)는 그대로 재사용됨. Claude Design bundle은 gzip tar로 내려오며 chats/ 디렉토리의 대화 내역이 디자인 의도를 설명함 — 반드시 먼저 읽어야 함.Provides a checklist for code reviews covering functionality, security, performance, maintainability, tests, and quality. Use for pull requests, audits, team standards, and developer training.
npx claudepluginhub nh-investment-squad1/mjncompany_2-0 --plugin mj-design