Picture Backdrop (그림 배경)
데스크탑은 모드의 배경을 모드 자체가 렌더링하는 scene으로만 그리며, 내부에 래스터 이미지를 직접 그리지 않습니다. 따라서 그림은 벡터 경로로 추적(trace)되고, 엄격한 무음 크기 제한 내에서 패킹되며, 소형 모드에 의해 그려집니다. 모드가 그리는 방식을 변경하기 전에 참고/limits.md를 읽으십시오; 여기에는 측정된 사항과 무음으로 실패하는 사항이 나열되어 있습니다.
워크플로우
- 그림을 가져옵니다. 하나의 그림, 또는 라이트(낮)와 다크(밤) 한 쌍을 가져옵니다. 가로 약 1600x1000이 적합합니다. 앱은
xMidYMid slice로 자르므로 주제를 상단과 하단에서 멀리 떨어뜨려 두십시오. 회화적이고 부드러운 아트는 셀 아트 외곽선보다 문자당 훨씬 잘 추적됩니다. 사진도 작동합니다. 사용자가 아트를 생성하는 경우, 생성 전에 미리 알려주십시오. - 임시 폴더에 도구를 설치합니다 (모드 내부가 아님):
python -m pip install --target "$TMP/pb-vtracer" vtracer mkdir -p "$TMP/pb-svgo" && cd "$TMP/pb-svgo" && npm init -y >/dev/null && npm install svgo@4 - 모드 폴더를 만듭니다
~/.claude/skills/<id>/위치에 (매 세션마다 로드됨): assets/mod-template/를 복사한 다음,make-colors.js와make-colors.d.ts를 플러그인 작성 스킬에서hooks/로 복사하고 변경하지 마십시오. 모든__PLACEHOLDER__를 채웁니다 (__ID__는 폴더 이름이며, 소문자와 하이픈 사용). 단일 그림인 경우, 다른 import, 그 scene 및 look를 제거하고auto가 하나의 그림을 가리키게 합니다. - 그림을 살펴보고 영역을 나열합니다 (자르고 보기): 주제, 얼굴, 피부 영역, 각 측면. 각 그림에 대해 모드 옆(
hooks/내부가 아님)에 config를 작성합니다. 영역 선택과 설정은 참고/tracing.md를, 모델로는 assets/example-night.json (입구 오른쪽에 앉아 있는 소녀)를 사용하십시오. 쌍의 경우 각 config에"scheme"과 두 예산({"FULL": 259500, "HALF": 129500})을 제공하고, 단일 그림의 경우FULL만 제공하고scheme은 없습니다. - 추적(trace)합니다, 백그라운드에서 (실행에 몇 분 소요):
python -I scripts/trace_scene.py night.json --vtracer "$TMP/pb-vtracer" --svgo "$TMP/pb-svgo" --preview "$TMP/pb-preview/night.html"scene-<name>.ts를 작성합니다. config의out이 모드의hooks/를 가리키도록 설정합니다. - 미리보기 HTML을 브라우저 창에서 확인합니다 (해당 폴더를
python -m http.server로 서빙). 앱이 그림을 확대하므로 2배 크롭으로 주제를 확인합니다. tracing.md의 표를 참고하여 잘못된 부분을 수정하고 다시 추적합니다. - 색상. 그림에서 표면 색상을 샘플링합니다 (지배적인 벽 또는 하늘 톤; 다크 모드는 어둡게 유지)
makeColors를 실행합니다; 그 문제 목록에 "Desktop won't paint" 항목이 없어야 합니다. - 검증 및 인계:
claude plugin validate <모드 폴더>. 사용자에게 창을 다시 로드하거나 새 세션을 시작하고, 아무 메시지나 입력하라고 알립니다 (테마는 첫 프롬프트에서 설정됨)./backdrop day|night|auto를 시도하도록 합니다. 특정 영역을 살펴보도록 요청합니다. 사용자의 스크린샷이 실제 테스트입니다. 이후 임시 도구 폴더를 삭제합니다.
주의해야 할 규칙
- 작은따옴표로 묶인 SVG만 사용하고, SVG 내에
",\또는 백틱을 사용하지 마십시오: 이스케이프도 총 문자 수에 포함됩니다. - scene의 SVG들을 합친 크기가 약 259,500자 이하여야 하며, 각 SVG는 약 98,000자 이하여야 합니다. 초과하면 데스크탑이 아무것도 표시하지 않고 아무 말도 하지 않습니다; 템플릿은 세션 시작 시 크기를 초과한 scene을 로그에 기록합니다.
glass는 켜 두고, 두 모드 모두를 위한 look에서는tint를 빼십시오.image,color,gradient또는vector배경,<image>, 또는overrideColorScheme을 사용하지 마십시오: 이들 중 어느 것도 그려지거나 효과를 발휘하지 않습니다.session.start가 아닌prompt.submit에서 테마를 설정하십시오.- 한 영역을 개선할 때, 사용자가 마음에 든다고 말한 부분은 그대로 유지하십시오: 모든 것을 다시 조정하는 대신 해당 영역에 자체 영역이나 우선순위를 부여합니다. 각 변경 사항을 영향을 받는 영역과 함께 보고하십시오.