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

목적

두 단계로 캐러셀 포스트를 제작합니다. 1단계에서는 사용자와 함께 디자인 시스템(브랜드 토큰 + 레이아웃 패턴 라이브러리)을 고정합니다. 2단계에서는 해당 패턴을 조합하여 각 캐러셀을 구성합니다. 슬라이드별 패턴 선택, 카피 작성, 이미지 배치, 품질 게이트 통과 렌더링을 수행합니다.

토큰을 고정하고 구성을 자유롭게 하십시오. 이것이 모든 캐러셀이 템플릿처럼 보이지 않으면서도 브랜드 아이덴티티를 유지하는 방법입니다.

템플릿 사용하기 (기본 경로)

templates/ 디렉토리에는 6개의 즉시 사용 가능한 템플릿이 포함되어 있습니다. 각 템플릿은 색상, 폰트, 라이트/다크 토큰이 고정된 룩(look)과 슬라이드 스켈레톤으로 구성되어 있어 온보딩이 필요하지 않습니다. 미리보기 갤러리는 README.md에 있습니다.

트리거: "템플릿 3", "템플릿 no 3", "template 3 사용", "템플릿 2를 ...에 사용", 또는 템플릿 이름("morning cup"). templates/NN-slug/template.json에서 번호 또는 이름을 매칭합니다.

템플릿별 파일: tokens.css (스킨), template.json (이름, 폰트, 크기, 패턴과 모드가 포함된 슬라이드 시퀀스), sample.html (참고할 수 있는 완성된 샘플 캐러셀).

템플릿 확인. templates/NN-slug/template.json을 읽습니다. 사용자가 번호를 제공하지 않았고 맞춤 시스템도 없으면 template.json 파일에서 모든 템플릿(번호, 이름, 분위기)을 나열하고 선택하도록 요청합니다. 알 수 없는 번호도 동일한 목록을 제공합니다.
브리프 수집. 한 번에 하나의 메시지로 누락된 정보를 요청합니다: 주제 및 앵글(필수), 브랜드 이름 및 핸들(사용자가 거절하면 템플릿 플레이스홀더 사용), 슬라이드 개수(기본값은 시퀀스 길이, 5~10 허용), 배치 맵이 포함된 이미지(선택 사항, 6단계 참조). 캐러셀 언어는 브리프 언어를 따릅니다. 마크업의 모든 고정 문자열도 번역합니다: "Myth", "Fact", "Save this", 그리고 NN / TT 푸터는 유지되지만 단어는 변경됩니다.
시퀀스 계획 수립. 템플릿 sequence에서 시작합니다. 첫 번째 슬라이드는 커버, 마지막 슬라이드는 테이크어웨이로 유지하고 각 슬라이드의 모드는 목록대로 유지합니다. 슬라이드 개수가 다를 경우 중간 슬라이드를 시퀀스 순서대로 드롭하거나 반복하며, 모드가 번갈아 가며 인접한 두 슬라이드가 동일한 패턴을 공유하지 않도록 합니다. 중간 패턴은 콘텐츠가 다른 패턴에 더 잘 맞을 때 교체합니다 (숫자는 stat-band 또는 big-number, 단계는 process-steps, 한 줄은 quote), 해당 슬라이드의 모드는 유지합니다. 검증된 커버 이미지가 제공된 경우에만 cover-split을 사용합니다. 배치된 이미지는 슬라이드의 .photo 슬롯(아래 참조)에 들어가거나, 사진이 핵심인 경우 image-hero 슬라이드에 들어갑니다. 계획을 슬라이드 번호, 패턴, 모드, 한 줄 콘텐츠 목록으로 작성한 후 빌드합니다.
카피 작성 아래 카피 표준에 따라 작성합니다. 모든 샘플 라인을 교체합니다. 샘플 주제의 어떤 내용도 남아 있어서는 안 됩니다.
HTML 빌드. 선택한 템플릿의 sample.html을 복사하여 carousels/<slug>/index.html을 생성합니다. tokens.css 링크만 ../../templates/NN-slug/tokens.css로 변경합니다. fonts.css와 system.css 링크는 해당 깊이에서 이미 해결됩니다. 계획에 따라 <section> 블록을 유지하거나 제거하고, 추가된 슬라이드는 design-system/patterns.html에서 패턴 블록을 복사하며, 계획에 따라 mode-dark 클래스를 적용하고, 브랜드, 핸들 및 NN / TT 카운터를 채웁니다.
이미지는 아래 2단계 4단계의 하드 게이트를 통과합니다. 로컬 복사본을 carousels/<slug>/images/에 넣고 출처를 carousels/<slug>/provenance.log에 기록합니다.
렌더링 템플릿의 크기와 폰트를 사용하여 template.json에서:

