hubeiqiao/apple-bento-grid

Apple Bento Grid

문제

시각적으로 세련된 프레젠테이션 그래픽을 만들려면 일반적으로 Figma나 Keynote 같은 디자인 도구가 필요합니다. 이 스킬은 Apple 품질의 벤토 그리드 레이아웃을 자체 포함 HTML 파일로 생성하여 스크린샷을 찍으면 픽셀 완벽한 이미지로 변환됩니다. 디자인 도구가 필요 없습니다.

개요

Apple 스타일의 벤토 카드 그리드를 렌더링하는 단일 HTML 파일을 생성합니다. 각 출력은 인라인 CSS가 포함된 하나의 HTML 파일이며 Google Fonts 외에는 의존성이 없습니다. 카드는 최소 간격으로 타이트한 CSS 그리드를 채우며 Playwright를 사용하여 2배 해상도로 스크린샷을 내보낼 수 있습니다. 라이트 및 다크 테마를 모두 사용할 수 있습니다.

워크플로우

1. 디자인 시스템을 선택적으로 참조하십시오: 필요에 따라 design-system.md를 참조하십시오.
   • 항상 읽어야 할 내용: 섹션 2 (제로갭 그리드) + 섹션 3 (레이아웃 템플릿) — 그리드 기본 구성
   • 카드 유형별로 읽어야 할 내용: 사용 중인 카드에 따라 섹션 5.1–5.7
   • 테마별로 읽어야 할 내용: 섹션 1 (라이트 토큰) 또는 섹션 9 (다크 토큰)
   • 첫 생성 시 한 번 읽어야 할 내용: 섹션 8 (HTML 스켈레톤) — 구조적 시작점
2. 사용자의 콘텐츠를 수집하십시오 — 어떤 통계, 마일스톤, 카테고리 및 인용문을 보여줄지
3. 테마를 선택하십시오 — 상황에 따라 라이트, 다크 또는 둘 다 제안하십시오 (아래 테마 선택 참조)
4. 레이아웃을 선택하십시오 — 카드 수와 방향에 따라 3가지 레이아웃 템플릿 중에서 선택하십시오
5. 카드를 구성하십시오 — 카드 유형을 선택하고 사용자의 콘텐츠로 채우십시오; 밀도를 우선시하십시오 (빈 공간이 느껴지는 카드 없음)
6. 로고/이미지에 대해 물어보십시오 — 사용자에게 로고나 이미지가 있는 경우 이를 통합하십시오 (아래 로고 및 이미지 참조)
7. HTML을 생성하십시오 — 하나의 자체 포함 HTML 파일을 생성하십시오
8. 시각적 검토 — 브라우저에서 HTML을 열고 문제가 없는지 스크린샷을 확인하십시오 (아래 시각적 검토 참조)
9. 세로 버전을 제공하십시오 — 가로 그리드를 생성한 후 "소셜 미디어용 세로(portrait) 버전을 원하십니까?"라고 묻고 동의하면 템플릿 C를 조정하여 생성하십시오
10. 스크린샷 (선택 사항) — Playwright 스크립트를 사용하여 2배 해상도로 PNG를 캡처하십시오

시각적 검토

HTML을 생성한 후 항상 출력을 확인하여 사용자에게 제시하기 전에 시각적 문제를 발견하십시오. Playwright, 브라우저 MCP 도구 또는 open 명령을 사용하여 파일을 렌더링한 후 다음을 확인하십시오.

고립된 줄 — 핀 태그 하나나 단어가 단독으로 새 줄로 넘어가는 경우. 핀 하나를 제거하여 나머지 핀이 균일하게 채워지도록 하거나 두 줄을 가득 채울 만큼 핀을 추가하여 수정하십시오.

빈 공간 — 너무 많은 여백으로 인해 카드가 듬성듬성해 보이는 경우. 카드를 채우기 위해 부제, 배지 또는 추가 설명 텍스트를 추가하여 수정하십시오.

텍스트 오버플로우 — 숫자나 레이블이 카드 너비에 비해 너무 긴 경우. 글꼴 크기를 줄이거나 약어를 사용하여 수정하십시오 (예: "$2,400,000" 대신 "$2.4M").

깨진 그리드 — 눈에 띄는 행 간격이나 정렬되지 않은 카드가 있는 경우. 확인 사항: align-items: start 없음, 간격이 정확히 6px, 모든 그리드 셀이 채워져 있음.

폰트 폴백 — Sora/DM Sans 대신 시스템 폰트로 텍스트가 렌더링되는 경우. Google Fonts 링크가 존재하고 페이지에 네트워크 액세스 권한이 있는지 확인하십시오.

스크린샷 잘림 — 내보낸 PNG에서 카드의 오른쪽 또는 아래쪽 가장자리가 잘리는 경우. 뷰포트 너비가 그리드 CSS 너비와 정확히 일치하고 클립이 boundingBox()의 box.x/box.y를 사용하는지 확인하고 x: 0, y: 0을 사용하지 마십시오.

