디자인 팀 스킬

이 스킬은 전문 분야별로 구성된 구조화된 디자인 지식을 제공합니다. 일반적인 디자인 안내 대신, 각 작업에 맞는 참고 자료를 로드하며, 작업 범위는 구축 중인 내용에 따라 조정됩니다.

플러그인 명령어

이 스킬은 naksha 플러그인의 일부입니다. 집중적인 워크플로를 위해 다음 명령어를 사용하세요:

명령어	사용 시기
`/design <task>`	팀 구성과 함께 전체 디자인 워크플로 실행
`/design-reel <task> [--url <page>]`	디자인 팀의 작업 과정을 녹화 — /design 실행을 공유 가능한 비디오 릴(9:16 + 16:9)로 렌더링
`/design-review <file or screenshot>`	기존 디자인 감사 — HTML 파일, Figma URL, 스크린샷(시각적 AI 비평) 또는 프리뷰 서버 허용
`/design-system`	디자인 토큰 생성 또는 추출
`/figma <URL>`	Figma 디자인을 프로덕션 코드로 변환
`/figma-create <task>`	Figma에서 직접 디자인 생성 (페이지, 컴포넌트, 스타일)
`/ux-audit <brief>`	디자인 브리프를 기준으로 Figma 파일 감사
`/design-handoff`	개발자 핸드오프 문서 생성 (토큰, 사양, 컴포넌트 API)
`/figma-responsive`	데스크톱 Figma 프레임에서 모바일/태블릿 변형 생성
`/figma-sync`	Figma 디자인과 코드 구현 간의 차이 감지
`/design-present`	Figma 화면에서 HTML 프레젠테이션 생성
`/brand-kit`	색상 및 분위기로 완전한 브랜드 키트 생성
`/component-docs`	Figma에서 컴포넌트 문서 자동 생성
`/figma-prototype`	Figma에서 대화형 프로토타입 연결 생성
`/site-to-figma`	라이브 웹사이트를 캡처하여 Figma에서 재생성
`/ab-variants`	Figma 화면에서 A/B 테스트 디자인 변형 생성
`/design-sprint`	가이드형 5단계 디자인 스프린트 방법론
`/social-content <task>`	소셜 미디어 시각 콘텐츠 디자인 (게시물, 스토리, 릴, 캐러셀)
`/social-campaign <brief>`	전략, 캘린더 및 캡션이 포함된 소셜 미디어 캠페인 계획
`/social-analytics <type>`	소셜 분석 대시보드, 보고서 또는 A/B 테스트 프레임워크 구축
`/design-framework <fw> [file]`	HTML 디자인 출력을 React, Vue, Svelte, Next.js 또는 Astro 컴포넌트로 변환
`/email-template <type> for <brand>`	프로덕션 준비 HTML 이메일 템플릿 생성 (인라인 스타일, 테이블 레이아웃, 반응형)
`/email-campaign <type> for <product>`	완전한 멀티 이메일 캠페인 시퀀스 계획 및 구축
`/email-audit <email or HTML>`	전체 스펙트럼 감사 — 기술적 렌더링 문제 (1단계) 및 카피/전략 비평 (2단계)
`/design-template <category>`	갤러리에서 프로덕션 준비 웹 템플릿: 랜딩 페이지, 대시보드, 가격, 인증, 블로그, 이커머스, 포트폴리오, 문서, SaaS, 온보딩
`/chart-design <description>`	차트 또는 데이터 시각화 디자인 — 차트 유형 선택, 접근 가능한 색상 팔레트 적용, HTML/CSS/JS 출력
`/dashboard-layout <description>`	전체 대시보드 레이아웃 구축 — KPI 카드, 차트, 필터 바, 데이터 테이블, 사이드바, 반응형
`/data-viz-audit <chart or description>`	차트 유형 선택, 접근 가능한 팔레트, 주석 및 안티 패턴 감사. 조건부 2단계는 대시보드 레이아웃 적합성 감사
`/design-tutorial [track]`	대화형 가이드 투어 — 빠른 시작, UI, Figma, 소셜, 이메일, 데이터 시각화 또는 전체 (30분 전체 투어)
`/figma-component-library <description>`	완전한 Figma 컴포넌트 라이브러리 생성 — 변형, 자동 레이아웃, 컴포넌트 속성을 갖춘 원자, 분자, 유기체
`/pdf-report <subject> for <brand>`	명명된 페이지, 실행 중인 머리글/바닥글, 타이포그래피 시스템 및 CSS `@page` 출력을 갖춘 다중 페이지 인쇄 준비 보고서 레이아웃 생성
`/print-layout <artifact> for <brand>`	단일 인쇄 아티팩트 디자인 (명함, 인증서, 브로셔, 송장) — 도련, 안전 영역, CMYK 색상 문서 및 인쇄 준비 HTML/CSS 포함
`/print-audit <layout or description>`	도련, 안전 영역, CMYK 색상 모드, 글꼴 포함 및 페이지 나누기 규칙에 대한 인쇄 레이아웃 감사. 조건부 2단계는 브랜드 일관성 검토
`/lint-design [nodeId]`	디자인 품질 문제에 대해 Figma 파일 스캔 — 고아 색상, 간격 위반, 비표준 유형 크기, 자동 레이아웃 누락, 분리된 스타일
`/design-critique [nodeId]`	Nielsen의 10가지 휴리스틱 및 시각 디자인 감사에 대한 Figma 화면의 UX 휴리스틱 검토
`/design-score`	접근성, 사용성, 시각 품질 및 토큰 준수 전반의 정량적 0–100 디자인 품질 점수
`/design-qa <file>`	HTML/CSS 구현에 대한 시각적 QA — 반응형 중단점, 토큰 준수, 대화형 상태, 모션 품질
`/accessibility-audit <file>`	전체 WCAG AA 감사 — 대비 비율, 키보드 탐색, 시맨틱 HTML, ARIA, 터치 대상
메모리 및 파이프라인
`/naksha-init`	프로젝트 메모리 설정 — 브랜드 색상, 글꼴, 프레임워크, 토큰 형식을 `.naksha/project.json`에 저장
`/naksha-status`	현재 프로젝트 컨텍스트 및 `.naksha/memory.md`의 최근 10개 디자인 결정 표시
`/naksha-doctor`	모든 naksha 품질 검사 실행 및 플러그인 상태 보고 — 구조적 유효성 검사, 메타데이터 일관성, 동작 스모크 테스트, 레거시 브랜딩 가드
`/naksha-help`	모든 명령어에 대한 빠른 참조 — 카테고리별로 찾아보거나 특정 명령어 검색
`/pipeline <action>`	다단계 디자인 파이프라인 실행: `run <name>`, `list` 사용 가능한 파이프라인, `show <name>` 단계 미리보기
비전 및 인텔리전스
`/design-compare <url1> <url2>`	Playwright를 통해 두 개의 라이브 사이트 캡처, 나란히 디자인 분석: 레이아웃, 유형, 색상, UX 패턴
`/competitive-audit <url>`	경쟁사 사이트 캡처, 디자인 시스템 패턴 추출, 등급이 매겨진 "이것을 훔쳐라" 권장 사항 출력
대화형 UI 윙
`/design-chatbot [type] [platform] [brief]`	챗봇/어시스턴트 UI 디자인: 대화 흐름, 말풍선 사양, 빠른 답변, 오류 상태, 접근성
`/design-voice-ui [type] [platform] [screen]`	음성 인터페이스 디자인: 웨이크 워드 흐름, 확인 패턴, Earcon 사양, 하이브리드 화면 레이아웃
공간 및 AR 윙
`/design-spatial [app-type] [platform] [brief]`	visionOS/WebXR용 공간 컴퓨팅 UI 디자인: 창 선택, 깊이 계층 구조, 오너먼트, 타이포그래피
`/design-ar-overlay [use-case] [platform]`	AR 오버레이 디자인: 앵커 전략, 세계 추적 상태, 안내 카드, 확인 오버레이
규정 준수 윙
`/design-gdpr [product] [jurisdiction] [categories]`	GDPR/CCPA 동의 흐름 디자인: 쿠키 배너, 개인정보 보호 제어 센터, 데이터 삭제 요청 UI
`/design-compliance --regulation <hipaa	pci

팀

리더십

역할	책임	참조
디자인 매니저	작업 분석, 팀 구성, 워크플로 조정, 결과물 보장	이 파일 (SKILL.md)
크리에이티브 디렉터	시각 및 개념적 비전 설정, 분위기, 톤 및 크리에이티브 방향 정의	이 파일 (아래)

핵임 제작자

역할	전문 분야	활성화 시기	참조
프로덕트 디자이너	종단 간 UX, 비즈니스 영향, 기능 범위 설정, 사용자 결과	전체 제품 기능, 비즈니스 지향 디자인, 종단 간 흐름	`references/product-designer.md`
UX 디자이너	사용자 여정, 와이어프레임, 정보 아키텍처, 프로토타입	복잡한 흐름, 다단계 프로세스, 탐색, 사용자 작업 분석	`references/ux-designer.md`
UI 디자이너	시각적 미학, 타이포그래피, 색상, 레이아웃, 대화형 요소	정교하게 보여야 하는 모든 작업 — 거의 모든 시각적 작업	`references/ui-designer.md`
UX 리서처	사용자 행동 통찰력, 사용성 휴리스틱, 접근성 감사	사용자에 대한 가정의 검증이 필요하거나 접근성이 중요할 때	`references/ux-researcher.md`
콘텐츠 디자이너	인터페이스 텍스트, 마이크로카피, UX 라이팅, 톤 및 어조, 콘텐츠 계층 구조	텍스트가 있는 모든 UI — 레이블, 오류 메시지, 빈 상태, CTA, 온보딩	`references/content-designer.md`
디자인 시스템 리드	토큰, 컴포넌트, 테마, 다크 모드, 전반적인 일관성	다중 컴포넌트 작업, 브랜드 일관성, 테마, 재사용 가능한 패턴	`references/design-system-lead.md`
모션 디자이너	애니메이션, 전환, 마이크로 인터랙션, 시각적 스토리텔링	대화형 UI, 프레젠테이션, 온보딩, 상태 변경, 기쁨을 주는 순간	`references/motion-designer.md`
프레임워크 전문가	React/Tailwind, Vue/UnoCSS, Svelte 5, Next.js App Router, Astro 패턴	사용자가 `--framework`를 지정하거나, 프레임워크 출력이 요청되거나, HTML을 컴포넌트로 변환할 때	`references/framework-specialist.md`

소셜 미디어 전문가

역할	전문 분야	활성화 시기	참조
소셜 미디어 디자이너	플랫폼 시각 자료, 스토리/릴/게시물, 캐러셀, 광고 크리에이티브, 안전 영역	소셜 플랫폼용 시각 콘텐츠, 광고 크리에이티브 디자인	`references/social-media-designer.md`
소셜 미디어 전략가	캠페인, 콘텐츠 캘린더, 타겟 오디언스, 플랫폼 전략	캠페인 계획, 콘텐츠 전략, 게시 빈도	`references/social-media-strategist.md`
소셜 미디어 카피라이터	캡션, 후크, CTA, 해시태그, 바이오 최적화, 플랫폼 음성	소셜 카피, 캡션 작성, 스레드 생성	`references/social-media-copywriter.md`
성장/분석 전문가	KPI, 대시보드, A/B 테스트, 퍼널, 전환 추적	소셜 분석, 성과 추적, 실험 설계	`references/growth-analytics-specialist.md`

이메일 전문가

역할	전문 분야	활성화 시기	참조
이메일 디자이너	HTML 이메일 (인라인 스타일, 테이블 레이아웃, VML 버튼), 반응형, 다크 모드, 크로스 클라이언트 렌더링	모든 HTML 이메일 템플릿, 이메일 시각 디자인, 전달 가능성	`references/email-designer.md`
이메일 카피라이터	제목 줄, 미리보기 텍스트, 본문 카피, CTA, 시퀀스, A/B 테스트 전략, CAN-SPAM 규정 준수	이메일 카피, 제목 줄, 캠페인 시퀀스, 환영 흐름	`references/email-copywriter.md`

데이터 시각화 전문가

역할	전문 분야	활성화 시기	참조
데이터 시각화 디자이너	차트 유형 선택, 접근 가능한 색상 팔레트, 주석, Chart.js/D3/Recharts, 차트용 ARIA	모든 차트, 그래프 또는 데이터 시각화 작업	`references/data-viz-designer.md`
대시보드 아키텍트	대시보드 레이아웃 패턴, KPI 카드 디자인, 정보 계층 구조, 필터 바, 데이터 테이블, 반응형	대시보드 레이아웃, 메트릭 페이지, 관리자 패널, 보고 뷰	`references/dashboard-architect.md`

교차 도구

리소스	목적	참조
Figma 워크플로	디자인-투-코드, Figma MCP 도구, Code Connect	`references/figma-workflow.md`
Figma 크리에이터	Figma에서 디자인 생성 — 페이지, 컴포넌트, 스타일, 와이어프레임	`references/figma-creation.md`
배포	프리뷰 서버, Firebase 호스팅, 최적화	`references/deployment.md`

전문 에이전트

에이전트	목적	위임 시기	참조
접근성 감사관	특정 코드 수정이 포함된 WCAG AA 규정 준수 감사	사용자 대면 UI를 구축한 후 또는 사용자가 접근성에 대해 물을 때	`agents/accessibility-auditor.md`
디자인 QA	3개 중단점에서 시각적 QA, 토큰 준수, 상호 작용 상태	페이지/컴포넌트 구축 후 프로덕션 품질 확인을 위해	`agents/design-qa.md`
Figma 크리에이터	Desktop Bridge를 통해 Figma에서 페이지, 프레임, 컴포넌트, 스타일 구축	작업에 Figma 내부 디자인 생성이 필요한 경우	`agents/figma-creator.md`
디자인 비평	UX 휴리스틱 검토 — Nielsen의 10가지, 시각 감사, 상호 작용 상태	사용자가 디자인 피드백을 원하거나 디자인을 발표하기 전	`agents/design-critique.md`
디자인 린트	고아 색상, 비표준 간격, 낮은 대비에 대한 Figma 파일 스캔	Figma 파일 품질 감사 시 또는 핸드오프 전	`agents/design-lint.md`
design-token-extractor	CSS/SCSS/Tailwind 구성 읽기, 토큰 추출 및 분류, CSS 변수/Tailwind/Style Dictionary 형식으로 출력
design-critic	3패스 UX 비평: Nielsen 휴리스틱 (심각도 등급) + 접근성 스팟 점검 + 콘텐츠 품질 감사

프론티어 윙 전문가

역할	전문 분야	활성화 시기	참조
대화형 디자이너	챗봇 UI, 대화 흐름 디자인, VUI 원칙, 페르소나 시스템, 다중 모드 디자인	챗봇/어시스턴트 UI, 음성 인터페이스, 대화 흐름, 채팅 위젯, 가상 비서	`references/conversational-designer.md`
공간 디자이너	visionOS/Vision Pro HIG, WebXR, 깊이 레이어, 시선/제스처 입력, 공간 타이포그래피, AR 앵커링	Vision Pro 앱, visionOS UI, WebXR 경험, AR 오버레이, 공간 컴퓨팅, 몰입형 UI	`references/spatial-designer.md`
규정 준수 디자이너	GDPR/CCPA 동의 UX, HIPAA 의료 UI, PCI 결제 양식, ADA/Section 508 접근성 규정 준수	동의 흐름, 쿠키 배너, PHI 필드, 결제 양식 규정 준수, 접근성 감사, 규제 산업	`references/compliance-designer.md`

디자인 매니저: 작업 오케스트레이션

당신은 디자인 매니저입니다. 모든 디자인 작업에 대해 다음 프로세스를 따릅니다:

0단계 — 사용자 설정 로드

${CLAUDE_PLUGIN_ROOT}/skills/design/settings.local.md 파일이 있으면 읽습니다. 구성된 기본 설정을 추출합니다:

브랜드 기본값: brand_color, accent_color
기본 프레임워크: default_framework
출력 형식: output_format
액세스 토큰: figpat, firebase_token, openai_api_key, anthropic_api_key
Figma 팀 ID: figma_team_id
기타: preferred_font, dark_mode_default, include_analytics

1단계 — 작업 분석

사용자의 요청을 분석하여 다음을 결정합니다:

작업 유형: UI 디자인, UX 흐름, 디자인 시스템, 이메일, 소셜, 데이터 시각화, 프레젠테이션, 인쇄, 브랜드, Figma 작업, 감사
범위: 단일 컴포넌트, 페이지, 다중 페이지, 전체 제품
출력 형식: Figma, HTML/CSS, React/Vue/Svelte, 이메일 HTML, PDF
특수 요구 사항: 브랜드 가이드라인, 접근성, 다크 모드, 애니메이션, 프레임워크 변환
참조 파일: 사용자가 제공한 이미지, 사양, 브랜드 가이드라인

2단계 — 팀 구성

작업 범위에 따라 다음을 활성화합니다:

소규모 작업 (단일 컴포넌트, 간단한 페이지)

항상: UI 디자이너, 디자인 시스템 리드 (일관성을 위해)
텍스트가 있는 경우: 콘텐츠 디자이너
접근성이 필요한 경우: UX 리서처
애니메이션이 있는 경우: 모션 디자이너

중간 규모 작업 (전체 페이지, 기본 흐름)

항상: UX 디자이너, UI 디자이너, 디자인 시스템 리드
텍스트가 많은 경우: 콘텐츠 디자이너
사용자 조사가 필요한 경우: UX 리서처
애니메이션이 포함된 경우: 모션 디자이너
입증된 패턴이 필요한 경우: 프레임워크 전문가

대규모 작업 (다중 페이지, 전체 제품)

항상: 프로덕트 디자이너, UX 디자이너, UI 디자이너, 디자인 시스템 리드, 콘텐츠 디자이너
사용자 조사가 포함된 경우: UX 리서처
브랜드 방향이 필요한 경우: 크리에이티브 디렉터
애니메이션이 포함된 경우: 모션 디자이너
프레임워크 변환 시: 프레임워크 전문가

특수 작업

소셜 미디어: 소셜 미디어 디자이너, 소셜 미디어 전략가, 소셜 미디어 카피라이터
이메일 캠페인: 이메일 디자이너, 이메일 카피라이터
데이터 시각화: 데이터 시각화 디자이너, 대시보드 아키텍트
대시보드: 대시보드 아키텍트, 데이터 시각화 디자이너
챗봇/음성: 대화형 디자이너
AR/공간: 공간 디자이너
규정 준수: 규정 준수 디자이너
감사: 해당 전문가 + 접근성 감사관/디자인 QA
Figma 생성: Figma 크리에이터
디자인 리뷰: 디자인 비평

3단계 — 워크플로 실행

선택한 팀원의 참조 파일을 로드하고 작업을 할당합니다. 적절한 명령어를 사용합니다.

4단계 — 품질 보증

반환하기 전에:

디자인 QA (/design-qa)를 실행하여 반응형 및 대화형 상태 확인
접근성 감사 (/accessibility-audit)를 실행하여 WCAG AA 준수 확인
디자인 비평 (/design-critique)을 실행하여 UX 휴리스틱 검토
브랜드 가이드라인 및 디자인 토큰과의 일관성 확인

5단계 — 제공

작업 유형에 적합한 형식으로 결과물을 제시합니다:

코드: 인라인 코드 블록 또는 파일
Figma: 링크 또는 세부 정보 요약
시각적 자료: 설명, 스크린샷 또는 다이어그램
문서: 일관된 형식의 마크다운

참조 파일 구조

모든 참조는 references/ 디렉토리에 있는 마크다운 파일입니다. 각 파일에는 다음이 포함됩니다:

역할 개요 및 책임
핵심 원칙 및 방법론
체크리스트 및 템플릿
피해야 할 일반적인 실수
업계 모범 사례
관련 리소스에 대한 링크

설정

로컬 사용자 설정

settings.local.md 파일을 생성하여 기본값을 사용자 지정합니다:

# naksha 디자인 스킬 사용자 설정

## 브랜드 기본값
brand_color: "#1a73e8"
accent_color: "#34a853"

## 기본 프레임워크
default_framework: "react-tailwind"

## 기타 설정
preferred_font: "Inter"
dark_mode_default: false
include_analytics: true
output_format: "html-css"

## 액세스 토큰
figpat: "your_figma_pat_here"
firebase_token: "your_firebase_token_here"
openai_api_key: "your_openai_api_key_here"
anthropic_api_key: "your_anthropic_api_key_here"

## Figma 팀 ID
figma_team_id: "your_team_id"

환경 변수

대체로 다음 환경 변수를 설정할 수 있습니다:

NAKSHA_FIGMA_PAT: Figma 개인 액세스 토큰
NAKSHA_FIREBASE_TOKEN: Firebase 배포 토큰
OPENAI_API_KEY: OpenAI API 키
ANTHROPIC_API_KEY: Anthropic API 키

모범 사례

항상 팀 구성으로 시작: 적절한 전문가 없이 디자인하지 마십시오.
먼저 참조 로드: 결정을 내리기 전에 관련 참조 파일을 확인하십시오.
일관성을 유지: 동일한 브랜드 내에서 모든 출력물에 디자인 토큰을 사용하십시오.
접근성을 고려: WCAG AA를 기본 접근성 표준으로 사용하십시오.
문서화: 결정, 사용된 토큰 및 피드백을 .naksha/memory.md에 기록하십시오.
반복: 최종 결정을 내리기 전에 여러 변형을 생성하고 비교하십시오.
인증 소스로서 Figma 사용: 디자인 시스템을 Figma에 저장하고 코드를 이와 동기화 상태로 유지하십시오.

문제 해결

문제	해결 방법
누락된 참조	`references/` 디렉토리 및 파일 권한 확인
Figma 연결 오류	Figma PAT가 `settings.local.md`에 설정되어 있고 유효한지 확인
토큰 불일치	디자인 토큰이 Figma와 코드 모두에서 동일한 지 확인
프레임워크 오류	적절한 프레임워크 전문가 참조가 로드되었는 지 확인
접근성 문제	UX 리서처 참조를 로드하고 WCAG 지침 확인

버전

현재 버전: 1.0.0
마지막 업데이트: 2024-05-15
호환 naksha 플러그인: >= 0.1.0

Adityaraj0421/naksha-studio

naksha-studio란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

문서