Arnie936/cool-website-en

酷站（Cool Website）

預設值

• 除非使用者明確要求其他語言，否則網站語言為英文。這包括導覽、標題、正文、按鈕、表單、驗證與成功訊息、替代文字、無障礙標籤、中繼資料以及產生的下載檔。設定 <html lang="en">（或當目標市場需要時，使用對應的地區標籤，例如 en-GB）。保留專有名詞。
• 預設使用 Codex 的整合 image_gen 工具生成和編輯點陣圖影像。遵循可用的 imagegen 技能和當前工具架構。不需要外部圖片 API 金鑰。在適當時使用提供的素材。
• 對於生成的影片，官方 Higgsfield API 為預設選項，kie.ai 為第二選項。尊重使用者的選擇；否則使用 COOL_WEBSITE_VIDEO_PROVIDER（預設值為 higgsfield）。Higgsfield 使用 references/higgsfield-api.md 中的 REST 工作流程；KIE 使用 scripts/kie.mjs shot。如果使用者還沒有 Higgsfield 帳戶，請引導他們到 https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus 註冊。僅使用 .env.example 設定選定的提供者。切勿在未告知使用者的情況下切換提供者，或將其用作圖片生成的備用方案。
• 所有瀏覽器控制和視覺驗證皆透過整合瀏覽器經由 mcp__cua_repl 進行。
• 在初次訪談後、確定頁面結構、撰寫文案或生成素材之前，立即提供可選的 DataForSEO 支援的 SEO 選項。如果選擇，請遵循 references/seo-dataforseo.md。即使拒絕研究，也要保留基本的語意 HTML 和中繼資料。
• 酷站（Cool Website）是技能名稱，而非客戶的品牌。請勿在網站上添加技能品牌、創作者標示、範例品牌名稱或核准聲明。保留隨附的 LICENSE 檔案以及引擎/軟體的副本。

滾動是每個訪客都知道如何使用的唯一輸入。此技能將其視為時間軸：滑鼠滾輪是一個搜尋器，頁面是一部帶有真實文字的影片，每個區塊的行為都足夠不同，讓訪客繼續往下看，想知道下一個區塊會做什麼。

您將產出： 一份訪談簡報、一份頁面語法、一份客戶旅程地圖、一條帶有一個工程高峰的情緒曲線、一個滾動分數、一個標誌性動作、生成的素材、位於代幣驅動設計地板上的真實 HTML 頁面，以及一系列證明其在每個滾動位置都穩固的螢幕截圖。

這不是什麼

這不是「生成一個飛越鏡頭並在上面放文字」。這種方法會對整個頁面應用一種裝置，而且以這種方式建立的每個網站都一眼就能認出來：同樣的黏土動畫立體模型、同樣置中的文字、同樣的 01 / 06 計數器、同樣的「滾動探索」提示。五個行為完全相同的區塊，只不過是同一個區塊展示了五次。

由此衍生出四條規則，它們是此技能的骨幹：

1. 多樣性就是產品。 一個頁面至少使用四種裝置系列，並且永遠不會連續兩次使用相同的裝置。請閱讀 references/devices.md。
2. 世界是攝影風格的，除非品牌確實是插畫風格。 柔和的霧面低多邊形黏土立體模型被禁止作為預設。請閱讀 references/worlds.md。
3. 沒有連續的長鏡頭。 一個不間斷的單一攝影機飛行是最昂貴、也最脆弱的建構方式，它的存在只是為了隱藏場景之間的剪輯。改為變化裝置，剪輯就會自動消失，因為訪客看的不是一部電影。只有在簡報明確要求「一次連續的旅程」時，才使用連續長鏡頭。
4. 不同的世界不等同於不同的頁面。 裝置工具集改變了頁面的外觀。結構是一個獨立的軸，必須刻意決定，否則每次建構都會繼承相同的骨架。前四次建構正是如此。請閱讀 references/uniqueness.md。

英雄區構成

對於高階行銷英雄區來說，多層次空間構成是基本要求。 在請求素材之前，請規劃獨立移動的背景、主體、前景和大氣層。一個美麗的單一背景加上文字淡入效果並不符合此偏好。深度必須來自可見的分離、遮擋以及受控的移動差異，同時標題要保持可讀性，場景要講述一個清晰的故事。

在規劃英雄區或生成其素材之前，請先閱讀 references/hero-depth.md。它涵蓋了乾淨的底片、真正的 Alpha 去背、共享的接觸錨點、各層之間的字體排版、節制的滾動編排、行動裝置的藝術指導以及視覺接受標準。 使用適合所選語法的構圖；不要重複範例場景，也不要在禁止固定的語法中強加固定元素。尊重明確的靜態或更簡單的指示，並在減少動作時，在靜態構圖中保持深度。

