naksha-studio

당신 에이전시의 디자인 브레인. 언제나 깨어 있으며, 언제나 당신의 것입니다.

터미널 내부의 Naksha 디자인 팀 — 당신이 무엇을 만들고 있는지에 따라 26개의 전문 역할이 자동으로 활성화됩니다.

빠른 시작 · 명령어 · 팀 구성 · 작동 방식 · 변경 이력 (Changelog)

git clone https://github.com/Adityaraj0421/naksha-studio.git
cd naksha-studio && bash install.sh

그 다음 Claude Code를 재시작하고 다음을 시도해 보세요:

/design SaaS 분석 제품을 위한 랜딩 페이지를 제작해줘

업데이트: 저장소 내부에서 git pull만 수행하면 됩니다 — 재설치가 필요하지 않습니다. 플러그인은 로컬 클론 (local clone)에 대한 라이브 심볼릭 링크 (symlink)입니다.

.cursor/rules/naksha.mdc 파일을 프로젝트의 .cursor/rules/ 디렉토리로 복사하세요. 디자인 팀이 CSS, HTML, TSX, SVG 및 토큰 (token) 파일에 대해 자동으로 활성화됩니다.

.windsurfrules 파일을 프로젝트 루트 (root)로 복사하세요. Windsurf는 세션 시작 시 이를 자동으로 읽습니다.

GEMINI.md 파일을 프로젝트 루트로 복사하세요. Gemini CLI는 세션 시작 시 이를 읽습니다.

.github/copilot-instructions.md 파일을 프로젝트의 .github/ 디렉토리로 복사하세요. Copilot Chat 및 인라인 완성 (inline completions)에 디자인 팀의 규칙이 적용됩니다.

AGENTS.md 파일을 프로젝트 루트로 복사하고, skills/design/을 .autohand/skills/naksha-design/으로 복사하세요. Autohand Code CLI가 프로젝트 지침을 읽고 프로젝트 수준의 기술 디렉토리에서 Naksha 디자인 기술을 로드합니다.

| 오케스트레이션 (Orchestrates) |
| 비전 (Vision) |
| 전략 (Strategy) |
| 흐름 (Flows) |
| 시각적 (Visual) |
| 통찰 (Insights) |
| 복사 (Copy) |
| 토큰 (Tokens) |
| 애니메이션 (Animation) |
| 소셜 비주얼 (Social Visuals) |
| 캠페인 (Campaigns) |
| 캡션 (Captions) |
| 지표 (Metrics) |
| HTML 이메일 (HTML Email) |
| 제목 (Subject Lines) |
| 차트 (Charts) |
| 레이아웃 (Layouts) |
| 덱 (Decks) |
| 포지셔닝 (Positioning) |
| 아이콘 및 아트 (Icons & Art) |
| 스크립트 (Scripts) |
| 이미지 생성 (Image Gen) |
| 비디오 생성 (Video Gen) |
| 보이스오버 및 음악 (Voiceover & Music) |
| 프롬프트 시스템 (Prompt Systems) |
| 인쇄 및 PDF (Print & PDF) |

