Android 風格標誌揭幕是做什麼的？

**如果多個技能都能做到：**當要求未指明此技能，且您的代理程式也有其他製作同類作品（其他開場影片、鏡頭、簡報或模型）的 omnigami 技能時，請列出名稱並詢問使用者想要哪一個，然後再開始。如果已指名，或它是唯一安裝的技能，則直接進行。

對於日文、韓文或中文產品頁面，保留該語言的文案，並將影片的 lang 設定為頁面的 <html lang>；內建的 Noto 字型和斷詞會處理文字。

一個 15.5 秒的開場，從產品的標誌自身幾何形狀構建，並以鎖定組合結束。細長的建構線沿著標誌的真實邊緣生長；根據其真實弧線繪製圓規圓形，每 0.75 秒一個，同時四條短線講述產品對您的作用；標誌填滿、滑向中心並暫停；鏡頭推入直到其顏色充滿整個畫面；產品文案的第一個字獨自、巨大地出現；以標誌自身形狀之一的擦拭將該字帶入其餘文字；一個圓盤伸展成產品的自身輸入（或其主要按鈕），最後的文字在其中被鍵入；按下發送，標誌顏色的一個圓盤綻放進畫面，鏡頭從標誌拉出到鎖定組合。平面區域，無模糊、無漸層、無陰影。30 fps，120 BPM 網格，寬螢幕 (1920 × 1080)。

您透過改編已完成的影片來工作。reference/ 是 Ostlery（一個為 omnigami 範例製作的虛構住宿預約助手；其故事和來源在 reference/STORY.md 中）的完整影片。保留其機制：緩動、時間軸、鏡頭的推拉、擦拭、圓盤、綻放、鎖定組合的比例以及影片自身的檢查。其名詞變成使用者的：標誌、從該標誌繪製的建構、四條線、那條線、輸入、顏色、字型和文字標誌。您在 reference/index.html 中變更的每個設定都標記為 ADAPT；所有標記為 KEEP 的保持不變。

在規劃前閱讀 style.md，在判斷任何事物前閱讀 critique.md。

所需條件

標誌作為向量路徑（一個 SVG）。建構是標誌的真實幾何形狀，所以 PNG 不夠：要求 SVG（或在產品的原始碼或網站中找到它）。永遠不要追蹤、重繪或「改進」標誌。
產品的文案：它自己的一句話，三到七個字，讀起來像兩部分（Ostlery：「Plan a stay」+「in a sentence.」）。第一個字必須簡短有力：它單獨出現，與畫面一樣大。
產品為您做的四件事，以它自己的語氣（來自其網站或品牌指南）。
產品的真實輸入或按鈕，以產品自己的樣式呈現：最好是有一個帶有內部發送按鈕的欄位（一個組合器、一個帶有執行按鈕的搜尋框、一個提示）；否則用其主動作按鈕。永遠不要使用產品沒有的元件（參見「輸入」）。
其字型（檔案及其授權）：文案的顯示字型、介面字型、文字標誌的字型，或文字標誌作為輪廓 SVG。如果無法提供字型，則要求授權檔案或使用最接近的開放字型並說明。

在提問前閱讀網站；然後一次、在一條訊息中，詢問它無法回答的內容。如果使用者希望不問問題或無人值守執行，則根據您能取得的資訊決定，並說明您的決定。

設定

檢查 Node 20+、ffmpeg 和 Chrome 系列瀏覽器（scripts/chrome.mjs 找到它；CHROME_PATH 覆蓋）。解釋任何缺失的內容並停止。在目前目錄的 logo-reveal/ 中工作；首先將 SKILL_DIR 設定為此檔案所在的資料夾：

