aeentech/thumbnail

thumbnail은(는) 무엇을 하나요?

웹사이트, 로컬 웹 프로젝트 또는 단일 아티클을 해당 사이트의 것처럼 보이는 완성된 고해상도 썸네일로 변환합니다. 이미지는 사이트 자체의 자료를 사용하여 HTML/CSS로 구성되고 PNG 및 무손실 WebP로 렌더링됩니다.

원칙

• 사이트에서 영감을 받습니다. 모든 썸네일은 사이트의 시그니처 요소(히어로 비주얼, 구성 요소, 이미지, 모티프, 타이포그래피 및 색상)로 구성된 새로운 작품입니다. 기기 프레임 속 스크린샷은 아홉 가지 구성 중 하나일 뿐이며 기본값이 아닙니다.
• 실제 자료만 사용합니다. 사이트의 실제 로고, 이미지, 텍스트, 숫자, 색상 및 글꼴을 사용합니다. 기능, 가격, 통계 또는 주장을 절대 만들어내지 않습니다.
• 실행당 하나의 결과물. 완전히 자동으로 실행됩니다. 이 스킬이 물을 수 있는 유일한 질문은 입력 → 언어의 언어 질문입니다.

커뮤니케이션

• 조용히 작업합니다. 단계, 발견 사항, 디자인 근거, 재시도 또는 수정 사항을 설명하지 않습니다. 분석은 도구 호출과 brief.md에 남깁니다. 도구 호출 설명은 짧고 중립적으로 유지합니다.
• 필요할 때만 말합니다: 언어 질문, 사용자가 조치해야 하는 차단 문제(사이트에 연결할 수 없음, 프로젝트를 실행할 수 없음), 그리고 최종 전달.
• 세션 언어. 썸네일의 언어와 관계없이 사용자가 작성하는 언어로 모든 사용자 대상 메시지(질문, 옵션, 오류, 최종 답변)를 작성합니다.
• 최종 답변. 이미지를 표시한 다음 PNG 및 WebP 경로와 두 줄에서 네 줄의 짧은 설명을 제공합니다: 구성, 형식, 문장, 카테고리, 로고/색상/글꼴 출처. 편집을 제안하는 한 줄과 다른 형식을 제안하는 한 줄로 마무리합니다(references/formats.md 참조). 프로세스 요약은 없습니다.

설정

경로는 이 스킬의 디렉토리(이 파일이 포함된 폴더)를 기준으로 합니다. SKILL_DIR을 해당 폴더로 정의하고 S=$SKILL_DIR/scripts로 설정합니다.

스크립트	목적
`inspect.mjs <url	file>`
`extract.mjs <url	file> --out `
`extract.mjs <url	file> --out --selector "" --name [--transparent]`
`screenshot.mjs <url	file> --out <file.png> [--width --height --scale --wait]`
render.mjs <file.html> [--out <file.png>]	구성을 2배 크기로 PNG 및 무손실 WebP로 렌더링합니다. 페이지에서 캔버스 크기를 읽고 로드된 글꼴, 실패한 글꼴, 깨진 이미지 및 넘치는 텍스트를 보고합니다.
history.mjs / history.mjs add <site> "<composition>"	최근에 사용된 구성을 표시하거나 기록합니다.

스크립트에는 npm 종속성이 없습니다. 브라우저가 없으면 CHROME_PATH를 설정합니다. macOS에서는 head가 Perl 도구에 의해 가려질 수 있습니다. cat, sed -n 또는 python3로 파일을 읽습니다.

입력

디자인하기 전에 다음 네 가지 입력을 해결합니다.

대상

• URL 모드: 요청에 URL 또는 도메인이 포함되어 있습니다. 출력 폴더: 현재 작업 디렉토리의 ./thumbnail-<domain>/. 요청의 다른 단어는 언어, 형식, 구성 또는 스타일 희망 사항과 같은 참고 사항으로 처리합니다.
• 프로젝트 모드: URL이 없습니다. 대상은 현재 프로젝트입니다. 출력 폴더: 프로젝트 루트의 ./thumbnail/.