python3 scripts/render_carousel.py --html carousels/<slug>/index.html --out carousels/<slug>/ \
    --width 1080 --height 1440 --slides <N> --check-fonts "<fonts from template.json, comma separated>"

모든 게이트를 통과할 때까지 HTML을 수정합니다. 게이트를 절대 포기하지 마십시오. 8. 최종 시각적 확인 2단계 7단계와 동일하게 진행한 후 slide_01.jpg부터 slide_NN.jpg를 전달합니다. 템플릿은 모드가 템플릿에서 제공되므로 last-used.json이 필요하지 않습니다.

폰트는 fonts/에 번들로 제공되므로 Playwright 외에는 설치가 필요하지 않습니다.

템플릿 6개 대신 자신만의 룩을 원하는 사용자는 아래 맞춤 경로를 사용합니다.

맞춤 디자인 시스템 (선택적 경로)

이 경로는 사용자가 템플릿을 선택하는 대신 자신만의 룩을 요청하거나 참조 스크린샷이나 HTML을 보낼 때만 사용합니다. 템플릿이 선택되지 않았고 고정된 디자인 시스템도 없으면 먼저 템플릿을 제안하고, 사용자가 맞춤 시스템을 원할 경우에만 아래 온보딩을 실행합니다. 이 경로가 실행될 때 디자인을 시작하지 마십시오. 먼저 온보딩 대화 상자를 엽니다. 다음 순서대로 한 번에 한 가지 질문을 하고 각 질문에 대해 나열된 선택지를 제시합니다. 언제든지 맞춤 답변을 받아들입니다. 7개의 질문 후 디자인을 시작합니다. 사용자가 답변 대신 스크린샷이나 HTML 참조를 보내면 대화 상자를 건너뛰고 1단계, 옵션 B로 이동합니다.

스타일. "캐러셀의 분위기는 어떻게 할까요?" 선택지: 유쾌하고 친근한 / 깔끔하고 미니멀한 / 대담하고 강렬한 / 따뜻하고 우아한 / 어둡고 프리미엄.
색상. "색상 분위기를 골라주세요." 선택지: 따뜻한 어스 (브라운, 크림, 오렌지) / 신선한 내추럴 (그린, 크림) / 오션 칼 (블루, 화이트) / 대담한 대비 (블랙, 화이트, 하나의 강한 악센트) / 소프트 파스텔.
폰트. "글꼴 느낌을 골라주세요. 폰트 이름을 알 필요는 없습니다." 선택지: 둥글고 유쾌한 / 우아한 세리프 / 대담하고 모던한 / 깔끔하고 심플한. 내부적으로 매핑하고, 폰트 이름을 절대 보여주지 마십시오: rounded-playful → Baloo 2 + Quicksand; elegant-serif → Playfair Display + Plus Jakarta Sans; bold-modern → Albert Sans + Plus Jakarta Sans; clean-simple → Plus Jakarta Sans + Quicksand. 다섯 패밀리 모두 fonts/에 번들로 제공됩니다: 캐러셀 HTML에서 fonts/fonts.css를 링크하십시오.
브랜드. "워터마크용 브랜드 이름과 핸들은?" 자유 텍스트, 한 메시지. 예: "Morning Cup / @morningcup".
주제. "캐러셀은 주로 무엇에 관한 것인가요?" 자유 텍스트, 한 줄. 카피 톤과 샘플 콘텐츠를 설정합니다.
언어. "인도네시아어 또는 영어?" 두 가지 선택지. 모든 고정 문자열(킥커, CTA, 푸터)을 설정합니다.
시스템 이름. "이 디자인 시스템을 뭐라고 부를까요?" 자유 텍스트, 한 메시지. 브랜드와 스타일에서 기본값을 제안합니다(예: "morningcup-playful"). 사용자가 여러 시스템을 유지하고 캐러셀당 하나를 선택할 수 있으므로 이름이 중요합니다.

