프레임 생성
기존 스크린샷을 frame-kit으로 프레임이 적용된 PNG로 변환합니다. 모든 렌더링은 frame-kit이 수행합니다. 이 스킬은 도구를 찾고, 실행하고, 결과를 확인하고, 커버 이미지를 선택합니다. 프로젝트 페이지를 먼저 스크린샷으로 찍으려면 generate-project-frames를 사용하세요.
1. frame-kit 찾기 및 확인
<frame-kit> 폴더라고 부릅니다. cli.mjs 파일과 frame-kit이라는 이름의 package.json이 있는 첫 번째 위치를 사용합니다:
$FRAME_KIT_DIR- PATH 상의
frame-kit명령어 뒤에 있는 폴더 (readlink -f "$(command -v frame-kit)"및 그 폴더) ~/projects ~/code ~/dev ~디렉토리를 depth ≤ 4로 검색 (node_modules제외, 여러 개 일치 시 질문)- 사용자에게 물어봄; 없으면
git clone https://github.com/CrziDev/frame-kit제안
그 다음:
node_modules가 없으면 →<frame-kit>에서npm install실행.node <frame-kit>/cli.mjs --help를 실행하고, 나열된 옵션만으로 명령어를 구성합니다.--resolution또는--fit이 없으면, 설치가 오래된 것입니다: 해당 옵션을 생략하고 사용자에게git pull을 안내합니다.- "Chromium not found" →
<frame-kit>에서npx playwright install chromium을 실행하거나CHROME_PATH를 설정합니다.
경로를 어떤 스킬 파일에도 쓰지 마십시오.
2. 프레임 적용
node <frame-kit>/cli.mjs single <image|folder> --out <framed dir> [options]
--out: 항상 전달합니다. 기본값은<input dir>/framed/로, 원본 폴더 안에 중첩됩니다. 프레임 적용된 이미지를 원본과 분리하여 유지합니다.--url "<host>/{name}": 주소 표시줄 텍스트;{name}은 파일 이름에서NN-접두사를 제외한 이름입니다. 앱의 실제 호스트와 경로를 알고 있으면 사용하고, 그렇지 않으면 생략합니다.--style paper: 영수증, 청구서, 인쇄물. 폴더 실행은 하나의 스타일을 사용하므로, 해당 파일들만 개별적으로--style paper와 동일한--out으로 다시 실행합니다.--resolution standard|high|max: 기본값max(3840×2400). README 및 빠른 미리보기에는standard(1920×1200)를, 웹 및 슬라이드에는high(2560×1600)를 사용합니다. 더 큰 출력은 프레임과 텍스트를 더 선명하게 만들지만, 스크린샷 자체의 디테일은 증가하지 않습니다. 배치당 하나의 해상도를 사용합니다.--fit auto|contain|cover: 기본값auto(전체 스크린샷; 매우 긴 페이지는 위에서 잘림). 잘린 부분을 수정하려는 경우에만 변경합니다.
종료 코드 1은 일부 파일이 실패했음을 의미합니다. 다른 파일들은 여전히 작성되며 실패 목록은 stderr에 출력됩니다. 원인(읽을 수 없거나 손상된 이미지, 지원되지 않는 유형, 50MB 초과)을 수정하고 해당 파일들만 다시 실행합니다. 모든 파일이 실패하면 Chromium 문제를 의심하십시오.
3. 커버 (폴더 입력 전용)
이미지를 살펴본 후, 서로 보완적인 두 개를 선택합니다:
- 뒷면: 제품 개요 (대시보드, 분석, 홈), 가로 방향, 썸네일 크기에서 읽을 수 있어야 함.
- 앞면: 앱이 수행하는 작업을 보여주는 화면, 실제 콘텐츠 포함, 뒷면과 다른 레이아웃.
- 선택 금지: 로그인, 빈 상태, 오류 페이지, 매우 긴 전체 페이지 샷, 영수증 또는 동일한 화면 반복.
node <frame-kit>/cli.mjs cover <back> <front> --back-url "…" --front-url "…" --out <framed dir>/00-cover.png (동일한 --resolution). 프레임이 적용되지 않은 원본 스크린샷을 전달합니다. 보여줄 만한 이미지가 하나뿐이거나 사용자가 헤드라인을 원하는 경우? headline을 사용합니다 (--help 참조).
4. 확인 및 보고
node <this skill>/scripts/verify-frames.mjs <input> <framed dir> --resolution <preset>은 모든 입력에 올바른 크기의 유효한 PNG가 있고 커버가 있는지 확인합니다. 외관은 판단하지 않습니다.- 각 출력 PNG (및 커버)를 읽습니다. 빈 화면 또는 부분적으로 로드된 스크린샷, 잘린 콘텐츠, 읽을 수 없을 정도로 작은 텍스트, 잘못된 스타일(브라우저 창에 영수증), 잘못된 주소 표시줄을 찾습니다. 조정된 옵션으로 영향을 받은 파일만 다시 실행한 후 재확인합니다. 이미지를 볼 수 없으면 그렇게 말합니다.
- 보고: 프레임 적용된 폴더, 실패했거나 재처리된 파일, 커버 쌍, 두 이미지가 서로 보완적인 이유를 한 문장으로 설명합니다.