navaigate-present은(는) 무엇을 하나요?

멤버 자신의 브랜드로 인터랙티브 프레젠테이션을 만듭니다. 이 스킬은 브랜드나 하우스 스타일 없이 제공됩니다. 모든 덱은 멤버의 브랜드처럼 보이며, NavAIgate처럼 보이지 않습니다. 첫 번째 덱을 만들기 전에 원하는 스타일을 찾습니다: 질문하고, 사용자의 사이트와 선호하는 사이트를 조사하고, 선택할 수 있는 방향성을 보여줍니다.

브랜드와 관계없이 모든 덱이 유지하는 것:

화면 당 하나의 아이디어. 단어는 왼쪽에 있습니다: 레이블, 단어 단위로 표시되며 하나의 악센트 구절이 있는 헤드라인, 짧은 평문 단락. 오른쪽에는 라이브 캔버스 데모가 있습니다.
데모는 행동을 통해 가르칩니다. 발표자는 한 가지를 누르거나, 드래그하거나, 전환하고, 화면이 즉시 응답합니다: 숫자가 세어지고, 차트가 다시 그려지고, 카드가 새로운 위치로 미끄러집니다. 모든 변화는 부드럽게 처리되어 깜빡임이 없습니다.
어느 것도 죽어 있지 않습니다. 각 데모는 슬라이드가 보일 때 도착 애니메이션을 재생하고, 대기 중에는 약간의 움직임을 유지합니다. 페이지 배경은 천천히 움직이며 클릭한 곳에 잔물결이 생깁니다.
발표처럼 실행됩니다. 아래쪽 화살표(또는 Space, Page Down, 오른쪽 화살표)는 정확히 한 슬라이드씩 이동합니다. 위쪽과 왼쪽은 뒤로 가고, Home과 End는 처음과 끝으로 이동합니다. F는 전체 화면입니다. 하단에는 그룹화된 진행률이, 상단 바에는 슬라이드 이름이 표시되며, 맵 슬라이드는 어디든 이동할 수 있습니다. 이 기능은 template\core.js에서 제공됩니다: 슬라이드에서 절대 변경하지 마십시오.
영화처럼 테스트됩니다. 모든 슬라이드는 세 가지 크기로 스크린샷이 찍히고 모든 컨트롤이 눌러집니다. 겹치거나, 잘리거나, 오류가 발생하지 않습니다.

평범하게 말하세요: 대부분의 멤버는 프로그래머가 아닙니다. 각 단계 전에 한 줄로 무슨 일이 일어나는지 설명하고, 명령은 요청하지 않는 한 스스로에게만 남겨두세요. 그들의 브랜드는 자신의 폴더 ~/.navaigate-present/brands/에 저장되므로, 이 스킬을 업데이트해도 브랜드에 영향을 주지 않습니다.

0. 어떤 브랜드?

python -I scripts\brand.py list를 실행하세요.

아직 브랜드가 없거나 새 브랜드를 원하는 경우: 먼저 설정(섹션 1~4)을 진행하세요. 약 15분이 소요됩니다.
하나의 브랜드: 그것을 사용하세요. 여러 개: 요청이 명확하지 않으면 어느 것을 사용할지 물어보세요.

1. 질문

무슨 일이 일어날지 설명하세요: 몇 가지 질문, 웹사이트와 선호하는 스타일 살펴보기, 그런 다음 선택할 수 있는 두세 가지 방향성. AskUserQuestion으로 질문하세요(한 번 호출, 네 가지 질문):

어떤 느낌이어야 하나요? 차분하고 프리미엄 / 대담하고 활기찬 / 친근하고 따뜻한 / 깔끔하고 기술적인.
밝은가요 어두운가요? 밝음 / 어두움 / 내 웹사이트에 맞춤 / 둘 다 보여줘.
버튼과 태그의 모서리는? 완전히 둥글게(알약) / 부드럽게 둥글게 / 각지게 / 내 웹사이트에 맞춤.
슬라이드 뒤의 배경은? 부드러운 점 그리드 / 정밀한 격자 / 그래프 용지 선 / 평범.