일곱 번째 답변 후 고정된 선택 사항을 한 짧은 메시지로 요약한 다음 1단계로 이동합니다.

1단계: 디자인 시스템 고정

두 가지 진입 방법이 있습니다. 하나를 선택하십시오.

A. 온보딩 답변에서 생성. design-system/system.css의 :root 토큰을 브랜드(색상, 폰트, 반경)로 설정합니다. 해당 토큰으로 세 가지 샘플 패턴(커버 1개, 본문 1개, 클로저 1개)을 렌더링하고 사용자에게 보여줍니다. 승인될 때까지 반복합니다.

B. 참조에서 적용. 사용자가 마음에 드는 캐러셀의 스크린샷이나 HTML 파일을 보냅니다. 색상 역할, 서체 스케일, 간격 리듬, 반복 요소를 연구합니다. 학습한 내용을 :root 토큰으로 인코딩한 다음 샘플 패턴을 렌더링합니다. 승인될 때까지 반복합니다.

승인 게이트. 시스템은 사용자가 렌더링된 샘플을 승인한 후에만 프로덕션에 들어갑니다. 시스템 이름으로 저장합니다(예: design-systems/morningcup-playful/, system.css, patterns.html, last-used.json 포함). 나중에 다른 시스템을 구축하려면 온보딩 대화 상자를 질문 1부터 다시 실행합니다.

2단계: 캐러셀 구성

1. 브리프 수집

시작하기 전에 명확히 하십시오. 누락된 사항이 있으면 물어보십시오. 추측하지 마십시오.

하나의 훅 문장으로 된 주제 및 앵글.
디자인 시스템: 사용할 고정 시스템. 기본값은 가장 최근에 승인된 시스템입니다. 여러 개가 존재하면 물어보십시오. (템플릿 경로에서 템플릿이 디자인 시스템입니다.)
슬라이드 개수(기본값 6-10) 및 크기(기본값 1080x1440, system.css가 렌더링하는 크기이며, 다른 높이는 일치하는 .slide 높이 재정의가 필요합니다).
이미지. 각 이미지에 대해: 소스(업로드된 파일 경로, 직접 URL 또는 아티클 URL), 대상 슬라이드 및 역할(히어로, 스플릿 또는 인라인). 명시적인 배치 맵이 없으면 이미지를 사용하지 않습니다.

2. 구성 계획 수립

시스템의 last-used.json과 design-system/PATTERNS.md의 패턴 카탈로그를 읽습니다. 슬라이드당 하나의 패턴을 할당합니다:

하나의 커버 패턴으로 열고, 하나의 클로저 패턴으로 닫습니다.
인접한 두 슬라이드가 동일한 패턴을 공유하지 않습니다.
동일한 브랜드의 이전 캐러셀에서 커버 패턴을 절대 반복하지 않습니다.
패턴을 콘텐츠와 일치시킵니다: 숫자는 stat-band 또는 big-number, 시퀀스는 process-steps, 한 줄은 quote. 콘텐츠를 무리하게 패턴에 맞추지 마십시오.
두 모드를 슬라이드 전체에 번갈아 가며 사용합니다: 슬라이드에 mode-dark를 할당하거나 라이트로 두어 인접한 두 슬라이드가 동일한 모드를 공유하지 않도록 합니다. 이전 캐러셀의 첫 번째 슬라이드와 반대 모드로 시작합니다(last-used.json 읽기). 하나의 캐러셀은 라이트로 열리고 다음은 다크로 열릴 수 있습니다. 콘텐츠가 어떤 슬라이드가 다크가 되어야 하는지 안내하도록 하십시오: 대비 쌍(신화 대 사실, 문제 대 해결책)은 자연스러운 다크 슬라이드입니다. 계획을 슬라이드 번호, 패턴 이름, 모드, 한 줄 콘텐츠의 간단한 목록으로 작성한 후 빌드하십시오.

