scroll-craft

scroll-craft 是做什麼的？

滾動是每位訪客都已經知道如何使用的唯一輸入方式。這項技能將其視為一條時間線：滾輪是拉動時間軸的控制桿，頁面是一部帶有真實文字的電影，而每個區塊的行為都足夠不同，讓訪客會一直往下滾，想看看下一個區塊會做什麼。

你會產出： 一份訪談簡報、一份頁面語法、一份客戶旅程地圖、一條帶有一個精心設計高峰的感受曲線、一個滾動分數、一個簽名動作、生成的資產、一個在代幣驅動設計基礎上的真實 HTML 頁面，以及一組證明其在每個滾動位置都表現良好的螢幕截圖。

這不是什麼

這不是「生成一段飛越鏡頭然後在上面放文字。」這種方法會對整個頁面應用同一種裝置，而且用這種方式建立的每個網站都一目了然：同樣的黏土動畫場景、同樣置中的文案、同樣的 01 / 06 計數器、同樣的「滾動探索」提示。五個行為完全相同的區塊，只是一個區塊被展示了五次。

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

1. 多樣性就是產品。 一個頁面至少使用四種裝置系列，且絕不連續兩次使用同一種裝置。請閱讀 references/devices.md。
2. 世界是攝影寫實的，除非品牌本身就是插畫風格。 柔和的霧面低多邊形黏土立體模型被禁止作為預設風格。請閱讀 references/worlds.md。
3. 沒有連續長鏡頭。 單一不間斷的攝影機飛行是你所能建造最昂貴、最脆弱的東西，而且它的存在只是為了隱藏場景之間的切換。改為變化裝置，切換就會自動消失，因為訪客並不是在看一部電影。只有當設計簡報明確要求「一段連續的旅程」時，才使用連續長鏡頭。
4. 不同的世界不是一個不同的頁面。 裝置套件改變的是頁面的外觀。結構則是一個獨立的維度，必須審慎決定，否則每個建置都會繼承相同的骨架。最初的幾個建置正是如此。請閱讀 references/uniqueness.md。

標準英雄區域偏好

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

在規劃英雄區域或生成其資產之前，請閱讀 references/hero-depth.md。它涵蓋了乾淨的素材、真實的 Alpha 遮罩、共享的接觸點、層次間的字體排版、克制的滾動編排、行動裝置的藝術指導以及視覺驗收，並附有已核准的 Sonder 範例。使用適合所選語法的構圖；不要重複 Sonder 的場景，也不要將固定效果強加於禁止它的語法。尊重明確的靜態或更簡單的指示，並在減少動畫的情況下，於靜態構圖中保留深度感。

核准的集合標準

在規劃高級行銷網站之前，請閱讀 references/approved-collection.md。它濃縮了核准的十個網站重建項目：真實的品牌研究、層次合約、有意義的指標/滾輪深度、合適的攝影或 3D 渲染、獨特的導覽與結尾、有用的互動、行動裝置藝術指導以及最終套件中的證據。這些是執行原則和實際案例，而非可重複使用的頁面骨架。

步驟 0：簡報與創意權限

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

否則，針對缺失的決策進行訪談。提出實際問題，記錄答案，並避免從名稱推斷整個品牌。

這項技能是一個範圍工具，而非一種固定風格。人類帶來意圖和他們擁有的任何資產；訪談的目的就是將這些轉化為正確的頁面類型：一個不間斷的世界、不同的場景、章節、印刷頁面、一個即時互動表面。這項技能可以勝任其中任何一種。由訪談來決定哪一種。

保持簡短。八個問題，一次問完：

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：以品牌的語氣回答所有八個問題，在檔案頂部標記 自行撰寫，未經訪談，並在最終報告中說明。未經授權的自行撰寫簡報是備用方案。上述的明確授權是正常支援的工作流程，不需要人類無法聯繫。

初始化

這是環境，不是工作的一個階段。在訪談完成後、步驟 1 之前執行。

執行預檢，而不是手動檢查。 它知道那些稍後會以誤導性錯誤出現的失敗模式，主要是一個被剝離的 ffmpeg，它會將缺失的濾鏡報告為你命令中的語法錯誤：

node <skill>/scripts/doctor.mjs

它會報告 node、完整的 ffmpeg 構建、playwright 和 Chrome、API 金鑰以及解析後的工作區。必要的失敗會以非零代碼退出。清楚說明哪些項目缺失，而不是默默地繞過它們。

工作區

建置和指紋註冊表位於一個目錄中，並且它是被解析出來的，而非假定出來的：

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

解析順序，第一個匹配者勝出：

1. SCROLLCRAFT_HOME
2. 從 cwd 向上尋找最近的 .scrollcraft.json，其中包含 { "workspace": "..." }
3. <專案根目錄>/scrollcraft，其中專案根目錄是包含 .git 的最近祖先