그런 다음 채팅에서 한 메시지로 질문하세요:

브랜드 이름과 웹사이트;
로고(파일 경로 또는 드래그 앤 드롭). SVG가 가장 좋고, 그렇지 않으면 투명 배경의 PNG. 파일이 없으면 웹사이트에서 가져올 수 있다고 말하세요;
브랜드 가이드라인(있는 경우, PDF 또는 링크);
좋아하는 스타일 1~3개: 웹사이트, 프레젠테이션, 브랜드 또는 스크린샷, 다른 업계의 것도 괜찮습니다. 슬라이드의 느낌을 원하는 어떤 것이든 될 수 있다고 말하세요;
절대 보고 싶지 않은 것(예: 알약, 이모지, 네온);
프레젠테이션 대상자를 한 줄로;
덱을 저장할 위치(문서 폴더에 <Brand> presentations 폴더 제안).

2. 리서치

사용자의 사이트와 즐겨찾기. python -I scripts\research.py "~/.navaigate-present/research/<slug>" <사용자 웹사이트> <각 참조>를 실행하세요. 각 사이트에 대해 첫 화면과 전체 페이지의 스크린샷, 헤더에서 찾은 로고를 저장합니다. 또한 페이지에서 실제로 사용하는 글꼴, 배경 및 텍스트 색상, 악센트 색상, 모서리 및 레이블 스타일을 측정합니다. 모든 스크린샷을 보세요. 숫자는 무엇이 있는지 말해주고, 그림은 느낌이 어떤지 말해줍니다.
사용자의 가이드라인(보낸 경우). PDF를 읽으세요: 색상, 글꼴 및 규칙은 웹사이트가 보여주는 어떤 것보다 우선합니다.
웹사이트나 즐겨찾기가 없는 경우? 해당 분야에서 잘 디자인된 웹사이트 세네 개를 웹에서 검색하고, 영감을 위해서만 리서치하세요. Firecrawl이 연결되어 있으면 firecrawl_search로 찾고, formats: ["branding"]으로 스크래핑하면 사이트의 색상과 글꼴에 대한 두 번째 판독값을 얻습니다.
찾은 내용을 평범한 말과 몇 줄로 알려주세요. 예: "귀하의 사이트는 크림색 배경에 진한 녹색을 사용하고, 제목에는 세리프를 사용합니다. 좋아하시는 덱은 어둡고 각진 모서리와 많은 공간을 사용합니다."

즐겨찾기에서 취할 것: 느낌(밝음 또는 어두움, 공간의 양, 글꼴의 성격, 모서리, 색상의 양). 로고, 제품 이름, 단어 또는 정확한 레이아웃은 절대 가져오지 마세요. 멤버 자신의 색상, 로고 및 이름은 그대로 유지됩니다.

3. 방향성

~/.navaigate-present/drafts/<slug>-a, -b 및 -c에 두세 개의 초안 브랜드를 만드세요. 각각 brand.json(참조 references\BRAND.md), 로고 사본 및 몇 단어로 된 "direction" 이름을 받습니다. 예:

A, 브랜드에 충실: 사용자 사이트의 색상, 글꼴 및 모서리.
B, <즐겨찾기>에 더 가깝게: 사용자의 색상과 로고에 즐겨찾기의 모드, 글꼴 성격, 모서리 및 배경을 사용.
C, 대안: 명확한 대비, 예를 들어 A가 밝으면 어둡게, 또는 다른 글꼴 페어링. 여전히 브랜드에 맞아야 합니다.

사용자의 답변을 따르세요: 느낌, 밝음 또는 어두움, 모서리 및 배경. "내 웹사이트에 맞춤"이라고 말한 경우 리서치에서 측정한 것을 사용하세요. 그런 다음:

각 초안에 대해 python -I scripts\brand.py check <초안 폴더>를 실행하고 모든 PROBLEM 줄을 수정하세요.
python -I scripts\brand.py compare <초안 a> <초안 b> [<초안 c>]를 실행하세요. 각 방향으로 시작 슬라이드와 차트 슬라이드를 빌드하여 한 그림(directions.png)에 나란히 배치합니다.
사용자에게 그림과 각 방향의 index.html 전체 경로를 보여주어 넘겨볼 수 있게 하세요. 어떤 것을 원하는지, 또는 무엇을 혼합할지("A의 색상과 B의 글꼴") 물어보세요. 하나가 올바를 때까지 조정하고 다시 비교하세요.

4. 브랜드 저장

선택한 방향을 변경 사항과 함께 ~/.navaigate-present/brands/<slug>/에 기록하세요(brand.json, 로고 및 모든 글꼴 파일).
python -I scripts\brand.py check <slug>, 그런 다음 python -I scripts\brand.py sample <slug>를 실행하세요. 그러면 브랜드로 다섯 가지 예제 슬라이드를 모두 빌드하고 스크린샷을 찍습니다.
연락처 시트를 보여주고 샘플의 index.html 전체 경로를 제공하세요. 사용자가 만족하면 설정이 완료된 것이며, 앞으로의 모든 덱은 이 브랜드를 사용합니다.

5. 덱 만들기

브리프. 대상, 꼭 알아야 할 내용, 대략적인 슬라이드 수, 발표 장소, 사용할 수 있는 사실. 멤버가 제공하거나 출처를 확인할 수 있는 사실만 사용하세요. 기능, 수치 또는 인용을 절대 만들어내지 마세요.
개요. python -I scripts\new_deck.py "<덱 폴더>" "<제목>" <브랜드 슬러그>를 실행하세요. 예제 슬라이드로 덱을 시작합니다. 그런 다음 _build\deck.json을 작성하세요: 그룹(진행률 표시줄이 됨)과 슬라이드 순서. 각 슬라이드에 대해 발표자가 누를 한 가지와 그것이 증명하는 것을 결정하세요. 누를 것이 없는 슬라이드는 약한 슬라이드입니다.
카피. 모든 슬라이드의 label, headline, hl 및 body를 한 번에 작성하여 덱이 하나의 목소리, 즉 brand.json의 브랜드 목소리를 갖도록 하세요. 헤드라인은 5~~10단어이며, 헤드라인 안에 hl(2~~4단어)이 있습니다. 본문은 최대 약 45단어입니다. 평범한 단어와 짧은 문장, em 대시와 "활용", "완벽한", "잠금 해제"는 없습니다. writing-style 및 humanizer 스킬이 설치되어 있으면 사용하세요.
빌드. 각 슬라이드를 references\SLIDE-BUILDER.md에 따라 빌드하세요. 슬라이드는 별도의 폴더이므로 헬퍼가 병렬로 빌드할 수 있습니다. 각 헬퍼에게 해당 런북, 슬라이드 ID, 브랜드 슬러그, 사실 및 슬라이드당 하나의 데모 아이디어를 제공하세요.
테스트. python -I scripts\build.py "<덱>"을 실행한 다음 python -I scripts\shoot.py "<덱>" 1920 1080, 그리고 동일하게 1440 900 및 1280 720에서 실행하세요. 각 실행은 missing copy: none, fit: clean 및 console: clean을 출력해야 합니다. 각 컨트롤을 누른 후 찍은 스크린샷을 포함하여 모든 스크린샷을 보세요.
검토. 각 슬라이드를 청중이 읽는 것처럼 읽으세요. 데모가 헤드라인을 증명합니까? 단어가 평범하고 사실입니까? 샘플 수치가 합산되며 "예시 수치"로 표시되어 있습니까? 브랜드의 never 목록을 확인하세요.
전달. 덱의 index.html 전체 경로를 제공하세요. Google Fonts를 제외하고 오프라인에서 작동하는 하나의 파일이며, 슬라이드가 이미지를 로드하는 경우 assets\ 폴더가 함께 제공됩니다.

규칙