3. 카피 작성

슬라이드당 하나의 아이디어. 헤드라인은 8단어 미만으로 유지합니다. 본문은 슬라이드당 25단어 미만으로 유지합니다. 아래 카피 표준을 따릅니다.

4. 이미지 수집 및 검증 (하드 게이트)

모든 이미지를 로컬 images/ 폴더에 다운로드하거나 복사합니다. 렌더링 중에 핫링크를 절대 사용하지 마십시오.
사용하기 전에 각 이미지를 확인합니다. 슬라이드 주제와 내용이 일치하지 않거나, 워터마크나 외부 로고가 있거나, 흐릿하거나, 큰 사용을 위해 최단변이 900px 미만인 경우 거부합니다.
출처(소스 URL 또는 업로드 파일 이름)를 provenance.log에 기록합니다.
생성형 AI 이미지를 절대 사용하지 않습니다. 이 스킬은 예외 없이 이미지를 생성하지 않습니다.

사진 슬롯. 본문 패턴에 사진을 추가하려면 해당 슬라이드 .content의 마지막 자식으로 <figure class="photo"><img src="images/<file>.jpg" alt="..."></figure>를 넣습니다. 콘텐츠 너비에 16:10 비율로 크기가 조정되며 템플릿의 반경과 색상을 사용합니다. myth-fact 또는 big-number와 같은 밀도 높은 슬라이드에서는 class="photo wide" (5:2) 또는 class="photo band" (3:1)를 사용하고, style="--focus:50% 40%"로 크롭 포인트를 설정하며, 스크림 위에 캡션을 위해 <figcaption>을 사용합니다. 두 장의 사진에는 class="photos short" (4:3)와 함께 두 개의 <figure class="photo">(정사각형, 나란히, two-cards와 동일한 거터)를 포함하는 <div class="photos">를 사용하거나 밀도 높은 슬라이드에서 사용합니다. 히어로 스타일 슬라이드의 경우 사진을 상단에 가장자리에서 가장자리로 배치합니다: <section> 클래스에 photo-top을 추가하고, 거기에 style="--bleed-h:600px"를 적용하며, <figure class="photo-bleed"><img ...></figure>를 첫 번째 자식으로 추가합니다. 상단바는 스크림 위에서 흰색으로 바뀌고 콘텐츠는 사진 아래에서 시작됩니다. 밀도 높은 슬라이드(myth-fact, big-number)에서는 약 --bleed-h:440px를 사용합니다. 상단바가 사진 위에 위치하므로 상단 가장자리가 조용한 사진을 선택하십시오. 슬라이드가 여전히 오버플로우 게이트를 통과하고 콘텐츠 위아래로 최소 40px의 여백을 유지하는지 확인하십시오.

5. HTML 빌드

고정된 system.css( <style> 콘텐츠 복사 또는 파일 링크)에서 시작하고 patterns.html에서 선택한 <section> 블록을 복사합니다. 카피 및 이미지 슬롯을 채웁니다. HTML에 상대적인 로컬 경로로 이미지를 참조합니다. 캐러셀당 새로운 레이아웃을 발명하지 마십시오. 브리프에 어떤 패턴도 다루지 않는 구조가 필요한 경우, 이는 2단계에서 즉흥적으로 해결할 문제가 아니라 1단계 논의 사항입니다.

6. 품질 게이트로 렌더링

scripts/render_carousel.py 실행:

python3 scripts/render_carousel.py --html <file.html> --out <dir-output> \
    --width 1080 --height 1440 --slides 6 \
    --check-fonts "Plus Jakarta Sans"