명령어	기능
/design <task>	팀 구성이 포함된 전체 디자인 워크플로우 (Workflow)
/design-review <file or screenshot>	품질 감사 (Quality audit) — 시각적 AI 비평을 위해 HTML, Figma URL 또는 스크린샷을 수락 (6가지 디자인 원칙을 0~10점으로 평가)
/design-system	디자인 토큰 (Design tokens) 생성, 추출 또는 감사
/figma <URL>	Figma 디자인을 프로덕션 코드 (Production code)로 변환
/figma-create <task>	Figma에서 페이지, 와이어프레임 (Wireframes), 컴포넌트 (Components) 구축
/ux-audit <brief>	디자인 브리프 (Design brief)를 기준으로 Figma 파일 감사
/design-handoff	개발자 핸드오프 (Handoff) 문서 (토큰, 사양, API)
/figma-responsive	데스크톱 디자인으로부터 모바일/태블릿 변형 버전 생성
/figma-sync	디자인과 코드 간의 드리프트 (Drift) 감지
/design-present	Figma로부터 인터랙티브 HTML 프레젠테이션 생성
/brand-kit <color>	1~2개의 색상으로부터 완전한 브랜드 키트 (Brand kit) 생성
/component-docs	Figma 컴포넌트로부터 Storybook 스타일의 문서 생성
/figma-prototype	프레임 (Frames) 간의 프로토타입 (Prototype) 연결
/site-to-figma <URL>	웹사이트를 편집 가능한 Figma 디자인으로 캡처
/ab-variants	A/B 테스트 디자인 변형 생성
/design-sprint	가이드가 포함된 5단계 디자인 스프린트 (Design sprint)
/social-content <task>	소셜 미디어 비주얼 (포스트, 스토리, 릴스, 캐러셀)
/social-campaign <brief>	전략, 캘린더 및 캡션이 포함된 캠페인 기획
/social-analytics <type>	소셜 분석 대시보드 및 성과 보고서
/design-framework <fw> [file]	HTML 디자인을 React, Vue, Svelte, Next.js 또는 Astro로 변환
/email-template <type> for <brand>	프로덕션용 HTML 이메일 템플릿 (반응형, 다크 모드, 크로스 클라이언트 지원)
/email-campaign <type> for <product>	카피와 HTML 템플릿이 포함된 완전한 멀티 이메일 캠페인 시퀀스
/email-audit	전방위적 이메일 감사 — 기술적 렌더링 문제 + 카피/전략 비평 (2단계)
/design-template <category>	갤러리로부터 프로덕션용 웹 템플릿 생성 (랜딩 페이지, 대시보드, 가격 책정, 인증, 블로그, 이커머스, 포트폴리오, 문서, SaaS, 온보딩)
/chart-design <description>

접근 가능한 차트 또는 데이터 시각화 (Data Visualization) — 차트 유형 선택, 색맹 방지 팔레트 (Colorblind-safe palette) 적용, HTML/CSS/JS 출력 |
/dashboard-layout <description> |
완성된 대시보드 (Dashboard) — KPI 카드, 차트 영역, 필터 바, 데이터 테이블, 사이드바, 반응형 (Responsive) |
/data-viz-audit |
차트 유형, 팔레트, 주석 (Annotations), 안티 패턴 (Anti-patterns) 감사. 조건부 2단계: 대시보드 적합성 검토 |
/design-tutorial [track] |
대화형 가이드 투어 (Interactive guided tour) — 트랙: 퀵스타트 (Quick-start), UI, Figma, 소셜, 이메일, 데이터 시각화 (Data-viz), 전체 |
/figma-component-library <description> |
완성된 Figma 컴포넌트 라이브러리 (Component Library) — 변형 (Variants), 오토 레이아웃 (Auto layout), 컴포넌트 속성 (Component properties)을 포함한 원자 (Atoms), 분자 (Molecules), 유기체 (Organisms) |
/motion-design <component or page> |
마이크로 인터랙션 (Micro-interactions), 전환 (Transitions), 애니메이션 시스템 설계 — 지속 시간/이징 스케일 (Duration/Easing scale), 동작 감소 (Reduced motion) 대체 수단 |
/presentation-design <deck type> |
완성된 프레젠테이션 덱 (Presentation deck) 설계 — 피치 덱 (Pitch deck), 제품 데모 (Product demo), 또는 내부용 — 슬라이드 시스템 및 시각적 계층 구조 (Visual hierarchy) 포함 |
/brand-strategy <brand name> |
브랜드 정의 또는 감사 — 포지셔닝 (Positioning), 시각적 정체성 (Visual identity), 보이스 앤 톤 (Voice and tone), 브랜드 아키텍처 (Brand architecture) |
/illustration-system <scope> |
일러스트레이션 스타일 가이드, 아이콘 시스템, 또는 SVG 에셋 세트 설계 |
/video-script <video type> |
데모, 설명 영상 (Explainers), 소셜 영상, 또는 광고를 위한 비디오 스크립트, 스토리보드, 또는 콘텐츠 시리즈 계획 작성 |
/gen-image <subject> for <brand> |
브랜드에 부합하는 AI 이미지 생성 — 도구 선택 (Midjourney/DALL-E/Ideogram/Firefly/Stable Diffusion), 완전한 6요소 프롬프트, 2가지 변형, 시드 (Seed) 전략 |
/gen-video <scene> for <platform> |
샷 바이 샷 (Shot-by-shot) AI 비디오 프롬프트 팩 생성 — 도구 선택 (Runway/Kling/Sora/Pika/Luma), 일관성 (Consistency) 전략, 플랫폼 사양 |
/gen-audio <voice or music> for <platform> |
AI 오디오 브리프 (Brief) 생성 — 보이스오버 (ElevenLabs/Murf) 또는 음악/징글 (Suno), 타이밍 큐 (Timing cues), FTC/EU AI 법안 (AI Act) 준수 |
/gen-moodboard <concept> for <brand> |
3가지 AI 무드보드 (Moodboard) 방향성 생성 — 브랜드 페르소나 추출, 시각적 스타일, 방향당 4~6개의 프롬프트 |
/prompt-refine <existing prompt> |