SKILL_DIR=/path/to/android-style-logo-reveal   # 此 SKILL.md 所在的資料夾
mkdir logo-reveal && cd logo-reveal
cp -R "$SKILL_DIR/reference" reference && cp -R "$SKILL_DIR/reference" film && cp -R "$SKILL_DIR/scripts" scripts && cp -R "$SKILL_DIR/music" music
rm -rf reference/out film/out film/STORY.md
npm init -y >/dev/null && npm i -D puppeteer-core
node scripts/render.mjs reference --times key --sheet --out out/reference

reference/ 保持不變，以供比較。您編輯 film/：其 index.html 和其 assets/（用產品的替換 mark.svg 和字型，每個字型旁邊是其授權，並在您的字型載入後刪除參考的字型）。您的 STORY.md 和 PRODUCT.md 放在 logo-reveal/ 的頂部。現在查看 out/reference/16x9-sheet.png：那就是標準。

1. 閱讀品牌

node scripts/capture.mjs <url> capture 並閱讀每個螢幕截圖和 capture/brand.json。開啟產品本身（其應用程式、示範或原始碼）。本機應用程式：服務它（python3 -m http.server）並使用其位址。
撰寫 PRODUCT.md：用一句話說明它的功能、它的語氣、它的字型和授權、標誌的理念（其形狀代表什麼：Ostlery 的拱門是「門中之門」，門口是「它找到的那個住宿」）、它的輸入或主按鈕及其樣式、那條線和四個優勢，每個都附上您找到它的位置和日期。以及按角色分配的顏色（影片的標記，C）：
- paper 背景，ink 其文字，card 其輸入的填充色；
- ember 標誌的顏色（名稱是參考的；保留角色名稱）；
- lake 建構線：品牌用於連結、線條或地圖的冷色調。如果沒有，或留作他用，則使用其墨水（永遠不要用淺灰色：它看起來很淡）；
- ok 線條旁的勾號：其成功顏色，如果該顏色被保留（Tovra 將其綠色保留給已送達的錢），則使用其墨水。

2. 文字

四條線講述產品為您做什麼：優勢，以品牌的語氣，每個兩到五個字。它們設定為 64 px，在一個 650 px 的欄位中，並全部縮小以適應最寬的：將最長的保持在約 22 個字元（Ostlery 最長的「Finds the one that fits」，23 個 Figtree 字元，剛好適合 64 px；較寬的字型適合較少字元，而設定在約 56 px 以下的線條看起來很小）。永遠不要使用範例數據的具體細節：不是篩選器、價格、客戶、結果名稱（Ostlery 拒絕了「Under $220 a night」和「Best fit · Heron Point Cabin」：它們沒有說明任何人為什麼想要它）。按產品運作方式排序；最後一個是回報，它在標誌填滿時出現。四個，永遠不要五個：每個必須保留約一秒鐘來閱讀。
那條線，分成兩部分：line1，陳述（兩到四個字），和 line2，其餘部分，鍵入輸入中（20 個字元或更少閱讀效果最好；如果鍵入在按下之前結束，則影片檢查失敗），或按鈕自身的標籤。如果產品有自己的文案，則使用它。一個關鍵字可以標記為 *像這樣* 以設定為標誌的顏色，在任一部分中，但永遠不要第一個字（它會以背景顏色出現在標誌的區域上）。只在文字周圍寫標誌；影片讀取 *paid*. 為 *paid.*。一個將顏色保留給一個含義的品牌可能不標記任何東西。
文字標誌：產品名稱以其鎖定組合設定的方式（其大小寫、字型和粗細，或其輪廓 SVG）。

以 reference/STORY.md 的形式撰寫 STORY.md：TL;DR、每個節拍說明了什麼、節拍表（包含您的標誌的建構、填滿、擦拭、角落形狀和輸入），以及每個文字及其來源。用幾行向使用者展示四條線、那條線和建構計劃，並要求一次審查，除非他們要求無人值守執行。永遠不要將沉默視為批准。

3. 從標誌自身的幾何形狀構建標誌