문제가 발견되면 HTML을 수정하고 다시 확인하십시오. 시각적 검토를 통과할 때까지 사용자에게 제시하지 마십시오.

테마 선택

상황에 따라 테마를 제안하십시오. 확실하지 않으면 둘 다 생성하십시오.

상황	제안 테마
슬라이드 데크 / 프레젠테이션	다크 — 프로젝터에서 시각적 임팩트가 더 높음
소셜 미디어 / 포트폴리오	다크 — 피드에서 돋보임
보고서 / 문서 삽입	라이트 — 흰색 페이지 배경과 일치
인쇄 / PDF	라이트 — 잉크 절약, 가독성 향상
사용자가 "Apple 스타일"이라고 말한 경우	라이트 — Apple의 시그니처 룩
사용자가 "모던" 또는 "세련된"이라고 말한 경우	다크 — 현대적인 느낌
선호도 없음	둘 다 — 두 파일을 생성하고 사용자가 선택하도록 함

전체 다크 테마 토큰은 design-system.md 섹션 9, 라이트 테마 토큰은 섹션 1을 참조하십시오.

출력 형식

항상 단일 자체 포함 HTML 파일을 생성하십시오:

• <!DOCTYPE html> + <html lang="en">
• <head> 내 Google Fonts <link> 태그
• 모든 CSS는 단일 <style> 블록 내
• 모든 콘텐츠는 <body> 내 — JavaScript 불필요

사용 가능한 카드 유형

카드	용도	주요 기능
Hero	태그라인, 헤드라인	그라데이션 상단 테두리, 2행에 걸침
Stat	숫자 + 레이블	카테고리별 색상 코드 강조
Category	그룹화된 항목 (단계, 팀, 분기)	색상 레이블 + 부제 + 핀 태그
Bar Chart	시간 경과에 따른 성장 / 비교	그라데이션 막대, 헤더 배지
Badge	도구 속성, 주요 콜아웃	아이콘 핀 + 통계 숫자
Quote	미션 스테이트먼트, 추천사	다크 배경, 흰색 텍스트, 녹색 <em>
Highlight	주요 숫자 (3x, 10x, 100%)	전체 그라데이션 배경

레이아웃 템플릿

템플릿	열	너비	종횡비	가장 적합한 경우
A: 가로	4열	1200px	52/25	12-16개 카드, 슬라이드
B: 가로	3열	1100px	52/22	8-10개 카드, 집중
C: 세로	2열	600px	없음 (콘텐츠)	8-14개 카드, 소셜

중요: 제로갭 그리드 규칙

Apple과 같은 외관을 위해 다음 5가지 규칙이 필수입니다. 자세한 내용은 design-system.md 섹션 2를 참조하십시오.

1. 절대 align-items: start를 설정하지 마십시오 — 기본 stretch가 셀을 채웁니다
2. 가로 레이아웃에서는 aspect-ratio를 사용하여 컨테이너 모양을 고정하십시오
3. 행: 가로의 경우 1fr, 세로의 경우 auto
4. 간격: 6px (8px 아님)
5. 모든 그리드 셀이 채워져야 합니다 — 빈 셀 없음

스크린샷 내보내기

scripts/screenshot.mjs의 Playwright 스크립트를 사용하여 픽셀 완벽한 PNG를 캡처하십시오.

cd scripts
npm install
npx playwright install chromium
node screenshot.mjs

screenshot.mjs의 pages 배열을 편집하여 HTML 파일을 가리키도록 하십시오. 각 항목에는 file (HTML 경로), output (PNG 경로), viewportWidth (그리드 너비와 일치)가 필요합니다.

중요: 뷰포트가 그리드 너비와 일치해야 합니다. 뷰포트가 그리드보다 넓으면 그리드가 중앙에 정렬되고 클립이 오른쪽 가장자리를 자를 수 있습니다. 항상 viewportWidth를 정확한 그리드 CSS 너비로 설정하십시오 (4열 1200, 3열 1100, 2열 600).

중요: 클립은 요소 위치를 사용해야 합니다. 그리드 요소를 클리핑할 때 x: 0, y: 0 대신 boundingBox()의 box.x와 box.y를 사용하십시오. 더 넓은 뷰포트에서 그리드가 중앙에 정렬된 경우 x: 0은 그리드 전에 클립을 시작하여 오른쪽을 자릅니다.

스크린샷을 찍은 후 항상 출력 이미지를 확인하여 가장자리가 잘리지 않았는지 확인하십시오. 가장 오른쪽과 가장 아래쪽 카드가 테두리 반경이 손상되지 않고 완전히 보이는지 확인하십시오.

로고 및 이미지

사용자는 자신의 로고나 이미지를 벤토 그리드 카드에 추가할 수 있습니다. 사용자에게 포함할 로고나 이미지가 있는지 물어보십시오.