색상과 글꼴은 브랜드에서만 가져옵니다. CSS에서는 토큰(--accent, --accent-ink, --s1, --text, --muted, --line 및 나머지)을 사용하세요. 캔버스에서는 E.COL 및 E.FONT, E.HEAD 및 E.LABEL을 사용하세요. 슬라이드에 16진수 색상을 절대 입력하지 마세요: 이것이 모든 브랜드에서 하나의 슬라이드가 작동하도록 하는 것입니다.
악센트 단어는 --accent-ink(또는 E.COL.accentInk)를 사용하며, 배경에서 읽을 수 있도록 조정된 악센트입니다. 채움에는 --accent를 사용하고, 악센트 채움 위의 단어에는 --on-accent를 사용합니다.
모서리는 브랜드를 따릅니다. 버튼과 태그에는 var(--rp), 카드에는 var(--r), 캔버스에는 E.R을 사용하세요. 999px를 절대 입력하지 마세요.
로고는 항상 멤버의 실제 파일이며, 빌드 시 인라인됩니다(섹션의 ). 절대 다시 그리지 말고, 이미지 생성기에 요청하지 마세요. 로고 파일이 없으면 브랜드 이름이 헤드라인 글꼴로 설정됩니다. 로고에 고정된 상자를 제공하고 내부에 맞추세요(object-fit: contain).
수치는 실제 또는 레이블이 지정됩니다. 샘플 수학은 합산되어야 하며 "예시 수치"라고 표시되어야 합니다.
돈과 숫자는 브랜드의 locale 및 currency를 사용합니다(E.money, E.num). 언어는 브랜드의 언어입니다(기본적으로 영국 영어).

파일

template\page.html: 셸과 전체 CSS 디자인 시스템, 모두 브랜드 토큰으로.
template\engine.js (E): 그리기 키트(곡선, 카드, 텍스트, 레이블, 커서, 잔물결, 틱, 부드러운 차트 선, 그리드, 돈, 배경).
template\core.js (P): 카피, 단어별 헤드라인, 단계, 키보드 및 진행률, 컨트롤, 루프.
scripts\research.py: 웹사이트 스크린샷 및 측정.
scripts\brandkit.py: brand.json을 토큰, 글꼴 및 로고로 변환, 대비 확인.
scripts\brand.py: 브랜드 나열, 확인, 비교 및 샘플.
scripts\new_deck.py는 덱을 시작하고, scripts\build.py는 빌드하며, scripts\shoot.py는 테스트합니다.
references\BRAND.md: brand.json 형식. references\SLIDE-BUILDER.md: 슬라이드 계약 및 데모 규칙(모든 헬퍼에게 제공).
examples\slides\: start(로고 리빌), path(맵), idea(차트를 구동하는 슬라이더), switch(재배열하는 전후) 및 close. 모든 새 슬라이드가 일치해야 하는 표준입니다.

이미 배운 교훈

인라인 코드의 어느 곳에나 있는 </script는, 주석에 있더라도 페이지의 스크립트를 일찍 종료합니다. build.py가 이스케이프합니다.
범위 입력의 step은 기본값에 도달해야 합니다. 그렇지 않으면 브라우저가 가장 가까운 step으로 스냅합니다.
너비와 최대 높이만 지정된 로고는 상자를 넘치며 리빌 마스크가 잘라냅니다. 너비와 높이를 모두 지정하고 내부에 맞추세요.
shoot.py가 누르는 컨트롤은 절대 실제로 disabled가 되어서는 안 됩니다. 대신 aria-disabled="true"를 사용하세요.
일부 Google 글꼴에는 가중치가 부족합니다(Space Mono는 400과 700만 있음). brand.py check는 각 글꼴이 가지고 있는 가중치를 찾아 저장합니다.
많은 브랜드는 버튼을 검은색으로 유지하고 악센트 색상을 단어와 아이콘에 넣습니다. research.py도 거기를 찾으므로 스크린샷과 함께 악센트 목록을 읽으세요.
셸의 Here-document는 백슬래시와 따옴표를 먹을 수 있습니다. 파일 쓰기 도구로 슬라이드 파일과 스크립트를 작성하세요.

navaigate-present