애니메이션 플로우 다이어그램
프로세스에 대한 20-30초 애니메이션 설명 영상을 만듭니다. 가장 중요한 두 가지 사항(순서대로):
- 모든 주제는 고유한 디자인을 가져야 합니다. 레이아웃, 노드 모양, 커넥터, '응답자', 출력 패널, 색상 팔레트 및 모션은 주제에 맞게 선택됩니다. 두 개의 영상이 같은 템플릿에 레이블만 바꾼 것처럼 보여서는 안 됩니다(사용자가 "每一份流程看起來都會一模一樣"라고 정확히 지적함). 제작 전에 한 문단 분량의 디자인 브리프를 작성하고 이 대화의 이전 영상(및 여기 있는 두 가지 예시)과 비교하여
references/design-directions.md의 변형 축 중 적어도 네 가지를 변경하십시오. - 기본적으로 전문적이고 기술적이어야 합니다. 기본 수준은 세련된 기술/제품 스타일(콘솔, 아키텍처 다이어그램, 대시보드, 청사진, 깔끔한 제품 UI)입니다. 따뜻하고, 일러스트레이션이 포함되거나, 유쾌한 스타일은 주제가 분명히 캐주얼한 경우(레시피, 가족 계획) 또는 사용자가 요청한 경우에만 사용합니다.
영상마다 일정하게 유지되는 것은 외형이 아닌 애니메이션 문법입니다: 속도 제어(빠른 이동, 느린 병목 구간, 첫 번째 검사보다 빠른 이후 검사), 데이터 왕복(질의 전송 → 응답자 작업 → 답변 반환), 한 번의 루프백, 어딘가에 시각적으로 기록되는 내용, 요약 줄이 포함된 종료 화면. 종이 페이지나 다이어그램 아래 본문 단락은 없습니다.
워크플로우
1. 프로세스 모델링(묵시적으로 수행; 필수적인 내용이 누락된 경우에만 질문)
각 단계를 분류합니다: 작업(누군가/무언가가 작업을 수행하며, 체류 시간은 실제 노력에 비례), 병목 지점(가장 느린 작업), 검사(작은 답변 공간: 점수/예-아니오/하나 선택), 응답자(검사를 결정하는 대상: 규칙 엔진, 정책 파일, 검토자, 모델, 요리사), 저장소(결과가 기록되는 곳), 행위자(각 단계를 수행하는 대상). 한 번의 루프백과 최종 상태를 찾습니다. 사용자의 용어를 사용합니다. 사용자가 제공하지 않은 숫자는 화면에 示意/설명용으로 레이블을 붙이고, 사용자 자료의 실제 숫자(임계값, 개수, 종료 코드)가 최상의 출력 값입니다.
2. 디자인 브리프 작성
references/design-directions.md를 읽습니다. 주제와 대상에 맞는 방향을 선택한 후 각 축을 결정합니다: 레이아웃 문법, 스테이션 모양, 커넥터 스타일, 응답자의 모양과 조명 방식, 패킷/토큰 형태, 출력 패널, 색상 팔레트(4가지 색상), 서체, 배경 처리, 모션 시그니처. 브리프를 한 줄로 채팅에 말하고("主控台風：深藍格線、直角匯流排、右側規則面板…") 승인을 기다리지 않고 진행합니다.
3. 레이아웃 및 충돌 확인
references/design-rules.md(기하학, 충돌 검사, 타이밍, 왕복 단계, 출력 패널)를 사용합니다. 기본값은 16:9 1920×1080 30fps이며, 사용자가 Reels/Shorts를 원할 경우 9:16을 사용합니다.
4. 제작
아티팩트 도구에 Motion(애니메이션/비디오) 타입이 나열된 경우 — 선호됨(재생, 스크럽, MP4/GIF 내보내기 가능): 해당 타입의 자체 지침에 따라 파일 및 작성 순서를 따릅니다. 하나의 연속 장면입니다. 모델, 경로 및 마크업은 shared.js에, 모션은 scene-<id>.js에, 경로를 반영하는 점수는 score.js에 작성합니다. references/에 완성된 두 개의 영상이 있습니다 — 메커니즘(경로 타임라인, posAt, 폴리라인/베지어 헬퍼, 패킷 트레일, 터미널 스크롤, 미터)을 차용하되 구성이나 팔레트는 절대 차용하지 마십시오.
화면 텍스트는 문자 그대로의 문자( \uXXXX 이스케이프 아님)로 작성하여 사용자가 플레이어에서 레이블을 다시 입력할 수 있도록 합니다.
그 외의 경우, 동일한 파일을 폴더에 작성하고 python scripts/build_player.py <폴더> <out.html> --title "<제목>"을 실행하여 재생/일시정지/스크럽 기능이 있는 단일 자체 포함 HTML 페이지를 생성한 후 게시하거나 제공합니다. Node를 사용할 수 있는 경우 jsdom으로 간단히 테스트합니다(references/example-kitchen/README.md 참조).
5. 제공
링크 + 사운드에 대한 한 줄(음소거로 시작) + 내보내기: Motion의 내보내기는 MP4 또는 GIF를 저장합니다(GIF는 무음이며 1080p에서 용량이 크므로 더 짧은 버전을 제안하십시오). 소스에 설명되지 않은 메커니즘(예: 재시도 루프)을 보여주기 위해 비트를 추가한 경우 한 문장으로 말하고 제거 옵션을 제공합니다.
파일
references/design-directions.md— 방향, 변형 축, 팔레트, '반복 금지' 확인. 먼저 읽으십시오.references/design-rules.md— 기하학, 충돌 검사, 안무/타이밍, 왕복, 출력 패널.references/example-ops-console/— 기술 방향: 어두운 콘솔, 서비스 카드 + 육각 게이트, 직교 버스, 저장소 실린더, 규칙 행이 있는 정책 패널, 터미널 로그, 임계값 미터(지식 베이스 파이프라인).references/example-kitchen/— 캐주얼 방향: 따뜻한 종이, 지그재그 레인, 허브 링 조명(레시피). README는 각 파일의 변경 사항을 매핑하고 간단한 테스트를 보유합니다.assets/player.html,scripts/build_player.py— 독립 실행형 대체 플레이어.