Manual Studio

소스코드와 실제 사용 화면을 확인해, 직원이 따라 할 수 있는 업무 매뉴얼을 만드는 스킬입니다.

Codex · Claude Code · Grok Build에서 같은 제작기·디자인·검증기를 사용합니다. 흰색 배경과 Noto Sans KR을 기준으로, 실제 화면 설명·사용법 영상·필요한 다이어그램을 함께 만듭니다.

설치 · 사용법 · 자동 설치 도구 · 샘플 · 문제 해결 · 상세 문서

1. 설치 — 프롬프트 하나만 복사하세요

지금 쓰는 에이전트를 펼치고, 프롬프트 전체를 채팅에 붙여넣으세요. 에이전트가 다운로드부터 외부 도구 설치·검증까지 진행합니다. 경로를 고치거나 터미널 명령을 따라 칠 필요가 없습니다.

• 설치 범위: 사용자 범위. 모든 프로젝트에서 사용합니다.
• 사용 환경: 로컬 파일·명령 실행 권한이 있는 Codex / Claude Code / Grok Build.
• 준비 사항: Git·Python 3.10 이상과 네트워크. Python이 없거나 OS 설치 승인이 필요하면 에이전트가 안내합니다.

일반 웹 채팅에 붙여넣는 것만으로 컴퓨터에 설치되지는 않습니다. 에이전트 로그인·보안 승인·서비스 계정은 자동으로 처리하지 않습니다.

Codex 설치 프롬프트

https://git.tla.so/erickim/manual-studio.git 의 Manual Studio를
이 Codex에서 모든 프로젝트에 쓸 수 있도록 사용자 범위에 직접 설치해줘.
명령을 나에게 안내하는 것으로 끝내지 말고, 다운로드부터 설치·검증까지 실행해.

유지되는 로컬 작업 폴더에 저장소를 내려받아 README와 설치 코드를 먼저 확인해.
공개 저장소이므로 토큰은 필요 없어. 기존 스킬·공유 경로·플러그인을 확인해서
중복 설치하지 말고, 내 수정본을 덮어쓰거나 삭제하지 마.
처음 설치는 manual-studio/scripts/install_skill.py --agent codex --scope user로 해.
기존 관리 설치본은 같은 방식으로 --update를 사용해 안전하게 갱신해.
Python 3.10 이상을 먼저 확인해. Node/npm·HyperFrames·GSAP·FFmpeg·FFprobe·
렌더 브라우저는 설치기가 자동 준비하고 Anatomy·Archify도 실행 검증해야 해.
나에게 따로 npm ci를 시키지 말고 Codex 번들에 의존하지 마.
Python·OS 라이브러리 설치 등 사용자 승인이 필요한 경우에만 요청하고,
보안·프로젝트 신뢰 설정을 임의로 변경하지 마.

ready(플러그인은 setup_runtime의 verified)와 runtime-report.json의 9개 검사,
실제 스킬 인식과 제작·설치 테스트를 확인해. 실패나 미확인을 완료라고 하지 마.
설치·런타임 위치, 점검 결과, 남은 준비 사항과 $manual-studio 사용 예시만 짧게 알려줘.
새 세션이 필요하면 알려줘. 지금은 설치까지만 하고 매뉴얼 제작은 시작하지 마.

Claude Code 설치 프롬프트

https://git.tla.so/erickim/manual-studio.git 의 Manual Studio를
이 Claude Code에서 모든 프로젝트에 쓸 수 있도록 사용자 범위에 직접 설치해줘.
명령을 나에게 안내하는 것으로 끝내지 말고, 다운로드부터 설치·검증까지 실행해.