這是影片的核心：觀眾應該感覺到標誌是精心設計的，因為所繪製的每一條線都確實存在於其中。以下的每個數字都在影片的 100 單位框中（標誌居中於 (50, 50)，其較長邊從 8 → 92）。首先在紙上從 SVG 的數字計算出來，然後鍵入。

放置標誌（MARK_D、MARK_FIT、BOX）。將 SVG 的路徑數據完全複製到 MARK_D 中，每個部分一個條目（部分是指您將獨立填寫的一塊；fill-rule="evenodd" 路徑保持原樣）。如果 SVG 不是在 100 單位框中繪製的，則設定 MARK_FIT = [s, 0, 0, s, tx, ty]，其中 s = 84 / (其較長邊)、tx = 50 - s × (其中心 x)、ty = 50 - s × (其中心 y)；那麼每個 SVG 數字 v 映射到 s × v + tx (x) 或 s × v + ty (y)。將 BOX 設為框中標誌的邊界（方形標誌：8, 8, 92, 92；寬標誌保持 x 8 → 92，其 y 邊界向內移動）。多色標誌：為 drawMark 和填滿的每個部分指定顏色。
網格（GRID_X、GRID_Y）：每個真實邊緣一條線。列出每個垂直直邊的 x、每個水平直邊的 y、每個弧線的切線（其中心 ± 其半徑，兩個方向）、每個部分自身的對稱軸，以及中心軸在 50 處（繪製得稍深）。合併距離小於 2 單位的線；保持約 6–12 條垂直線和 4–8 條水平線。網格上沒有任何不是標誌邊緣、切線或軸的內容。
基本形狀（PRIMS、T.circles）：標誌設計師用來繪製它的基本形狀，從大到小，最多五個。每個由一個移動點在 STROKE 上繪製 0.65 秒，在起點和路徑中點各有一個錨點，較舊的變暗，而尺寸線滑向最新的一個：
- 一個圓形，來自標誌的一個弧線：{ x, y, r }，其中心和半徑（從其右側彈簧點開始，並從頂部向上）。共享中心的弧線產生最強的建構（Ostlery 的五個是同心圓）；
- 任何其他輪廓：{ path, half }，框中單位的 SVG 路徑數據，從點應該開始的位置開始，以及第二個錨點所在長度的比例：一個圓角條作為一個輪廓、一個正方形的對角線、一個三角形的中位數、一個字母的莖和碗。沒有弧線的標誌需要這些。 為每個設定 dim: [x, 50]，其中尺寸線從中心軸開始（其右邊緣的交叉點），因此線條水平延伸到文字欄。查看建構的每個階段：大圓內的小圓可以讀作一張臉（Tovra 的硬幣有三個小弧線，讀作兩隻眼睛和一個皺眉）；改為繪製它們修整的形狀（T 作為兩個圓角條）。永遠不要使用邊界框、鋼筆工具、游標或任何設計工具道具。
線條和基本形狀的時間（LINES、T.lines、T.circles）：線條在 0.75、2.0、3.25 和 4.5 秒（最後一個與填滿一起）。五個基本形狀從 0.75 秒開始，每 0.75 秒一個；如果較少，則在每個線條時間開始一個（三個：0.75、2.0、3.25）。然後將 keyTimes（接近檔案末尾）移動到您影片的時刻：每個基本形狀繪製期間和每個線條暫停期間各一個。
填滿（FILLS）：順序來自標誌的理念，並且理念回報的部分首先點亮。每個步驟是 rise（一個部分從其腳部向上填滿）、along（一個條帶沿其中心線填滿，給定為框中單位的路徑及其長度，從一端到另一端）或 grow（一個部分從一個點向外填滿）；每個在 STROKE 上持續 0.6–0.75 秒，下一個在上一個完成之前開始，以便沒有步驟停止。Ostlery：門口從其門檻上升，然後外拱和內拱沿其自身路徑填滿，左腳從頂部越過。單一部分的標誌填滿一次（Tovra 的硬幣從其腳部升起綠色，像其應用程式的付費列）。
鏡頭進入的位置（DOOR）：標誌實心部分中間的一個點，該部分周圍至少有 19.2 × 10.8 單位（拉伸開始時的畫面，每單位 100 px），因此推入落在一個顏色上。如果沒有部分那麼大，則一起提高 UP 和 UP2（影片的檢查會說它何時落下）。推入進入標誌理念說「內部」的地方（Ostlery：穿過其門）。

