GoodLadTom/navaigate-present

navaigate-present 是做什麼的？

使用成員自身品牌的互動式簡報。此技能出廠時不帶任何品牌或內部風格。每份簡報看起來都像成員的品牌，絕不像 NavAIgate 的品牌。在製作第一份簡報之前，它會找出他們想要的風格：它會提問、研究他們的網站和他們喜愛的網站，並向他們展示可選擇的方向。

無論品牌為何，每份簡報都保留以下特點：

• 每張投影片一個想法。 文字位於左側：一個標籤、一個逐字出現的標題（包含一個強調短語），以及一段簡短的純文字段落。右側則是一個即時畫布範例。
• 範例透過實作來教學。 簡報者按下、拖曳或切換一個項目，螢幕便立即回應：數字計數、圖表重繪、卡片滑動到新位置。每個變化都有緩動效果，因此不會有突兀的跳動。
• 從來沒有死寂的時刻。 每個範例在投影片進入視野時會重播其出現的動畫，並在等待時保持一些輕微的動作。頁面背景會緩慢移動，並在您點擊的地方產生漣漪。
• 它像一場演講一樣運作。 向下箭頭（或空白鍵、Page Down 鍵、向右箭頭）精確移動一張投影片。向上和向左箭頭返回，Home 和 End 鍵跳到開頭和結尾。F 鍵切換全螢幕。分組的進度條沿底部顯示，頂部橫幅顯示投影片名稱，而地圖投影片可跳轉到任何位置。這來自 template\core.js：切勿在投影片中更改它。
• 它像電影一樣經過測試。 每張投影片都會在三種尺寸下截圖，每個控制項都會被按下。不會有任何重疊、裁剪或拋出錯誤。

請用白話說明：大多數成員並非程式設計師。在每個步驟之前用一句話說明正在發生的事，除非他們詢問，否則不要將指令透露給他們。他們的品牌存放在自己的資料夾 ~/.navaigate-present/brands/ 中，因此更新此技能絕不會影響到它們。

0. 哪個品牌？

執行 python -I scripts\brand.py list。

• 尚無品牌，或他們想要新的品牌：請先進行設定（第 1 到第 4 節）。大約需要 15 分鐘。
• 只有一個品牌：直接使用。多個品牌：詢問要用哪一個，除非請求中已明確指定。

1. 提問

告知他們接下來會發生的事：幾個問題、查看他們的網站和他們喜歡的風格，然後提供兩到三個方向供選擇。使用 AskUserQuestion 提問（一次呼叫，四個問題）：

1. 希望傳達什麼感覺？ 冷靜且高級 / 大膽且充滿活力 / 友善且溫暖 / 乾淨且技術感。
2. 淺色還是深色？ 淺色 / 深色 / 配合我的網站 / 兩者都展示。
3. 按鈕和標籤的邊角樣式？ 全圓角（藥丸形狀） / 微圓角 / 直角 / 配合我的網站。
4. 投影片後方的背景？ 柔和的點狀網格 / 精細的格狀結構 / 圖紙線條 / 純色。

然後在聊天中，用一則訊息詢問：

• 品牌的名稱和網站；
• 標誌（檔案路徑，或直接拖入）。SVG 為佳，否則使用具有透明背景的 PNG。告知他們如果沒有檔案，可以從網站取得；
• 品牌指南（如果有的話）（PDF 或連結）；
• 一到三個他們喜愛的風格：網站、簡報、品牌或截圖，甚至來自其他行業也可以。告知他們只要是他們希望簡報感覺像的任何東西都可以；
• 他們絕對不想看到的任何東西（例如藥丸形狀、表情符號或霓虹色）；
• 簡報的對象，用一句話說明；
• 簡報的儲存位置（建議在他們的「文件」中建立一個 <品牌名稱> 簡報 資料夾）。

2. 研究

1. 他們的網站和喜愛的網站。 執行 python -I scripts\research.py "~/.navaigate-present/research/<slug>" <他們的網站> <每個參考網站>。對於每個網站，它會儲存首屏和頁面的截圖，以及在頁首找到的任何標誌。它還會測量頁面實際使用的字型、背景和文字顏色、強調色、邊角樣式和標籤風格。仔細查看每張截圖。 數字告訴你存在什麼，而圖片告訴你感覺如何。
2. 他們的指南， 如果他們有提供。閱讀 PDF：其中的顏色、字型和規則優先於網站顯示的任何內容。
3. 沒有網站也沒有喜愛的網站？ 在網路上搜尋他們領域中三到四個設計良好的網站，並將這些網站作為研究對象，僅供靈感參考。如果 Firecrawl 已連接，使用 firecrawl_search 來尋找它們，並使用 formats: ["branding"] 進行抓取，以獲得網站顏色和字型的第二份讀取資料。
4. 用簡單的話語和幾行文字告訴他們你的發現。 例如：「您的網站使用深綠色搭配奶油色，標題使用襯線字體。您喜愛的簡報是深色系，使用直角和大量留白空間。」

從喜愛項目中應提取的內容：它的感覺（淺色或深色、留白空間多寡、字型的特性、邊角樣式、色彩豐富度）。絕不能使用其標誌、產品名稱、文字或確切佈局。成員自己的顏色、標誌和名稱必須保持不變。

3. 方向

在 ~/.navaigate-present/drafts/<slug>-a、-b 和 -c 中建立兩到三個草稿品牌。每個草稿包含一個 brand.json（請參閱 references\BRAND.md）、一份標誌副本，以及一個由幾個字組成的 "direction" 名稱。例如：