유지되는 로컬 작업 폴더에 저장소를 내려받아 README와 설치 코드를 먼저 확인해.
공개 저장소이므로 토큰은 필요 없어. 기존 스킬·공유 경로·플러그인을 확인해서
중복 설치하지 말고, 내 수정본을 덮어쓰거나 삭제하지 마.
처음 설치는 manual-studio/scripts/install_skill.py --agent claude --scope user로 해.
기존 직접 설치본은 같은 방식으로 --update를 사용해. 네이티브 플러그인이면
관리자로 갱신한 뒤 설치된 스킬의 scripts/setup_runtime.py도 실행해.
Python 3.10 이상을 먼저 확인해. Node/npm·HyperFrames·GSAP·FFmpeg·FFprobe·
렌더 브라우저는 설치기가 자동 준비하고 Anatomy·Archify도 실행 검증해야 해.
나에게 따로 npm ci를 시키지 말고 Codex 번들에 의존하지 마.
Python·OS 라이브러리 설치 등 사용자 승인이 필요한 경우에만 요청하고,
보안·프로젝트 신뢰 설정을 임의로 변경하지 마.

ready(플러그인은 setup_runtime의 verified)와 runtime-report.json의 9개 검사,
실제 스킬 인식과 제작·설치 테스트를 확인해. 실패나 미확인을 완료라고 하지 마.
설치·런타임 위치, 점검 결과, 남은 준비 사항과 호출명에 맞는 사용 예시만 짧게 알려줘.
새 세션이 필요하면 알려줘. 지금은 설치까지만 하고 매뉴얼 제작은 시작하지 마.
직접 스킬은 /manual-studio, 네이티브 플러그인은 /manual-studio:manual-studio야.

Grok Build 설치 프롬프트

https://git.tla.so/erickim/manual-studio.git 의 Manual Studio를
이 Grok Build에서 모든 프로젝트에 쓸 수 있도록 사용자 범위에 직접 설치해줘.
명령을 나에게 안내하는 것으로 끝내지 말고, 다운로드부터 설치·검증까지 실행해.

유지되는 로컬 작업 폴더에 저장소를 내려받아 README와 설치 코드를 먼저 확인해.
공개 저장소이므로 토큰은 필요 없어. 기존 스킬·공유 경로·플러그인을 확인해서
중복 설치하지 말고, 내 수정본을 덮어쓰거나 삭제하지 마.
처음 설치는 manual-studio/scripts/install_skill.py --agent grok --scope user로 해.
GROK_HOME과 Grok이 함께 읽는 Claude·공용 경로를 존중해. 기존 직접 설치본은
같은 방식으로 --update를 사용해. 네이티브 플러그인은 관리자로 갱신한 뒤
설치된 스킬의 scripts/setup_runtime.py도 실행해. grok inspect로 실제 인식을 확인해.
Python 3.10 이상을 먼저 확인해. Node/npm·HyperFrames·GSAP·FFmpeg·FFprobe·
렌더 브라우저는 설치기가 자동 준비하고 Anatomy·Archify도 실행 검증해야 해.
나에게 따로 npm ci를 시키지 말고 Codex 번들에 의존하지 마.
Python·OS 라이브러리 설치 등 사용자 승인이 필요한 경우에만 요청하고,
보안·프로젝트 신뢰 설정을 임의로 변경하지 마.

ready(플러그인은 setup_runtime의 verified)와 runtime-report.json의 9개 검사,
실제 스킬 인식과 제작·설치 테스트를 확인해. 실패나 미확인을 완료라고 하지 마.
설치·런타임 위치, 점검 결과, 남은 준비 사항과 /manual-studio 사용 예시만 짧게 알려줘.
새 세션이 필요하면 알려줘. 지금은 설치까지만 하고 매뉴얼 제작은 시작하지 마.

설치가 끝났는지 확인하기

에이전트의 마지막 답변에서 다음 세 가지를 확인하세요.

확인 항목	완료 기준
스킬 설치	설치 위치가 있고 현재 에이전트에서 스킬을 인식함
외부 도구	runtime-report.json의 9개 실행 검사 통과
설치 결과	통합 설치기 status: ready; 네이티브 플러그인의 별도 런타임 준비는 status: verified