設計與交付標準

在規劃行銷網站之前，請先閱讀 references/design-standard.md。它涵蓋了品牌研究、獨立的視覺圖層、有用的互動、行動裝置構成以及最終的瀏覽器檢查。這些原則指導自訂頁面；它們不是固定的頁面模板。

第 0 步：簡報與創意授權

在生成任何內容之前，先確定簡報。 重複使用已提供的答案和素材。當使用者明確委託創意方向（例如，「由你判斷」或「我不想妨礙你」）時，撰寫一份「在明確創意委託下自行撰寫」的簡報並繼續進行。涵蓋以下八個主題，區分證據與假設，不要編造使用者的引言或強加另一個訪談/核准檢查點。

否則，訪談以補足缺失的決策。提出真正的問題，記錄答案，並避免從名稱推斷整個品牌。

在第一輪中包含提案、目標受眾、主要訪客行動以及現有網站/網域（如果未知）。將以下八個設計主題視為清單；將相關主題分組，每輪最多提出三個簡短問題。在獲得初步答案後，在詢問更多設計細節之前，提供第 0a 步。在設計和 SEO 訪談中重複使用已知事實。

此技能是一個範圍工具，而不是一種固定的風格。人類帶來意圖和他們擁有的任何素材；訪談就是將這些轉化為正確頁面類型的過程：一個連續的世界、不同的場景、 印刷般的章節、一個活潑的版面。此技能可以做到任何一種。由訪談來決定是哪一種。

涵蓋這八個主題，但不要一次強迫問完全部八個問題：

1. 用三到五個單字形容氛圍，加上最多三個來自任何媒介的參考。可以是電影、專輯封面、商店、雜誌、遊戲。不是「你喜歡的網站」：說出網站名稱會導致頁面看起來像現有的網站。
2. 逐區塊描述滾動旅程，使用他們自己的話。 訪客應該先看到什麼、接下來是什麼、最後是什麼。是他們的順序，而不是你提供的選單。
3. 能量曲線。 哪些部分應該感覺平靜，哪些部分應該感覺強烈。從頭到尾都大聲的頁面，和從頭到尾都安靜的頁面一樣平淡。
4. 在滾動的各個階段，應該讓人有什麼感覺？哪一個時刻是他們應該記住的？ 能量是音量大小。這是情感，兩者並不總是對齊：在一個大聲的頁面上，安靜的動作可能是最強烈的。逐階段的答案成為情緒曲線，而那個唯一時刻成為高峰。兩者在 BRIEF.md 中都是必需的。請參閱 references/feel.md。
5. 這個網站應該做一件他們從未見過其他網站做過的事。 這是標誌性動作的種子。設法得到一個真正的答案；「令人難忘」不算。
6. 他們希望偏離高階簡約風格多遠。 提供 uniqueness.md §5 中的範圍：野獸派、極繁主義、俏皮、復古、密集、編輯風格、高階簡約。他們的答案決定美學系列，而不是你的品味。
7. 一個連續的世界，還是不同的場景？ 整個頁面是否應該感覺像一個滾輪飛越的連續場所（世界飛行，請參閱 references/worldflight.md），還是像分開的場景、章節或剪輯？這是唯一最大的結構分歧，由他們決定，而不是你之後選擇的裝置。清楚提供兩者；兩者都不是預設選項。
8. 他們已經有哪些素材？ 影片片段、照片、產品照、品牌工具包、他們自己的剪輯。真實的素材能錨定世界並降低生成成本；答案決定了哪些需要分級和編碼，哪些需要生成。「完全沒有」也是一個很好的答案，這意味著完全生成的世界。

在任何行動規劃之前，將答案寫入 <workspace>/builds/<name>/BRIEF.md，使用他們自己的話，而不是改寫成行銷文案。下游的一切都從該檔案讀取。

BRIEF.md 至少必須包含：

• 八個主題，並附上使用者的逐字答案（如有提供），以及明確標記為自行決定的決策。
• 情緒曲線。 每個階段一行：情緒，然後是螢幕上造成該情緒的原因。在階段存在之前就先寫好，隨著結構的完成而補充。
• 高峰。 那個唯一時刻，寫成訪客會對朋友說的一句話，以及它位於哪個階段。
• 完成的「告訴某人」句子。 「這是一個___的網站」，用體驗來填寫，而不是裝置名稱。
• 任何授權的沉默，以便驗證環節能將其與死滾動區分開來。

references/feel.md 是以上四個項目的規範。

