nateherkai/scroll-craft

解決的問題

Scrollcraft 解決了 AI 生成網站常見的失敗問題，即網站要麼過於普通且容易被遺忘，要麼雖然花俏但設計不佳（例如：糟糕的排版、移動端響應性差、重複的版面）。它將高階互動設計與美學工藝視為一個整合流程，創造出獨特且專業的高保真度滾動驅動型網站。

工作原理

作為 Claude Code 的一項技能，Scrollcraft 使用專用引擎和一組嚴格的設計限制，引導 AI 按特定生產流程進行：

• 頁面語法：使用八種互斥的版面結構（如「電影式單鏡頭」或「連續世界」），確保網站不會趨同為單一的通用風格。
• 指紋門控：為防止重複，新建構必須在至少 6 個維度（語法、導航、主視覺、動作形態、收尾、標誌性動作）中與先前專案至少有 4 個不同。
• 設計底線：對排版（最多兩種字型、特定行高）、間距（4px 基礎節奏）和色彩（六種角色，禁止純黑）實施嚴格規則，以維持專業水準。
• 情感曲線：在建構前為每個「動作」映射情感意圖，確保存在一個工程化的高參與度峰值。
• 自動驗證：使用無頭瀏覽器（Playwright）對最終頁面進行審計，檢查「無效滾動」（滾動無反應區域）、對比度問題和損壞資源。

適用對象

使用 Claude Code 的設計師與開發者，希望建構高保真度、滾動驅動型著陸頁，避免「AI 風格」並符合專業設計標準。

核心亮點

• 滾動即時間軸：支援高階互動，如逐幀影片拖曳、固定區域、平移軌道。
• 客製化互動：每個建構都必須發明一個獨特的「標誌性動作」互動。
• 嚴格拒絕清單：明確禁止常見 AI 模式，如漸層文字、相同的特色卡片網格、「AI 紫色」漸層。
• 品牌整合：允許品牌套件作為硬性限制，覆蓋技能的預設偏好。
• 自我審計：自動檢查所有滾動位置的可存取性（對比度）與技術故障（未解碼的片段）。