미확인 항목이나 실패가 남아 있으면 설치 완료가 아닙니다. 새 세션이 필요한 경우도 구분해 안내합니다.

2. 사용 — 서비스 프로젝트에서 요청하세요

매뉴얼을 만들 실제 서비스 프로젝트를 연 뒤 아래 요청을 붙여넣으세요.

manual-studio 스킬로 현재 프로젝트의 직원용 매뉴얼을 만들어줘.
소스코드와 실행 중인 실제 서비스를 먼저 확인하고, 업무 흐름 중심으로 구성해.

흰색·Noto Sans KR 디자인을 유지해. 표지와 모든 업무 페이지에 HyperFrames
사용법 영상을 실제로 만들어 넣고, 페이지마다 다이어그램·Anatomy 필요 여부를
판단해서 필요한 그림·초보자 설명·관련 단계 링크를 포함해.

실제 화면과 설명을 맞추고 모바일 잘림, 영상 프레임, 자막을 직접 검수해.
가짜 화면이나 검증 기록은 만들지 말고, 확인하지 못한 내용은 구분해.
결과는 현재 프로젝트의 docs/manual에 저장해.
서비스 주소나 테스트 접근 권한을 작업 환경에서 찾을 수 없을 때만 물어봐.

스킬 이름을 직접 호출해도 됩니다.

에이전트	채팅에서 호출
Codex	$manual-studio
Claude Code — 직접 스킬 설치	/manual-studio
Claude Code — 네이티브 플러그인	/manual-studio:manual-studio
Grok Build — 직접 설치·플러그인	/manual-studio

만들어지는 매뉴얼

구성	제작 기준
디자인	흰색 배경·Noto Sans KR, 일관된 글자 크기·간격·반응형 배치
업무 설명	시작 전 준비 → 번호별 실제 화면 → 완료 확인 → 문제 해결
영상	표지와 모든 업무 페이지에 HyperFrames 사용법 영상·자막·검수 프레임
다이어그램	3단계 이상 흐름·분기·담당자 인계 등에 Archify 활용
Anatomy 설명	구조·관계 이해가 필요한 주제에 그림·초보자 설명·관련 단계 링크
검증 기록	실제 동작·화면·결과의 근거와 검수 내역, 미확인 사항 구분

다이어그램·Anatomy는 장식처럼 무조건 넣지 않습니다. 모든 업무에서 필요 여부와 이유를 기록하고, 필요한 경우 빠지지 않게 검사합니다. 둥근 카드·배지·미색 배경·홍보 문구를 기본 디자인에 넣지 않습니다.

가짜 매뉴얼 방지: 필수 영상·그림·검수 기록이 빠지면 기본 빌드가 실패합니다. 미완성 미리보기는 명시적 --draft로만 만들고, 실제 배포 검사는 서비스 증거까지 확인합니다. 자동 검사만으로 실제 동작이나 미적 품질을 확인했다고 주장하지 않습니다.

3. 외부 도구 — 설치할 때 함께 준비합니다

세 에이전트 모두 동일한 통합 설치기를 사용합니다. 별도의 OpenAI API 키나 Codex 설치는 필요하지 않습니다.

도구	준비 방식	실제 실행 검사
Node / npm	호환 버전이 없으면 공식 휴대용 배포본을 체크섬 검증 후 설치	런타임·의존성 사전 검사
HyperFrames · GSAP	고정 의존성 자동 다운로드	검사·1초 영상 렌더·GSAP 실행
FFmpeg · FFprobe	자동 다운로드	영상 정보 확인·프레임 디코딩
렌더 브라우저	전용 브라우저 자동 다운로드	실제 영상 렌더
Anatomy	생성기·소스·라이선스 동봉	그림 생성
Archify	엔진·라이선스 동봉	native validate·deliver·check·browser-check

설치에 실패하면 실패 단계와 로그를 남기고 완료 처리하지 않습니다. 기존 설치 파일은 보존합니다. 시스템 PATH나 에이전트 신뢰 설정도 임의로 바꾸지 않습니다.