所以一個建置資料夾是 <workspace>/builds/<name>/，註冊表是 <workspace>/FINGERPRINTS.md。註冊表開始時是空的：閘門的存在是為了防止你重複自己，所以你的第一個建置沒有什麼需要清除的。

如果你已經在其他地方保存建置，請在你的專案根目錄放置一個指向它的 .scrollcraft.json，這樣什麼都不需要移動。

其餘事項

1. KIE_AI_API_KEY，僅在你生成資產時需要。 一個完全使用使用者自己的照片和影片建立的建置不需要金鑰，也不需要花費，這是一條一級路徑，不是備用方案。使用 node <skill>/scripts/kie.mjs probe 確認餘額。一張靜態圖片花費幾分錢，一個 5 秒的影片片段花費更多；一個有六個行動和兩個影片片段的頁面是小的花費，而不是大的。
2. 如果存在品牌工具包（顏色、標誌、字體、現有產品圖片）。如果品牌在此儲存庫中有一個資料夾，請在生成任何東西之前閱讀它，並遵守其硬性規則。一個禁止發明數字的品牌意味著沒有統計計數器，無論它們看起來多好。

將 engine/scrollcraft.js 和 engine/scrollcraft.css 複製到建置資料夾中。絕不逐個專案編輯引擎；它是機制。使用代幣對其進行主題設定，並撰寫你自己的標記。

步驟 1：簡報，旅程優先

主題由使用者陳述。以開放的、樸實的散文提問，絕不要作為捏造的多選行業列表提出：一個捏造的選單會使他們產生偏見，並且讀起來像是你在為他們決定業務。

步驟 0 已經涵蓋了氛圍、順序、能量和範圍。不要再問任何這些。只問你無法合理地預設的問題：

1. 這是什麼，它是為誰準備的？ 用他們的話說一兩句話。
2. 訪客最後必須相信什麼？ 這個頁面存在是為了植入的那一句話。不是功能列表。如果他們給了三句，讓他們選一句。
3. 訪客下一步做什麼？ 一個動作。一個用於它的標籤，在頁面上到處使用。
4. 你已經有什麼？ 標誌、調色盤、攝影作品、產品圖片、影片片段、品牌文件。真實的資產每次都打敗生成的資產。
5. 藝術指導：提供 references/worlds.md 中的世界作為真實的選擇，並說他們可以走自己的路。

然後在其它任何事情之前撰寫旅程：四到七個節拍，每個節拍都是訪客所知或所感的一次轉變。

1  認知      他們看到了自己的早晨
2  緊張      它的代價，被直白地說出
3  轉折      改變一切的東西
4  實質      為什麼它經得起考驗
5  範圍      他們可以選擇什麼
6  承諾      那一個動作

節拍是骨幹。區塊服務於節拍；一個不服務於任何節拍的區塊就會被刪除，無論鏡頭多好。在生成資產之前解決旅程問題。當需要使用者決策時，向他們展示；在明確的創意授權下，記錄選擇的旅程並在授權範圍內繼續進行。

步驟 2：語法、閘門，然後評分

按順序做三件事，前兩件在任何行動規劃之前完成。完整細節在 references/uniqueness.md 中。

選擇一個語法。 從八個已定義的語法及其約束開始。只有在新的語法的導覽、順序、結尾和明確的禁止條款描述了一個不同的結構時，才允許使用；單獨一個新標籤不會獲得任何信用。電影式一鏡到底是前幾個建置都使用的，所以再次選擇它意味著要在報告中說明為什麼其他七個不適合本次訪談。導航、英雄區域和結尾都遵循語法；它們不是單獨決定的。

發明簽名動作。 一個自訂的互動，僅存在於這個網站上，編寫在頁面中，而不是對套件裝置進行參數更改。訪談中的問題 5 是來源。引擎保持不變。

執行指紋閘門。 閱讀你在 <workspace>/FINGERPRINTS.md 的註冊表（參閱初始化中的工作區；執行 node <skill>/scripts/workspace.mjs 來列印路徑）。計劃中的建置必須在 6 個維度中的至少 4 個上與每個現有行不同：語法、導航處理、英雄區域裝置、行動序列形狀、結尾模式、簽名動作。針對每個行單獨比較四個維度。如果失敗，更改計畫，而不是更改日誌。

在分數表之前撰寫感受曲線。 每個行動一行：情感，然後是引起該情感的原因。曲線優先，行動其次，因為在感受之前選擇的裝置只是一個在尋找理由的裝置。兩個相鄰行動具有相同感受意味著其中一個是多餘的，在資產存在之前刪除它會更便宜。在同一次遍歷中命名高峰，並給它在頁面上最大的篇幅。完整方法在 references/feel.md 中。

然後為每個節拍分配一個裝置。審慎地執行並將其寫成一個表格：

節拍	裝置	為什麼選擇這個
認知	scrub	攝影機在讀者自己的操控下移動，這是最強而有力的開場
緊張	pin + 動態	當畫面保持靜止時，文案一行一行地組合起來
轉折	reveal	一個寬

…

[完整內容因長度截斷]