• A，忠於您的品牌： 使用他們自己網站的顏色、字型和邊角樣式。
• B，更接近 <喜愛的項目>： 使用他們的顏色和標誌，搭配喜愛項目的模式、字型特性、邊角樣式和背景。
• C，替代方案： 一個明顯的對比，例如如果 A 是淺色則使用深色，或使用不同的字型配對。它仍然必須符合品牌形象。

遵循他們的答案：感覺、淺色或深色、邊角樣式和背景。如果他們說「配合我的網站」，則使用研究測量到的數據。然後：

1. 對每個草稿執行 python -I scripts\brand.py check <草稿資料夾>，並修復每個 PROBLEM 行。
2. 執行 python -I scripts\brand.py compare <草稿 a> <草稿 b> [<草稿 c>]。它會在每個方向中建立開場投影片和一張圖表投影片，並將它們並排在一張圖片 directions.png 中展示。
3. 向他們展示圖片以及每個方向 index.html 的完整路徑，以便他們可以逐頁瀏覽。詢問他們喜歡哪一個，或者想要如何混合（「A 的顏色搭配 B 的字型」）。調整後再次比較，直到選出正確的。

4. 儲存品牌

1. 將選定的方向（包含他們的修改）寫入 ~/.navaigate-present/brands/<slug>/（brand.json、標誌和任何字型檔案）。
2. 執行 python -I scripts\brand.py check <slug>，然後執行 python -I scripts\brand.py sample <slug>。這會以該品牌建立所有五個範例投影片並為其截圖。
3. 顯示聯絡表並提供範例 index.html 的完整路徑。當他們滿意時，設定完成，之後每份簡報都將使用此品牌。

5. 製作簡報

1. 簡報概要。 對象是誰、他們必須帶走什麼訊息、大約多少張投影片、在哪裡展示，以及可能用到的數據。僅使用成員提供或你能夠查到來源的數據。切勿虛構功能、數字或引言。
2. 大綱。 執行 python -I scripts\new_deck.py "<簡報資料夾>" "<標題>" <品牌 slug>。它會以範例投影片啟動簡報。然後撰寫 _build\deck.json：定義群組（它們會變成進度條）和投影片順序。對於每張投影片，決定簡報者將按下的一個項目以及它要證明的內容。一張沒有東西可按的投影片是一張薄弱的投影片。
3. 文案。 一次完成所有投影片的 label、headline、hl 和 body，使簡報具有一致的語調，並符合 brand.json 中定義的品牌語調。標題約 5 到 10 個字，hl（2 到 4 個字）內嵌於標題中。正文最多約 45 個字。使用簡單的詞彙和簡短的句子，不要使用破折號，也不要使用「槓桿」、「無縫」或「解鎖」等詞語。如果已安裝 writing-style 和 humanizer 技能，請使用它們。
4. 建置。 按照 references\SLIDE-BUILDER.md 建置每張投影片。投影片是獨立的資料夾，因此輔助工具可以平行建置它們。為每個輔助工具提供該操作手冊、其投影片 ID、品牌 slug、事實以及每張投影片的一個範例想法。
5. 測試。 執行 python -I scripts\build.py "<簡報>"，然後執行 python -I scripts\shoot.py "<簡報>" 1920 1080，接著在 1440 900 和 1280 720 解析度下重複相同操作。每次執行必須列印 missing copy: none、fit: clean 和 console: clean。檢查每張截圖，包括在按下每個控制項後所拍攝的截圖。
6. 審閱。 像觀眾一樣閱讀每張投影片。範例是否證明了標題？用詞是否簡單且真實？範例數據是否正確加總，並標示為「範例數據」？檢查品牌的 never 清單。
7. 交付。 提供簡報 index.html 的完整路徑。它是一個可離線運作的單一檔案（Google Fonts 除外），如果投影片載入圖片，則會附帶 assets\ 資料夾。

規則

• 顏色和字型僅來自品牌。 在 CSS 中使用代號（--accent、--accent-ink、--s1、--text、--muted、--line 等）。在 canvas 中使用 E.COL 和 E.FONT、E.HEAD 和 E.LABEL。切勿在投影片中輸入十六進位顏色：這正是讓一張投影片能在每個品牌中運作的關鍵。
• 強調詞使用 --accent-ink（或 E.COL.accentInk），這是調整過後能在背景上清晰閱讀的強調色。填充使用 --accent，而位於強調色填充上的文字使用 --on-accent。
• 邊角遵循品牌。 按鈕和標籤使用 var(--rp)，卡片使用 var(--r)，canvas 中使用 E.R。切勿輸入 999px。
• 標誌永遠是成員的實際檔案，由建置過程內嵌（在區段中使用 <!--LOGO-->）。切勿重繪它，也切勿要求圖片生成器產生它。如果沒有標誌檔案，則使用品牌的標題字體設定其名稱。為標誌提供一個固定的盒子並使其適應內部（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，即使在註解中，也會提前結束頁面的 script。build.py 會跳脫它。
• 範圍輸入的步進值必須能整除其預設值，否則瀏覽器會將其對齊到最近的步進值。
• 僅指定寬度和最大高度的標誌會溢出其盒子，然後揭示遮罩會將其切斷。請為其指定寬度和高度，並使其適應內部。
• shoot.py 按下的控制項絕不能是真正的 disabled。請改用 aria-disabled="true"。
• 某些 Google 字型缺少某些字重（Space Mono 只有 400 和 700）。brand.py check 會找出每個字型擁有的字重並儲存。
• 許多品牌將按鈕保持為黑色，並將強調色用於文字和圖示。research.py 也會在那裡進行檢查，因此請將它的強調色清單與截圖一起閱讀。
• Shell 中的 Here-documents 可能會吃掉反斜線和引號。請使用檔案寫入工具來寫入投影片檔案和腳本。