모든 AI 생성 프롬프트 진단 및 최적화 — 주석이 달린 비평, 최적화된 버전, 도구 간 변형 제공 |
/print-layout <brief> |
인쇄 준비 레이아웃 — CMYK, 도련 (bleed), 재단선 (crop marks)이 포함된 명함, 인증서, 브로슈어, 포스터 |
/print-audit <file> |
인쇄를 위한 사전 점검 (Pre-flight audit): 도련 (bleed), CMYK, 해상도, 폰트 임베딩, PDF/X 준수 여부 |
/pdf-report <brief> |
다중 페이지 PDF 보고서 또는 문서 — 표지, 목차, 본문 섹션, 차트 포함, 인쇄 또는 디지털용 구조화 |
/lint-design <figma_url> |
디자인 린터 (Design linter) — 고립된 색상 (orphan colors), 토큰을 따르지 않는 간격, 오토 레이아웃 (auto-layout) 누락, 대비 위반 사항을 심각도에 따라 점수화 |
/accessibility-audit |
WCAG 2.1 AA 감사 — 대비, ARIA, 키보드 탐색, 시맨틱 HTML (semantic HTML) — 구체적인 코드 수정 사항 포함 |
/design-qa <file or URL> |
3개의 중단점 (breakpoints)에서의 시각적 QA — 토큰 준수 여부, 상호작용 상태 (interaction states), 반응형 동작 |
/design-critique <file> |
휴리스틱 검토 (Heuristic review) — Nielsen의 10가지 휴리스틱, 시각적 감사, 상호작용 상태; 비전 모드 (vision-mode) 비평을 위해 --screenshot <path> 추가 가능 |

v4.0.0 — 메모리, 파이프라인, 비전 및 프론티어 윙 (Frontier Wings)

| /naksha-init |
| 대화형 프로젝트 설정 마법사 — .naksha/project.json 작성 (브랜드, 프레임워크, 토큰 포함) 및 디자인 결정 로그 생성 |
| /naksha-status |
| 현재 프로젝트 컨텍스트 및 메모리로부터 최근 디자인 결정 사항 표시 |
| /pipeline run <name> |
| 다단계 디자인 파이프라인 실행 — launch-prep, brand-audit, component-build, social-launch |
| /design-compare <url1> <url2> |
| 두 URL의 나란한 시각적 분석 — 레이아웃, 타이포그래피, 색상, UX 패턴, "Steal This" 추천 사항 |
| /competitive-audit <url> |
| 경쟁사의 컬러 팔레트, 타이포그래피 시스템, 레이아웃 그리드 및 UX 패턴을 품질 등급과 함께 추출 |
| /design-chatbot <type> [platform] |
| 완전한 챗봇/어시스턴트 UI 사양 — 페르소나, 대화 흐름, 메시지 버블, 빠른 답장, 에러 상태, 접근성 |
| /design-voice-ui <product> [platform] [screen]