모든 실행 파일을 출력 폴더 안에 보관합니다.

페이지 유형 (URL 모드)

먼저 inspect.mjs를 실행하고 page.type을 읽습니다:

• site: 썸네일은 전체 웹사이트에 관한 것입니다.
• article: URL은 단일 아티클, 블로그 게시물, 가이드 또는 뉴스 항목입니다. 썸네일은 사이트의 아이덴티티로 스타일링된 아티클의 주제에 관한 것입니다. 출력 폴더는 ./thumbnail-<domain>-<slug>/를 사용하며, slug는 마지막 경로 세그먼트로 약 40자로 단축됩니다.

감지는 og:type, JSON-LD(Article, BlogPosting, NewsArticle…), 발행일, <article> 요소, 블로그 스타일 URL 경로 및 텍스트 길이를 사용합니다. 사용자의 참고 사항이 이를 재정의합니다: "사이트에 관한"은 사이트를 의미하고, "아티클에 관한" 또는 "주제에 관한"은 아티클을 의미하며, 모든 언어에서 적용됩니다.

언어

콘텐츠 언어를 lang 및 dir, 제목 및 UI 복사본에서 결정합니다. 프로젝트 모드에서는 <html lang> 및 locales/<code> 또는 messages/<code>.json과 같은 로케일 폴더도 확인합니다.

1. 사용자의 참고 사항에 언어가 명시된 경우, 해당 언어를 사용합니다.
2. 사이트에 단일 언어가 있는 경우, 해당 언어를 사용합니다. 아랍어, 페르시아어, 우르두어, 히브리어는 오른쪽에서 왼쪽으로 정렬됩니다.
3. 사이트가 두 개 이상의 언어를 완전히 지원하는 경우, 사용자에게 사용할 언어를 묻습니다. 에이전트에 질문 도구가 있으면 사용하고, 그렇지 않으면 채팅에서 물어보고 대답을 기다립니다. 사이트의 기본 로케일을 권장합니다.
4. 언어가 불분명한 경우, 아랍어를 사용합니다.

문장, 카테고리 및 추가 텍스트는 선택한 언어로 작성됩니다.

형식

• 기본값: 사이트의 경우 포트폴리오 썸네일, 1080 × 720; 아티클의 경우 Open Graph, 1200 × 630.
• 요청 시: 사용자가 플랫폼, 배치, 종횡비 또는 정확한 크기를 지정하는 경우 $SKILL_DIR/references/formats.md로 확인합니다. 해당 파일은 출력 파일 이름, 세로 형식의 안전 영역 및 레이아웃 지침도 제공합니다.
• 모든 형식은 2배 크기로 렌더링되고 PNG 및 무손실 WebP로 내보내집니다.

워크플로우

적은 턴으로 작업하십시오. 각 턴은 전체 대화를 다시 읽기 때문에, 턴 수는 단일 파일보다 비용을 훨씬 더 많이 증가시킵니다. 독립적인 명령을 하나의 셸 호출로 일괄 처리하고, 같은 턴에 독립적인 파일을 병렬로 읽으며, 이미 본 파일이나 이미지를 다시 읽지 마십시오.

1. 대상에 접근 가능하도록 만들기

• URL 모드: URL을 사용합니다.
• 정적 프로젝트 (index.html 및 빌드 단계 없음): 파일 경로를 사용합니다. 에셋이 루트 절대 경로를 사용하는 경우, 백그라운드에서 폴더를 서빙하고(예: python3 -m http.server 4173) http://localhost:4173을 사용합니다.
• 프레임워크 프로젝트 (dev, start 또는 preview가 있는 package.json): node_modules가 없으면 잠금 파일과 일치하는 패키지 관리자를 사용하여 종속성을 설치합니다. 백그라운드에서 개발 서버를 시작하고, 출력에서 포트를 읽고, curl -s -o /dev/null -w "%{http_code}" <url>가 응답할 때까지 기다립니다. 추출이 완료되면 서버를 중지합니다.
• 실행할 수 없음: package.json(homepage) 또는 README에서 배포된 URL을 사용합니다. 없으면 프로젝트 자체의 에셋(이미지, 구성 요소, 스타일)으로 빌드하고 사용자에게 알립니다.