(브리프 및 시스템 토큰에 따라 너비, 높이, 슬라이드 및 폰트를 조정합니다.) 스크립트는 .slide 개수가 요청과 다르거나, 콘텐츠가 영역을 넘치거나, 슬라이드 경계 상자가 요청된 크기와 다르거나, 텍스트가 20px보다 작거나, 확인된 폰트 로드에 실패하면 종료 코드 1을 반환합니다. HTML을 수정하고 통과할 때까지 다시 렌더링하십시오. 게이트를 수동으로 포기하지 마십시오.

7. 최종 시각적 확인 및 기록

슬라이드 1, 중간 슬라이드 하나, 마지막 슬라이드를 엽니다. 표시 폰트가 렌더링되었는지, 텍스트가 잘리지 않았는지, 요소가 겹치지 않는지, 이미지가 왜곡되지 않고 주제가 온전한지, 브랜드, 핸들 및 CTA가 일관된지 확인합니다. 그런 다음 시스템의 last-used.json을 이 캐러셀의 커버 패턴, 전체 패턴 시퀀스 및 각 슬라이드의 모드로 업데이트합니다(예: {"cover": "cover-big-type", "sequence": ["cover-big-type", "two-cards", "takeaway"], "modes": ["light", "dark", "light"]}).

디자인 사고

모든 단계에서 이 추론을 적용하십시오. 이것이 출력물이 AI 쓰레기처럼 읽히는 것을 방지합니다.

카피 작성 전

슬라이드의 단일 아이디어를 한 문장으로 이름을 지정하십시오. 할 수 없다면 슬라이드는 아직 존재하지 않는 것입니다.
먼저 헤드라인을 작성한 다음 의미를 잃지 않고 8단어 미만으로 줄이십시오.
형용사보다 구체적인 명사와 강력한 동사를 선호하십시오. 시간, 온도, 양을 명시하십시오.
각 라인을 다시 읽으십시오. 어떤 브랜드에도 속할 수 있다면 이 브랜드에 맞게 다시 작성하십시오.

요소 배치 전

먼저 읽기 순서를 결정하십시오: 무엇이 먼저, 두 번째, 세 번째로 보이는지. 크기와 두께가 이를 강제해야 합니다.
모든 요소는 위치에 대한 이유가 필요합니다. 그리드에 맞추거나 의도적으로 깨십시오(커버만 해당).
여백을 디자인 요소로 취급하십시오. 슬라이드가 비좁게 느껴지면 콘텐츠를 줄이십시오. 최소 서체 크기 아래로 절대 줄이지 마십시오.

카피 표준 (안티-슬롭)

짧은 평서문. 문장당 하나의 아이디어.
em 대시 없음. "not just X, but Y" 구조 없음. 강제적인 삼중 구조 없음.
채우기용 오프너 없음 및 AI 어휘 없음: "delve", "unlock", "elevate", "tapestry", "game-changer", "in today's fast-paced world".
능동태. 평범한 단어 사용: "use", "utilize" 금지.
훅은 세 가지 패턴 중 하나를 사용합니다: 호기심 간극, 특정 숫자, 또는 직접 호칭.
부제목은 요약이 아니라 약속입니다. 독자가 스와이프하여 얻는 것을 말합니다.
제목에 장식용 이모지 없음. 타이틀 케이스 헤드라인 없음.

레이아웃 기본

계층 구조: 헤드라인이 가장 크고 가장 굵은 요소입니다. 헤드라인당 하나의 악센트 색상 단어 또는 구문, 그 이상은 안 됩니다.
대비: 사진 위의 텍스트는 스크림 또는 반투명 카드 위에 위치합니다. 절대 복잡한 사진 위에 직접 놓지 마십시오.
정렬: 모든 곳에서 하나의 일관된 내부 여백. 기본적으로 왼쪽 정렬; 커버는 의도적으로 중앙 정렬.
타이포그래피: 최대 두 개의 폰트 패밀리. 모든 폰트는 로드되어야 하며, 렌더 게이트는 다시 시도합니다.

이미지

