Cerulean

Cerulean: 장면별로 변화하는 프레젠테이션

당신이 디자인하면 Cerulean이 만듭니다. JSON 스크립트, JS로 프로그래밍된 장면, CSS 스킨 세 파일을 작성합니다. scripts/build.py가 이들을 검증하고 내장 뷰어가 포함된 독립형 HTML로 변환합니다.

각 장면은 2~4단계로 전달되는 하나의 아이디어입니다. 왼쪽에는 단계 카드가, 오른쪽에는 해당 장면을 위해 프로그래밍된 일러스트레이션이 배치됩니다. 주제의 실제 객체가 고유한 동작을 가지며 각 단계마다 부드럽게 변화하고 생명력(떠다니기, 흐르기, 맥박 뛰기)을 갖습니다. 확대/라벨링되는 캡처나 사진일 수도 있습니다. 각 장면이 다르게 보이고 움직이는 것이 좋은 Cerulean 프레젠테이션의 핵심입니다.

각 프레젠테이션은 또한 고유한 시각적 정체성을 가지며, 이를 주제에 맞게 디자인합니다. 즉, 세계(객체들), 팔레트, 서체, 배경 리듬, 전체를 위해 작성된 CSS 스킨입니다. 보안에 관한 프레젠테이션은 콘솔처럼 보이고, 역사에 관한 것은 시대 인쇄물처럼 보입니다. 서로 다른 두 주제는 같은 컬렉션처럼 보여서는 안 되며, 제목을 가려도 주제를 짐작할 수 있어야 합니다.

흐름

1. 의뢰 이해하기. 주제, 내용(메모, 포인트, 붙여넣은 텍스트), 이미지가 필요합니다. 주제만 주어지면 잘 정립된 일반 지식으로 내용을 개발하세요. 이미지를 요청하기 위해 중단하지 마세요. 빠진 이미지가 있으면 공간을 남겨두세요. 기본값: 스페인어로 5~9개의 장면.

2. 가이드 읽기(한 번만). references/direccion.md(시각적 정체성), references/formato.md(JSON 형식), references/escenas.md(키트, 시간, 아이디어 유형별 애니메이션 카탈로그)를 읽으세요. assets/ejemplo.js에는 7개의 완전한 장면이 있습니다. 해결 방법이 의심될 때만 읽으세요.

3. 정체성 디자인하기. direccion.md의 프로세스에 따라 주제의 세계(어디에 살고, 6~10개의 인식 가능한 객체), 분위기, 해당 장면에서 추출한 팔레트, 그 세계가 사용할 서체, 리듬과 움직임, 각각에 대한 why 한 줄을 디자인하세요. 제너릭성 테스트를 통과해야 합니다: 제목을 가렸을 때 주제를 짐작할 수 있나요?

4. 스크립트 작성하기. presentaciones/<tema>.json에 텍스트, 단계, 노트, design 블록을 작성하세요. 폴더가 없으면 만드세요. 리듬에 따라 "fondo"와 "papel"을 배분하세요.

5. 스킨 작성하기. presentaciones/<tema>.css에 카드, 표지, 제목, 라벨, 세부 사항, 항목들이 해당 세계에서 어떻게 보일지(무엇을 입힐 수 있고 입힐 수 없는지, direccion.md 참조) 작성하세요.

6. 장면 계획하기(프로그래밍 전). 각 장면에 대해 어떤 유형의 아이디어를 설명하는지(idea), 한 문장으로 된 주제 세계의 객체를 사용한 은유(form), 각 단계에서 무엇이 변하는지 계획하세요. 최소 3가지 아이디어 유형, 반복되는 은유 없음. 이미지는 사용자가 실제로 보여주고 싶은 실제 사물(자신의 앱, 제품, 장소)에만 사용하세요.

7. 장면 프로그래밍하기. presentaciones/<tema>.js에 (escena("이름", (K) => {…})) 작성하고 JSON에 "draw"를 포함하세요. 장면당 20~60줄. 기본적으로 평면으로 세계의 아티팩트를 그립니다(escenas.md 참조).

8. 생성 및 검토하기:

   python "<이 스킬 폴더>/scripts/build.py" presentaciones/<tema>.json
   

   presentaciones/<tema>.html을 작성합니다. 경고(장면 없는 이름, 구문 오류, 대기 중인 이미지, 불완전한 시각적 방향, 거부된 스킨, 다양성 부족, 이전 프레젠테이션과의 유사성)를 수정하세요. 브라우저가 있다면 캡처 비용 없이 검토하세요:

   • 미리보기 제공: python "<이 스킬 폴더>/scripts/preview.py" presentaciones/<tema>.json을 백그라운드에서 실행하고 http://localhost:8767을 여세요.
   • 페이지에서 JSON.stringify(CERULEAN_REPORT())를 실행하세요. 오류가 있는 장면, 캔버스 밖 조각, 변화가 없는 단계, 스킨에서 가독성이 떨어지는 텍스트를 알려줍니다. 수정하고 다시 실행하세요. 페이지는 자동으로 새로고침됩니다.
   • 한 번만 캡처하여 개요 보기("Todas" 버튼 또는 G 키)로 전체 구성을 평가하세요. 정체성이 드러나는지(색상, 글자, 그림 스타일)와 장면들이 서로 비슷하지 않은지 확인하세요. 단계별로 캡처하지 마세요. 시간과 토큰을 가장 많이 소모합니다.

9. 전달하기. HTML 경로를 제공하고 사용 방법을 몇 줄로 설명하세요:

   • → 또는 스페이스는 다음, ←는 이전 단계.
   • F 전체 화면, N 노트, G 개요 보기.
   • E 편집 모드: 텍스트 수정, 이미지 끌어다 놓기, 카드 및 일러스트레이션 이동/크기 조정(핸들 ✥ 및 ⤡). "Descargar copia"는 변경 사항이 포함된 HTML을 저장합니다.
   • PDF 버튼은 장면당 한 페이지로 저장합니다.

   대기 중인 이미지가 남아 있다면, 장면, 표시해야 할 내용, 파일명 presentaciones/imagenes/escena-<n>.png 목록으로 마무리하세요.

타협 불가 규칙

• 숫자, 날짜, 인용, 이름, 연구를 만들어내지 마세요. 장면에 나오는 숫자는 내용이나 매우 잘 정립된 지식에서 비롯되며, 단계 텍스트에도 동일하게 나타나야 합니다.
• 빠진 실제 이미지 대신 가짜 이미지를 넣지 마세요. 공간을 남겨두세요.
• 각 장면은 고유한 일러스트레이션과 고유한 동작을 가지며, 각 단계마다 변화합니다.
• 각 프레젠테이션은 주제에 맞게 디자인된 고유한 정체성(세계, 팔레트, 서체, 스킨)을 가집니다. 팔레트, 서체, 기본 모양은 선택 사항이 아닙니다.
• 특정 프레젠테이션을 위해 assets/를 편집하지 마세요. 뷰어와 키트는 모든 프레젠테이션에 공통입니다.