2. 검사, 추출 및 기록 확인 (하나의 명령)

세 가지를 모두 단일 셸 호출로 실행합니다:

mkdir -p <out> && node $S/inspect.mjs <url> > <out>/inspect.json && node $S/extract.mjs <url> --out <out>/extract && node $S/history.mjs

inspect.json이 페이지가 아티클임을 나타내면, 다음 셸 호출에서 폴더 이름을 ./thumbnail-<domain>-<slug>/로 바꿉니다.

3. 콘텐츠 이해 및 아이덴티티 연구 (한 턴)

같은 턴에 inspect.json의 주요 필드를 읽고(전체 파일 대신 짧은 스크립트로 출력) extract/overview.png를 봅니다. 개요는 모든 캡처(히어로, 섹션, 요소, 이미지)의 콘택트 시트이며, 각각 파일 이름으로 레이블이 지정됩니다.

콘텐츠

• 사이트: 무엇인지, 누구를 위한 것인지, 무엇을 제공하는지, 무엇이 사이트 자체처럼 느껴지게 하는지? inspect.json, extract.json을 사용하고, 프로젝트 모드에서는 README, package.json, 랜딩 및 히어로 구성 요소, 로케일 파일, 메타 태그, 매니페스트 및 스타일을 사용합니다.
• 아티클: 아티클이 무엇에 관한 것이며, 독자가 무엇을 얻을 수 있는지? page.article(헤드라인, 설명, 섹션, 태그, 저자, 날짜, 읽기 시간, 부제목, 커버 이미지, 기사 내 이미지, 코드 블록) 및 아티클 텍스트를 사용합니다.
• 페이지 텍스트가 부족한 경우(클라이언트 렌더링 페이지 또는 봇 차단), 웹 가져오기 도구 또는 curl과 같은 다른 방법으로 가져옵니다.

아이덴티티: 개요(및 아티클의 커버 이미지)에서 다음을 확인합니다:

• 분위기와 스타일: 사진, 3D, 플랫 일러스트레이션, 럭셔리, 장난기, 기술, 에디토리얼, 미니멀…
• 시그니처 요소: 사람들이 사이트를 인식하는 두세 가지, 예: 히어로 이미지 또는 객체, 독특한 카드 또는 제품 타일, 모티프, 코드 샘플, 아이콘 세트, 그라데이션, 타이포그래피 처리.
• 토큰: 색상, 페이지 배경, 버튼 색상, 모서리 반경, 그림자, 그라데이션, 제목 스타일, 배지 또는 버튼 스타일.

4. 구성 선택

사용자가 명시적으로 구성을 요청한 경우, 해당 구성을 사용합니다. 사용자가 구성 이름(예: "Component Collage")을 지정하거나 아이디어를 명확히 설명하는 경우(예: "사이트 카드의 콜라주" 또는 "기능 그리드")에 적용됩니다. 모든 언어에서 마찬가지입니다. 해당 구성이 최근에 사용되었더라도 사용하고, 기록 확인을 건너뜁니다. 다른 참고 사항은 여전히 적용됩니다.

그렇지 않으면 직접 선택합니다:

1. 2단계에서 출력된 기록을 사용합니다.
2. $SKILL_DIR/references/compositions.md를 읽고 이 사이트의 시그니처 요소를 가장 잘 표현하는 구성을 선택합니다.
3. 다른 구성이 맞지 않는 한, 지난 두 번의 실행에서 사용된 구성을 피합니다.
4. <out>/brief.md를 작성합니다. 짧게 유지: 아이덴티티 키워드, 시그니처 요소 및 사용할 파일, 선택한 구성 및 이유, 한 줄 레이아웃 스케치.

5. 선택한 에셋을 전체 크기로 열기 (한 턴)

개요는 선택을 위한 것이지 세부 정보 확인을 위한 것이 아닙니다. 디자인에서 사용할 두세 가지 에셋(및 로고)을 알게 되면, 디자인하기 전에 세부 텍스트, 미세한 모티프 및 선명도를 확인하기 위해 한 턴에 모두 병렬로 전체 해상도로 엽니다. 필요한 부분이 감지되지 않은 경우, 같은 턴에 extract.mjs --selector로 캡처합니다.