如果使用者真的無法聯繫，且整個運行完全自主，請自行撰寫 BRIEF.md：以品牌的語氣回答所有八個問題，在檔案頂部標記「自行撰寫，未經訪談」，並在最終報告中說明。未經委託的自行撰寫簡報是備用方案。上述的明確委託是一種正常的受支援工作流程，並不要求使用者無法聯繫。

第 0a 步：早期 SEO 選擇

在第一次訪談回答之後，詢問（使用使用者的語言）： 「我是否也應該針對 Google 最佳化網站？使用 DataForSEO，我可以檢查相關的搜尋詞和競爭對手，並將結果直接反饋到頁面結構和文案中。」 提供選項：「是的，使用 DataForSEO」、「僅基礎技術」、「稍後」。 如果使用者已經選擇了 SEO，則跳過此問題。僅憑創意委託本身並不能授權安裝外部服務或花費 API 點數。

如果回答是肯定的，請遵循 seo-dataforseo.md：完成重點資訊收集、連接或提供安裝 MCP 的選項、建立研究預算、研究選擇的市場，然後在整個建置過程中使用研究結果。僅在需要設定/驗證和點數指導時，才閱讀 dataforseo-setup.md。僅憑伺服器 URL 就足以識別遠端連線；帳戶授權仍然必須完成。

在 BRIEF.md 中記錄 SEO: enabled | basics-only | deferred | blocked，如果啟用，還要記錄目標市場和預算。如果選擇僅基礎技術或稍後，則繼續進行而不安裝 MCP 或進行付費研究。如果連線被阻止，則繼續進行獨立的設計和技術工作；將關鍵字決策標記為暫定。不要將待處理的 DataForSEO 研究呈現為已完成。

引導

這屬於環境設定，不是工作階段。在訪談完成後、第 1 步之前執行。

執行預檢指令，而不是手動檢查。 它知道稍後會以誤導性錯誤形式出現的故障模式，主要是缺少某些元件的 ffmpeg，它會將缺少的過濾器報告為命令中的語法錯誤：

node <skill>/scripts/doctor.mjs

它會報告 Node.js、完整的 ffmpeg 建置、可選的 API 金鑰以及解析後的工作空間。僅在計劃進行影片生成時添加 --video。必要失敗會以非零退出碼退出。瀏覽器控制和驗證使用 Codex 的整合瀏覽器透過 mcp__cua_repl 進行；此技能不需要單獨的瀏覽器自動化套件或本機瀏覽器執行檔。

工作空間

建置和指紋註冊表位於一個目錄中，並且它會經過解析，而非假設：

node <skill>/scripts/workspace.mjs --ensure     # 印出路徑、建立目錄、初始化註冊表

解析順序，第一個命中者獲勝：

1. COOL_WEBSITE_HOME 環境變數
2. 從目前工作目錄向上找到的第一個 .cool-website.json，內容為 { "workspace": "..." }
3. <專案根目錄>/cool-website，其中專案根目錄是向上找到的第一個包含 .git 的目錄

因此，建置資料夾為 <workspace>/builds/<name>/，而註冊表為 <workspace>/FINGERPRINTS.md。註冊表以空白開始：此閘門的存在是為了阻止你重複自己，所以你的第一次建置沒有需要清除的內容。

如果你已經將建置放在其他地方，請在專案根目錄放置一個指向該位置的 .cool-website.json，這樣就不需要移動任何東西。

其餘事項

1. 圖片使用整合的圖片模型；不需要外部金鑰。 對於生成的影片，請將 .env.example 複製到網站專案根目錄並命名為 .env，僅填入所選提供者的資訊，然後執行 doctor.mjs --video。 --provider higgsfield|kie 會為此檢查覆蓋已設定的提供者。 Higgsfield（預設）使用 HF_API_KEY_ID 加上 HF_API_KEY_SECRET 以及其主控台來查看餘額/定價；新帳戶請在 https://higgsfield.ai/s/mcp-arnold-oberleiter-ecZvus 註冊。KIE 使用 KIE_AI_API_KEY 和 scripts/kie.mjs probe。 遵循 references/assets.md。在 BRIEF.md 中記錄提供者、模型和授權預算。提供的影片片段不需要 API 呼叫。
2. 品牌工具包（如果存在）（顏色、標誌、字體、現有產品照）。如果品牌在此儲存庫中有一個資料夾，請在生成任何內容之前閱讀它，並遵守其嚴格規則。禁止發明數字的品牌意味著沒有統計計數器，無論它們看起來多好。

將 engine/cool-website.js、engine/cool-website.css 和 LICENSE 複製到建置資料夾。 切勿按專案編輯引擎；它是……

[已截斷以進行翻譯]