4. 擦拭、角落形狀、文字區域和輸入

擦拭（archWipe、WIPE、T.wipe）：從標誌區域到文字區域的變化永遠不是硬切。它是標誌自身形狀之一，縮放得比畫面寬得多，在 0.55 秒內上升或滑過區域，場景在內部，在其邊緣清除畫面遠角時結束，因此其穩定發生在螢幕上。Ostlery 的是其門口；Tovra 的是其硬幣的圓盤。在 archWipe 中將您的繪製為路徑（保留其 keep 參數：影片也會裁剪其外部）。第一個字騎在兩個區域上。
角落形狀（corners）：標誌的兩塊從畫面邊緣窺視文字區域（Ostlery：其外拱右上角，填滿；一個門口輪廓左下角），以緩出方式滑入；大到足以讀作形狀，永遠不會穿過文字或輸入，並且永遠不會被畫面切割成一個雜散缺口。
文字區域（LINE）：墨水，其文字以背景顏色（參考）。如果產品的輸入或按鈕是深色的，它會在墨水上消失：設定 LINE = { field: C.paper, text: C.ink }（然後第一個字在擦拭內採用線條的顏色）。
輸入（INPUT、SEND、BUTTON、COMP、ICON_UP）：產品的一個真實元件，從其 CSS 在影片比例下重繪，永遠不要將其兩個部件連接成它沒有的東西。 按優先順序：
1. 一個帶有內部發送按鈕的欄位（INPUT.kind = 'field'，參考）：其填滿、其圓角（INPUT.round，其圓角半徑作為其高度的比例；0.5 完全圓角）、其發送的顏色、形狀（SEND.round）和圖示、其文字字型和粗細。一個白色圓盤彈出，伸展成欄位，發送在其末端進入，line2 以每個字母 0.045 秒的速度鍵入，帶有穩定游標。
2. 其主動作按鈕（INPUT.kind = 'button'），當它沒有這樣的欄位時：一個按鈕顏色的圓盤彈出並伸展成按鈕（其自身半徑，INPUT.round），其圖示和標籤（line2，按鈕的真正標籤）以一個動作設定；無鍵入。BUTTON 保持其大小：保留應用程式自身的比例

…（截斷以供翻譯）

5. 渲染

node scripts/render.mjs film --times key --sheet --out out/film

比較 out/reference/16x9-sheet.png 和 out/film/16x9-sheet.png：時間軸、大小、節奏和顏色應該匹配參考。如果有差異，調整 film/index.html 中的 ADAPT 設定並重新渲染。

6. 校對

從 out/film/ 播放影片（open out/film/ 或您的檔案瀏覽器）。檢查每個節拍：

建構線是否在正確的位置？
線條是否在正確的時間出現？
填滿是否平滑？
擦拭是否正確？
輸入是否正常運作？
鎖定組合是否正確？

如果一切正確，影片已準備好交付。

故障排除

建構線不匹配：檢查 GRID_X 和 GRID_Y 中的值。
填滿不正確：檢查 FILLS 中的順序和類型。
擦拭不正確：檢查 WIPE 中的路徑。
輸入不正確：檢查 INPUT、SEND、BUTTON 和 COMP 中的值。
時間軸不正確：檢查 keyTimes 和 T.* 值。

版本歷史

v1.0：初始版本。

授權

此技能根據 MIT 授權條款提供。

貢獻

歡迎錯誤報告和功能請求。請在 GitHub 上開啟議題。

Android 風格標誌揭幕