6. 콘텐츠 작성

문장

• 사이트: 사이트가 제공하는 것과 그 중요성. 아랍어는 5–10단어, 영어 또는 다른 언어는 6–12단어를 사용합니다. 자연스러운 마케팅 카피를 작성하고 마침표로 끝내지 않으며, 사이트 이름을 반복하지 않습니다.
• 아티클: 아티클의 핵심 아이디어, 맞추기 위해 축약된 헤드라인 또는 충실한 한 줄 요약. 아랍어는 5–12단어, 다른 언어는 6–14단어를 사용합니다. 아티클에 없는 내용은 추가하지 않습니다.
• 세 줄에 맞아야 합니다. 사이트의 강조 색상이나 제목 처리를 사용하여 한 개에서 세 개의 키워드를 강조할 수 있습니다.

카테고리

• 썸네일 언어로 두세 단어.
• 사이트: 제품 종류, 예: 온라인 스토어, 이러닝 플랫폼, 회사 웹사이트, SaaS 대시보드, 예약 플랫폼 또는 포트폴리오.
• 아티클: 아티클의 섹션 또는 주제, 예: 가이드, 사례 연구, 튜토리얼 또는 주제 자체.

아티클 추가 정보 (선택 사항)

• 저자, 날짜 및 읽기 시간을 작게 설정합니다. 페이지의 실제 값만 사용합니다.

로고