실제 사진, 실제 사람, 실제 장소. 스톡 아트 느낌 없음.
자르기는 구도를 만듭니다. 주제를 자르지 마십시오. 히어로 샷은 얼굴이나 손과 같은 인간적인 스케일 포인트가 필요합니다.
모든 이미지에 캡션을 다는 것은 선택 사항이지만, 캡션이 있다면 사진이 이미 말하는 것을 반복하지 않고 맥락을 추가해야 합니다.

모드

라이트 및 다크 모드. 두 가지 상태 모두 각 슬라이드에 대해 렌더링되어야 합니다. 모드는 의미를 만듭니다: 다크 슬라이드는 무겁고 권위적이며 슬라이드 전환을 표시합니다. 라이트 슬라이드는 열려 있고 읽기 쉽습니다. 인접한 슬라이드에서 모드를 번갈아 사용하는 것은 리듬을 만듭니다. 내용 없는 모드 전환은 하지 마십시오. 대비 쌍(신화 대 사실, 문제 대 해결책)에 대해 한쪽을 다크로 만들고 다른 쪽을 라이트로 만드십시오.

렌더 게이트

스크립트는 오류가 발생하면 다음과 같은 이유로 종료 코드 1을 반환합니다:

.slide 개수가 --slides 인수와 일치하지 않습니다.
콘텐츠가 슬라이드 경계를 넘칩니다.
슬라이드 경계 상자가 --width x --height와 일치하지 않습니다.
텍스트가 인라인 CSS 또는 상속된 스타일에서 최소 20px 미만입니다.
--check-fonts에 나열된 폰트가 로드되지 않았거나 렌더링 중에 대체되었습니다.

다시 시도하기 전에 HTML을 수정하십시오. 원인을 찾기 위해 스크립트 출력에 주의하십시오.

이미지 게이트

렌더링하기 전에 검증합니다:

워터마크, 외부 로고 또는 브랜딩.
해상도가 너무 낮음(대형 사용의 경우 최단변이 900px 미만).
슬라이드 주제와 일치하지 않는 콘텐츠.
생성형 AI 이미지.

거부는 비차단적입니다. 교체 이미지를 요청하십시오.

파일 구조

carousos/
├── README.md                 # 이 파일
├── SKILL.md                  # 이 파일
├── scripts/
│   └── render_carousel.py    # 품질 게이트 렌더러
├── templates/
│   ├── 01-morning-cup/
│   │   ├── template.json     # 이름, 폰트, 크기, 시퀀스 정의
│   │   ├── tokens.css        # 룩(색상, 폰트)
│   │   └── sample.html       # 완성된 샘플 캐러셀
│   ├── NN-slug/
│   │   └── ...
├── design-systems/           # 1단계의 맞춤 시스템
│   └── <system-name>/
│       ├── system.css        # 고정된 토큰
│       ├── patterns.html     # 패턴 블록
│       └── last-used.json    # 마지막 캐러셀의 구성
├── carousels/                # 2단계의 출력
│   └── <slug>/
│       ├── index.html        # 전체 캐러셀 마크업
│       ├── images/
│       ├── provenance.log
│       ├── slide_01.jpg
│       ├── slide_02.jpg
│       └── ...
├── fonts/
│   ├── fonts.css             # 번들된 폰트 패밀리에 대한 @font-face 규칙
│   └── *.woff2, *.ttf        # 실제 폰트 파일
└── design-system/
    ├── system.css            # 글로벌 시스템 CSS
    ├── patterns.html         # 모든 패턴 블록의 카탈로그
    └── PATTERNS.md           # 패턴 문서

경로 해결: templates/의 템플릿은 ../../templates/NN-slug/tokens.css를 통해 해당 토큰을 참조합니다. design-systems/의 시스템은 ../../design-system/system.css를 통해 글로벌 시스템 CSS를 참조합니다. carousels/의 캐러셀 출력은 렌더링을 위해 상대 경로를 사용합니다.

Carouso

Carouso란 무엇인가요?

즐겨 사용하는 AI에게 물어보기

미리보기

문서