자동 설치 대상: Windows x64, Linux x64, macOS x64/arm64. 실제 실행 검증은 Windows x64에서 수행했습니다. Python 자체, 부족한 OS 라이브러리, 브라우저 MCP 연결, 서비스 로그인은 별도 준비 사항입니다.

네이티브 플러그인 관리자에 등록만 한 경우는 도구 준비 완료가 아닙니다. 위 프롬프트는 설치된 스킬의 런타임 준비·검증까지 요청합니다. 경로·로그·수동 설치 상세

4. 샘플과 검증 범위

미리보기	데스크톱	모바일
표지·목차	화면 보기	화면 보기
단계별 업무 설명	화면 보기	화면 보기

표지 디자인 펼쳐보기

저장소를 내려받아 표지 HTML과 업무 설명 HTML을 브라우저에서 열면 6초 개요 영상·18초 절차 영상, Archify 흐름도와 Anatomy 설명을 확인할 수 있습니다. 저장소 웹 화면은 HTML 소스만 표시할 수 있습니다.

샘플은 가상 화면과 개념 비유를 사용한 디자인 검증용입니다. 실제 서비스 검증본이 아니며, 배포 검사도 의도적으로 차단됩니다. 실제 서비스 첫 적용은 아직 수행하지 않았습니다.

• 에이전트별 스킬 인식 기록 · 자동 설치·도구 실행 기록
• 1440·1280·390px 레이아웃 검사 · 미디어 완전성 검사 · 샘플 배포 차단 기록
• 제작·설치·런타임 회귀 테스트 60개와 재실행 명령

5. 업데이트·문제 해결

업데이트 요청 프롬프트

https://git.tla.so/erickim/manual-studio.git 의 최신 버전으로
지금 에이전트에 설치된 manual-studio를 업데이트해줘.
기존 설치 방식과 범위를 확인해서 그 설치본만 갱신하고 중복 설치하지 마.
내 수정본·개인 메모·제작한 매뉴얼은 보존해. 충돌하면 덮어쓰지 말고 알려줘.
통합 설치기로 런타임까지 다시 검증해. 네이티브 플러그인은 설치된 스킬의
scripts/setup_runtime.py도 실행해. ready/verified, 9개 검사, 실제 스킬 인식과
테스트를 확인하고 실패·미확인 항목은 구분해서 알려줘.

문제	먼저 확인할 것
스킬이 안 보임	새 세션·실제 설치 위치·호출명 확인. Grok 프로젝트 신뢰 상태도 확인
같은 스킬이 두 번 보임	사용자·프로젝트·레거시 경로·플러그인 중복 확인
도구 설치·영상 렌더 실패	runtime-report.json의 실패 단계와 로그 확인 후 동일 설치기로 재검증
화면·서비스에 접근 못함	에이전트의 브라우저·이미지 도구와 테스트 계정 준비
미디어 누락으로 빌드 실패	해당 페이지 영상·필요한 그림·검수 기록 보완. 미리보기만 --draft 사용
업데이트가 수정 충돌로 중단	변경본을 보존·병합. 덮어쓰기 보호를 우회하지 않기

상세 진단 · 수동 업데이트·제거

6. 상세 문서

읽을거리	내용
설치·환경 설정	에이전트별 경로·네이티브 플러그인·캐시·로그·호환성
제작·검증	생성 명령·미디어 제작·검수·Archify 오류 해결·확인 범위
디자인 시스템	폰트·색·간격·스크린샷·반응형 배치
영상 연출	스토리보드·화면 확대·포커스·자막
제작 계약	모든 페이지의 필수 영상·그림·검수 조건
증거 기준	실제 관찰·검증 기록·배포 조건
외부 도구 통합	HyperFrames·Anatomy·Archify 연계

원본·라이선스: HyperFrames · Anatomy · Archify. Anatomy·Archify의 라이선스와 Noto Sans KR의 SIL OFL을 배포 자원에 포함합니다.