• 항상 실제 로고를 사용하고, 사용하기 전에 봅니다.
  • 프로젝트: public/, static/, assets/, src/assets/ 및 app/에서 logo*.{svg,png,webp}, icon*.svg, favicon.svg, apple-touch-icon.png 및 icon-512*.png, 매니페스트 아이콘 및 인라인 로고 구성 요소를 찾습니다.
  • URL: inspect.json을 사용: logoSvgs(인라인 SVG), logoBackgrounds(CSS 배경으로 그려진 로고, 종종 준비된 SVG), logoImgs 및 icons. 벡터 또는 투명 로고를 선호합니다. 최후의 수단으로만 extract/elements/*-header.png에서 자르는데, 자르면 페이지 배경이 포함되기 때문입니다. 파일을 출력 폴더에 저장합니다.
• currentColor 또는 CSS 변수를 사용하는 인라인 SVG에는 실제 채우기 색상이 필요합니다. 대비를 위해 필요한 경우가 아니면 로고 뒤에 상자나 배경을 넣지 마십시오: 밝은 로고는 어두운 영역에, 어두운 로고는 밝은 영역에.
• 아티클의 경우 로고는 작은 시그니처이지 히어로가 아닙니다.
• 로고가 없으면 아이디어를 표현하는 Lucide 아이콘(https://cdn.jsdelivr.net/npm/[email protected]/icons/<name>.svg)을 브랜드 색상으로 스타일링하여 사용합니다. 가짜 로고를 절대 그리지 마십시오.

7. 글꼴

• 출처: extract/fonts.css(사이트 자체 @font-face 규칙, 글꼴 파일이 다운로드됨) 및 extract.json(fonts.google). 프로젝트 모드에서는 next/font, @font-face 규칙, Google Fonts 가져오기, Tailwind fontFamily 설정 및 public/fonts의 글꼴 파일도 확인합니다.
• 로드: 캔버스의 Noto Sans 링크 바로 뒤에 <link>를 추가한 다음 --font: "<Site Font>", "Noto Sans Arabic", "Noto Sans", sans-serif를 설정합니다.
• 커버리지 확인: 글꼴이 썸네일 스크립트를 지원해야 합니다. 라틴어 전용 글꼴은 아랍어 텍스트를 렌더링할 수 없으므로 Noto Sans Arabic으로 폴백합니다. 디스플레이 글꼴에 가중치가 하나만 있는 경우 해당 가중치를 사용하고, 가짜 볼드를 절대 사용하지 마십시오.
• 폴백: render.mjs가 보고하는 fonts 목록에서 글꼴이 누락되었거나 failedFonts에 나타나면 Noto Sans Arabic 또는 Noto Sans를 대신 사용합니다.

8. 빌드 및 렌더링

1. $SKILL_DIR/assets/canvas.html을 <out>/<name>.html에 복사합니다. 이름은 기본 형식의 경우 thumbnail이고 다른 형식의 경우 thumbnail-<preset>입니다.
2. 첫 번째 :root 규칙에서 --w 및 --h로 캔버스 크기를 설정합니다(기본값은 1080px × 720px). 해당 모양에 맞게 디자인을 배치하고, 세로 형식의 경우 텍스트를 안전 영역 안에 유지합니다.
3. 일반 HTML 및 CSS로 디자인합니다. 인라인 SVG는 환영합니다.
   • <style> 블록 끝에 있는 디자인 변수와 .canvas 배경 규칙을 바꾼 다음, 그 후에 자신의 규칙을 추가합니다.
   • 마크업을 <div class="canvas"> 안에 넣고 닫는 <script>는 변경하지 않고 그대로 둡니다.
   • 에셋을 extract/images/…, extract/elements/… 및 logo.png와 같은 상대 경로로 참조합니다.
4. 렌더러용 텍스트 표시:
   • 문장의 data-fit="3"은 세 줄에 맞을 때까지 축소합니다. data-min은 가장 작은 크기를 설정하며, 형식의 읽을 수 있는 최소 크기 아래로 내려가지 않습니다.
   • 텍스트 요소의 data-text="<name>"은 렌더러가 오버플로를 보고하도록 합니다.
   • 읽기 위한 것이 아닌 텍스트(타입으로 설정된 로고, 큰 배경 단어 등)에는 data-decor를 사용합니다.

9. 게재

1. render.mjs를 실행하고 thumbnail.png 및 thumbnail.webp를 <out>/에 출력합니다.
2. 모든 것이 좋아 보이면 게재합니다. 이미지에 문제가 있으면(잘린 텍스트, 깨진 이미지, 로드되지 않은 글꼴, 레이아웃 문제, 해상도가 나쁜 에셋) 수정하고 1초 이상 기다리지 말고 다시 렌더링합니다.
3. 사용자 인터페이스를 통해 메시지를 보내 이미지를 표시합니다.
4. PNG 및 WebP 경로를 공유합니다.
5. 다음을 포함합니다:
   • 한 줄 구성과 사용한 형식.
   • 한 줄 마케팅 문장.
   • 한 줄 카테고리.
   • 한 줄 출처: 로고, 색상 및 글꼴을 어디서 가져왔는지.
   • 한 줄 편집 제안.
   • 한 줄 다른 형식 제안(references/formats.md 참조).

참조

• $SKILL_DIR/references/compositions.md: 각 구성에 대한 설명 및 예시.
• $SKILL_DIR/references/formats.md: 지원되는 모든 형식, 크기, 안전 영역 및 출력 파일 이름.
• $SKILL_DIR/assets/canvas.html: 캔버스 HTML 템플릿.
• $SKILL_DIR/scripts/: 모든 스크립트.

예시

사용자: "내 포트폴리오 사이트 썸네일 만들어줘"

출력:

• 구성: 히어로 그래디언트
• 형식: 포트폴리오 (1080×720)
• 문장: 최고의 프론트엔드 프로젝트를 만나보세요
• 카테고리: 포트폴리오 웹사이트
• 로고: 헤더에서 가져옴, 색상: CSS 변수, 글꼴: Inter
• 편집을 원하시면 말씀해주세요.
• 다른 형식: Open Graph (1200×630)도 사용 가능합니다.

제한 사항

• 이 스킬은 고해상도(2배) 이미지를 생성하므로 파일 크기가 클 수 있습니다.
• 동적 콘텐츠가 많은 사이트의 경우 추출이 완전하지 않을 수 있습니다.
• 복잡한 레이아웃의 경우 수동 조정이 필요할 수 있습니다.
• 모든 브라우저 기능이 지원되는 것은 아닙니다(WebGL, Canvas 2D 등).