| 음성 인터페이스 (Voice interface) 사양 — 웨이크 워드 (wake word) 흐름, 확인 패턴, 하이브리드 화면 레이아웃, SSML, 이어콘 (earcon) 디자인 |
| /design-spatial <type> [platform]

| visionOS/WebXR을 위한 공간 컴퓨팅 (Spatial computing) 사양 — 깊이 계층 (depth hierarchy), 윈도우 유형, 오너먼트 (ornaments), 공간 타이포그래피 (spatial typography) |
| /design-ar-overlay <use-case> [platform]

| AR 오버레이 (AR overlay) 사양 — 앵커 (anchor) 전략, 월드 트래킹 (world tracking) UI, 안내 카드, 스캔 상태, 오클루전 (occlusion) 처리 |
| /design-gdpr <type> [jurisdiction]

| GDPR/CCPA 동의 흐름 — 쿠키 배너 변형, 개인정보 제어 센터, 데이터 삭제 요청 흐름 |
| /design-compliance --regulation <hipaa\|pci\|ada>

| 컴플라이언스 (Compliance) 디자인 감사 또는 생성 — HIPAA PHI 처리, PCI 결제 양식 격리, ADA/Section 508 |

v4.6.0 — CI/CD & Health

| /naksha-doctor [--fix]

| 플러그인 상태 점검 (Plugin health check) — 명령어 개수, 참조, 버전 일관성, 허용된 도구 검증; Playwright + Figma MCP 가용성 조사; --fix는 문제를 자동으로 수정함 |

v4.7.0 — Design Intelligence

| /design-score <file or URL>

| 4개 차원에 걸친 0–100 정량적 디자인 점수: 접근성 (Accessibility, WCAG), 사용성 (Usability, Nielsen), 시각적 품질 (Visual Quality), 토큰 준수 (Token Compliance) — ASCII 막대 차트, A–F 등급 |

v5.0.0 — Project Memory & Design Agent

| /naksha-browse <url>

| 브라우저-비전 (Browser-vision) 디자인 리서치 — 라이브 URL을 캡처하고 레이아웃 패턴, 타이포그래피, 색상 및 UX 패턴을 추출하여, 향후 디자인 명령어에 컨텍스트를 자동으로 주입할 수 있도록 .naksha/project.json에 조사 결과를 저장함 |
| /naksha-remember <constraint>

| 디자인 제약 사항 또는 컴포넌트 패턴을 프로젝트 메모리에 유지 — constraint 또는 component_pattern으로 분류되어 .naksha/project.json에 기록됨; 컨텍스트는 /design, /brand-kit, /design-system 및 기타 3개 명령어로 자동 흐름됨 |

📖 명령어 상세 정보 및 예시

적절한 전문가를 구성하고 전체 워크플로우를 실행합니다:

/design 월간/연간 토글이 있는 3단계 가격 페이지 생성
/design 전환율 향상을 위한 온보딩 흐름 (onboarding flow) 재설계
/design 실시간 분석 대시보드 구축

기존 디자인에 대해 구조화된 5단계 감사 (audit)를 실행합니다:

/design-review ./src/pages/checkout.html

확인 항목: 접근성 (Accessibility, WCAG AA) · 사용성 휴리스틱 (Usability Heuristics) · 시각적 일관성 (Visual Consistency) · 콘텐츠 품질 (Content Quality) · 모션 디자인 (Motion Design)

디자인 토큰 (design tokens)을 생성, 추출 또는 감사합니다:

/design-system 브랜드 컬러 #2563eb로부터 토큰 생성
/design-system 이 Figma 파일에서 토큰 추출
/design-system 하드코딩된 값이 있는지 기존 코드 감사

Figma 디자인을 프로덕션 준비가 완료된 코드 (production-ready code)로 변환합니다:

/figma https://figma.com/design/abc123/MyApp?node-id=1-2

데스크톱 브릿지 (Desktop Bridge)를 통해 Figma 내부에서 페이지, 와이어프레임 (wireframes), 컴포넌트 (components) 및 디자인 시스템을 직접 구축합니다:

/figma-create 저장된 콘텐츠 기능을 위한 3개 화면 와이어프레임 구축
/figma-create 컬러 토큰 및 타이포그래피 스케일 (type scale)을 포함한 디자인 시스템 설정
/figma-create 4가지 변형 (variants)을 가진 버튼 (Button) 컴포넌트 세트 생성

Figma 데스크톱 앱에서 Figma Desktop Bridge 플러그인이 실행 중이어야 합니다.

디자인 브리프 (design brief) 준수 여부를 확인하기 위해 Figma 파일을 감사합니다 — 페이지 구조, 프레임 명명 (frame naming), 크기, 스타일, 컴포넌트 및 콘텐츠를 확인합니다:

/ux-audit Miles UX 디자인 챌린지 제출물을 브리프와 대조하여 확인
/ux-audit 모든 필수 화면이 1440×900 크기로 존재하는지 확인

Figma 파일로부터 완전한 개발자 핸드오프 (developer handoff) 문서를 생성합니다 — 토큰 맵 (token maps), 간격 사양 (spacing specs), 컴포넌트 API, 프로덕션 준비가 완료된 코드 스니펫 (code snippets)을 포함합니다:

/design-handoff 현재 Figma 파일에 대한 핸드오프 생성
/design-handoff 토큰을 CSS 변수 및 Tailwind 설정으로 내보내기

출력물: Markdown 문서, CSS 사용자 정의 속성 (custom properties), Tailwind 설정, TypeScript 타입.

데스크톱 Figma 프레임으로부터 모바일 (375×812) 및 태블릿 (768×1024) 변형을 생성합니다:

/figma-responsive S3-A / Saved Redesigned
/figma-responsive 대시보드의 모바일 및 태블릿 버전 생성

소스 프레임을 복제하고, 레이아웃을 조정하며(그리드 리플로우 (grid reflow), 사이드바 축소, 내비게이션 단순화), 스크린샷을 통해 각 브레이크포인트 (breakpoint)를 검증합니다.

Figma 디자인과 코드 구현 사이의 드리프트 (drift)를 감지합니다 — 컬러 토큰 (color tokens), 타이포그래피 (typography), 간격 (spacing), 그리고 컴포넌트 (components)를 비교합니다:

/figma-sync Figma 토큰이 우리의 Tailwind 설정과 일치하는지 확인
/figma-sync 디자인 시스템 스타일을 CSS 사용자 정의 속성 (CSS custom properties)과 비교

드리프트 점수 (drift score), 토큰별 비교 테이블, 그리고 Figma와 코드 모두를 위한 선택적 패치 (patches)가 포함된 동기화 보고서를 출력합니다.

Figma 화면으로부터 인터랙티브한 HTML 프레젠테이션을 생성합니다:

/design-present 대시보드 화면의 워크스루 (walkthrough) 프레젠테이션 생성
/design-present 제품 목업 (mockups)으로부터 피치 덱 (pitch deck) 구축
/design-present 케이스 스터디 (case study) 프레젠테이션 생성

기능: 키보드 내비게이션, 진행 바 (progress bar), 주석 (annotations), 줌 (zoom), 다크/라이트 모드, 전체 화면.

1~2개의 색상과 분위기 (mood)로부터 완전한 브랜드 키트 (brand kit)를 생성합니다:

/brand-kit #6366f1 premium
/brand-kit #f59e0b로부터 따뜻한 브랜드 생성