배치 옵션:

위치	방법	가장 적합한 경우
Hero 카드 모서리	<img>와 position: absolute; top: 20px; right: 20px; width: 40px; 사용	회사 로고
Badge 카드 아이콘	.badge-pill의 SVG를 <img> 태그로 교체 (width: 16px; height: 16px; border-radius: 4px;)	도구/프레임워크 로고
전체 카드 배경	background-image: url(...)와 텍스트 가독성을 위한 오버레이 그라데이션 사용	기능 스크린샷
독립 이미지 카드	object-fit: cover; border-radius: 18px;로 카드를 채우는 <img> 사용	제품 사진

지침:

• 로컬 파일 경로와 함께 <img src="path/to/file.png">를 사용하십시오 — HTML은 호스팅이 아닌 스크린샷 내보내기용입니다
• 로고를 작게 유지하십시오 (24–48px) — 카드를 지배하지 않도록
• 다크 테마의 경우 로고가 어두운 배경에서 작동하는지 확인하십시오 (흰색/라이트 버전 사용)
• 접근성을 위해 항상 alt 텍스트를 추가하십시오

콘텐츠 적응

사용자 데이터	권장 템플릿	카드 구성
3–5개 통계, 카테고리 없음	C (2열 세로)	Hero 1개 + 통계 3–5개 + 인용문 1개
6–8개 통계, 1–2개 카테고리	B (3열 가로)	Hero 1개 + 통계 4–6개 + 카테고리 1–2개 + 차트 1개
8–12개 통계, 3개 이상 카테고리	A (4열 가로)	전체 조합: Hero, 통계, 카테고리, 차트, 배지, 인용문, 하이라이트
소셜 / 세로 형식	C (2열 세로)	모든 조합, 더 작은 글꼴

밀도 규칙: 모든 카드는 가득 차 있어야 합니다. 카드가 듬성듬성해 보이면 부제, 배지 또는 핀 태그를 추가하십시오. 그리드에 눈에 띄는 빈 공간이 있으면 카드를 셀에 걸치거나 지원 카드를 추가하십시오.

사용자 정의 체크리스트

1. 콘텐츠 수집 — 통계, 카테고리, 마일스톤, 인용문
2. 테마 선택 — 라이트, 다크 또는 둘 다
3. 레이아웃 선택 — 4열, 3열 또는 2열
4. 그리드 영역 이름 지정 — 콘텐츠와 일치하는 읽기 쉬운 이름
5. 카드 유형 선택 — Hero, 통계, 카테고리, 차트, 배지, 인용문, 하이라이트
6. 강조 색상 지정 — 카테고리당 하나, 최대 3–4개 강조
7. 치수 설정 — 뷰포트 너비가 그리드 너비와 일치
8. 종횡비 고정 — 가로에만 해당; 세로는 생략
9. 밀도 확인 — 빈 공간이 느껴지는 카드 없음, 사용하지 않은 그리드 셀 없음, 간격 6px
10. 방향에 따른 크기 조정 — 세로는 더 작은 글꼴, 패딩, 반경
11. 스크린샷 — Playwright 2배, 뷰포트가 그리드 너비와 일치

확인

벤토 그리드 HTML 파일을 생성한 후:

1. Chrome 또는 Safari에서 열기 — 모든 그리드 셀이 채워져 있고 눈에 띄는 행 간격이 없는지 확인
2. 폰트 로딩 확인 — Sora 및 DM Sans가 렌더링되어야 함 (시스템 폴백 아님)
3. 다크 테마의 경우 — 카드 배경이 #1a1a1a인지 확인 (#fff 아님)
4. 올바른 뷰포트 너비 (1200/1100/600)에서 2배 해상도로 스크린샷
5. 밀도 확인 — 과도한 여백이 있는 카드 없음

참고 사항

• Google Fonts는 인터넷 액세스가 필요합니다. 오프라인에서는 그리드가 시스템 폰트로 폴백됩니다.
• Playwright 스크린샷은 선택 사항입니다. 사용자는 수동으로 브라우저 스크린샷을 찍을 수 있습니다.
• aspect-ratio는 가로 레이아웃에만 해당됩니다. 세로 레이아웃은 콘텐츠 높이에 따라 흐릅니다.
• Apple과 같은 절제된 느낌을 유지하기 위해 그리드당 최대 3–4개의 강조 색상
• 이 스킬은 대화형 대시보드가 아닌 스크린샷 내보내기용 정적 HTML을 생성합니다.
• 데이터 포인트가 6개 미만인 그리드의 경우 템플릿 C (2열 세로)가 일반적으로 가장 적합합니다.

참조 파일

• design-system.md — 전체 디자인 토큰 (라이트 + 다크), 카드 CSS/HTML, 레이아웃 템플릿 및 스켈레톤
• scripts/screenshot.mjs — Playwright 스크린샷 캡처 스크립트