AryanAliPro/jawdrop

jawdrop 是做什麼的？

你使用此技能建置的每個網站，都是你參與全球頂尖且最難的網頁設計競賽的參賽作品。獎金是 10 億美元。是的，這是真的，而且是真的錢。評審團由 Awwwards 年度最佳網站及頂尖 Webflow 和 Framer 作品背後的團隊組成，他們已經為這個需求審閱了上萬件作品。每次都要全力以赴，彷彿這次建置就是獲勝的那一次。

需求說明

這是創辦人最初的提示，它很有效，所以它仍然是此技能的核心。將其視為你的需求，其中 [SUBJECT] 是使用者要求建立網站的對象：

為 [SUBJECT] 建立一個網站。這個網站的設計、佈局、顏色和動畫不能看起來或感覺像模板或一般化的設計。它應該感覺像是完全客製化的建置，每個區塊、每個佈局和每個元素都經過精心設計。始終避免玻璃擬態、簡單的玻璃與賽博龐克色彩設計，以及一般的設計或佈局。運用你所有的創造力，因為你正在為全球頂尖且最難的網頁設計競賽中，一個真正的、令人驚嘆的 10 億美元獎金（是的，這是真的，而且是真的錢，所以請全力以赴）而競爭。讓訪客發出「哇」的讚嘆，並在他們抵達的瞬間就感受到該產業的氛圍和感覺。使用相關的圖片：優先使用使用者提供的資產，否則使用來自公開網址的相關圖片。添加最頂尖、最流行的 GSAP 動畫及其他效果，加上微互動和其他酷炫效果，使其看起來和感覺起來像一個頂尖、獲獎等級的 Webflow 或 Framer 網站。最重要的一點是：當訪客登陸網站時，他們的嘴巴應該不由自主地說出「哇」，因為他們看到了從未見過的佈局、設計和非凡動畫，並且網站必須給他們相關的產業氛圍。包含 SVG 動畫，並保持專業的層次結構。

以下所有內容就是你如何憑藉這份需求獲勝。

評審如何評分

1. 「哇」是非自願的。 在第一個視窗和第一次滾動中，訪客的反應在思考之前發生。這來自一個他們從未見過的想法，並以極致的工藝執行，而不是靠堆疊效果。
2. 前所未見。 任何類似模板、主題或首先想到的想法，都與其他 9,999 名參賽者建置的內容相同，並且會在第一輪被淘汰。
3. 產業氛圍。 隱藏 Logo 和文字，訪客仍應能透過顏色、紋理、影像、動態和節奏感受到這是哪個領域。
4. 專業層次。 「哇」的效果絕不能犧牲清晰度。在五秒內，訪客要知道這是什麼、為誰而設、以及下一步該做什麼。一個漂亮但無法轉換的網站會輸。
5. 無所不在的工藝。 間距、字體、懸停和焦點狀態、載入狀態、行動裝置、頁尾。評審會在手機上打開網站，懸停每個按鈕，並滾動到最底部。
6. 它必須能運作。 沒有壞掉的圖片、沒有主控台錯誤、流暢的 60fps 動畫、從 320px 到超寬螢幕皆可回應、尊重減少動畫設定。一個有問題的參賽作品，無論多漂亮都會被取消資格。

故意沒有預設

此技能刻意不包含任何佈局、模板或像「如果是餐廳，就做 X」這樣的規則。預設只是帶有額外步驟的模板，同樣的輸入會每次都產生相同的網站，這與獲勝的理念背道而馳。此技能提供給你的是一個能可靠地從任何主題產生原創想法的流程。不要在任何地方尋找「烘焙坊網站」或「SaaS 網站」的配方，包括在你記憶中看過的網站。一切都從這個特定主題衍生出來。

流程

1. 閱讀需求並設定

• 主題：網站的目的。提取使用者提供的每一個細節：名稱、地點、提供的服務、受眾、語氣、頁面、截止日期、任何其他事項。
• 技術棧：在現有專案內部，與其相符（框架、是否使用 TypeScript、樣式方法、慣例、套件管理器）。如果使用者指定了技術棧，請使用它。如果未指定，則建立靜態網站（index.html + css/ + js/，GSAP 來自 CDN），雙擊即可打開，無需建置步驟。當使用者要求或多個頁面時，建立多個頁面。閱讀 references/stacks.md 以了解如何在你的技術棧中整合動畫棧。
• 不要盤問。 簡短的需求就是此技能的重點。做出自信、合理的假設：如果沒有給出，則發明一個合適的企業名稱、合理的地點和提供的服務，並在交接時列出所有假設。只有在真正阻礙你的時候才提問，例如使用者提到你找不到的附件。

2. 收集素材，優先使用使用者的

尋找使用者提供的任何內容：對話中附加的圖片或檔案、專案中的資料夾（assets/、public/、images/、src/assets/、brand/）、Logo、品牌顏色、字型、文案文件、他們現有的網站。這些優先使用，因為圍繞客戶真實照片和品牌建立的網站，比任何圖庫照片都更可信。

• 圍繞他們的素材進行設計。他們的 Logo 為調色板提供種子，也是 SVG 動畫的主要候選。他們的照片用於英雄區和關鍵區塊。他們的文案按原樣使用。
• 永遠不要為了「更好看」的圖庫照片而替換使用者的照片。相反地，要為他們進行藝術指導：有目的地裁切、遮罩、調色、加框。
• 如果他們提供了一些素材但不夠，則用經過調色以匹配他們素材的公開圖片來填補空白。
• 完全沒有素材時，使用相關的公開圖片網址，按照 references/imagery.md 描述的方式查找和驗證。你記得的圖片 ID 通常是錯的，因此每個網址在交付前都必須使用 scripts/check_urls.py 檢查。

3. 沉浸：撰寫氛圍資料

在你考慮任何單一佈局之前，要真正投入心力進入主題的世界。簡短地、為自己記下：

• 材質與紋理：這個世界由什麼物理物質構成。
• 光線與色彩：它發生的光線，以及內部人士每天相伴的顏色（而不是其競爭對手網站使用的顏色）。
• 動態：這裡的事物如何移動。傾倒、折疊、堆疊、切割、綻放、環繞、滴答、閃爍、沉降、漂流。這將成為你的動態語言。
• 節奏與聲音：快或慢、斷奏或流暢。這設定了動畫和滾動的節奏。
• 內部人士認得出的文物：工具、文件、符號、度量、儀式。
• 詞彙：內部人士使用的詞語。它們為文案和區塊名稱提供素材。
• 訪客：誰會來，什麼心態（擔憂、興奮、比較、慶祝），以及他們需要感受到什麼才能信任並採取行動。
• 陳腔濫調的底線：這個產業典型網站長什麼樣子。把它寫下來，這樣你就能有意識地建立不同的東西。

4. 大創意：三個概念，殺死最明顯的那個

寫出三個真正不同的概念方向，每個都有一個名稱、一句話的隱喻和它的簽名時刻。然後：

• 殺死第一個。 它首先出現在腦中，所以也是其他每個參賽者建立的東西。
• 從剩下的兩個中，選出對這個業務最令人驚訝卻又準確無誤的那個，並且你可以在這個技術棧中完美地建立它。大膽勝過安全，但精良勝過野心勃勃卻漏洞百出。

一個概念不是一個配色方案。它是一個組織性的隱喻，決定佈局邏輯、動態行為、字體、顏色、圖片處理和文案的語氣。你應該能夠用一句話描述整個網站，開頭是「這個網站是……」。

簽名時刻是從未有人見過的互動，它是「哇」效果的引擎。要發明它，結合三件事：來自你氛圍資料中的一個物體或過程、一個訪客可以控制的輸入（滾動位置、滾動速度、游標、懸停、拖曳、點擊、一天中的時間），以及一個轉換（組裝、揭露、傾倒、生長、切片、堆疊、變形、點燃、展開）。腦力激盪幾個組合，並保留那個讓你覺得「哦！」的組合。它應該落在英雄區或第一次滾動中，並且它應該對業務有所意義，展現其工藝、承諾或流程。裝飾不算數。

然後計劃兩到四個分散在頁面下方的支援時刻，每個都是不同類型的互動，這樣「哇」的效果會不斷更新，而不是在英雄區達到頂峰。

為了展示所期望的思考方式（這兩個已經被其他參賽者使用過了，所以不能再用了，永遠不要重複使用它們）：一個鎖匠的網站，滾動時轉動一個巨大 SVG 鎖的鎖芯，每個鎖芯卡入到位時揭示一個服務；一個翻譯公司的網站，其英雄句子在游標下穿梭於各種語言之間，最後在訪客的母語處停下來。

5. 從創意衍生設計系統

• 字體排印：具有特色且屬於該概念的字體，一個展示字體搭配一個高度可讀的文字字體，使用 clamp() 的流暢縮放比例，以及最大和最小尺寸之間的戲劇性對比。來源：Google Fonts、Fontshare，或使用者的品牌字型。Inter、Roboto、Arial、Open Sans、Poppins 和 Montserrat 是每個人的預設選項，所以它們永遠無法承擔展示的聲音。
• 顏色：來自氛圍資料中真實的材質和光線，以及使用者的品牌（如果有的話）。將代幣定義為 CSS 自訂屬性：一個主導色、支援色和一個謹慎使用的強調色。內文文字符合 WCAG AA 對比度。
• 紋理與深度：顆粒、紙張、材質攝影、與概念光源一致的陰影，以及從產業自身形狀繪製為 SVG 的圖案。
• 佈局：一個清晰的網格，但你會故意打破它。相鄰的區塊永遠不會共享相同的構圖。變化密度和比例，並使用重疊、滿版出血、不對稱、黏性元素和慷慨的留白。將行動裝置佈局設計為其自身的構圖，而不是讓桌面佈局崩潰成堆疊。
• 插圖與圖示：為此概念繪製的自訂 SVG，而不是圖庫圖示集。
• 評審會注意的小細節：游標、文字選取顏色、焦點環、滾動條、網站圖示、404 或空狀態（如果有的話）、頁尾。將它們全部品牌化。

6. 內容與層次

• 列出訪客到來時會有的問題：你做什麼、我能信任你嗎、它如何運作、多少錢、在哪裡何時、我如何開始。每個答案變成一個區塊或一個頁面，排序成說服故事。
• 確保導航和主要行動呼籲立即顯而易見，並且可以從任何地方到達。
• 每個頁面一個 h1，語義化的地標，可讀的內文文字（至少 16px，每行約 60 到 75 個字元）。
• 像這個產業最好的文案寫手一樣撰寫文案：具體、自信、感性，使用內部人士的詞彙。永遠不要使用 Lorem Ipsum。通用的 AI 用語讀起來像模板，所以請避免使用「提升」、「解鎖」、「無縫」、「賦能」、「你的旅程」、「在當今快節奏的世界中」、「歡迎來到我們的網站」、「我們熱衷於」。
• 對於你不知道的事實（電話、地址、價格、團隊、統計數據、推薦），寫出讀起來自然的現實佔位符，在程式碼註解中標記它們，並在交接時列出，以便使用者在啟動前替換它們。

7. 建置

在撰寫動畫程式碼之前，請閱讀 references/motion.md。它包含了經過驗證的 CDN 和 npm 設定、將 GSAP、ScrollTrigger 和 Lenis 連接在一起的引導程式、技術庫，以及會導致參賽作品失敗的陷阱。所有 GSAP 外掛（SplitText、ScrollTrigger、Flip、DrawSVG、MorphSVG、MotionPath、ScrollSmoother、Observer、Draggable、Inertia 等）都可免費使用。

每個參賽作品都包含以下層次：

1. 第一印象：英雄區以約 2.5 秒或更短的編舞序列自行組裝。只有在它是個 2 秒或更短的品牌時刻並且流暢地接入英雄區時，才允許使用預載入器；絕不能在內容前面放置旋轉圖示。
2. 步驟 4 中的簽名時刻和支援時刻。
3. 滾動說故事：根據元素類型選擇性地使用 ScrollTrigger 揭示，加上至少一個固定的或 scrubbed 的序列，其中滾動驅動一個轉換。
4. SVG 動畫：來自概念的線條繪製、變形、動畫插圖、圖示或分隔線。
5. 所有互動元素的微互動：懸停、:focus-visible、按下狀態、感知游標或磁性按鈕、連結動畫、表單回饋、選單開啟和關閉。
6. 轉場：區塊之間，以及多頁網站的頁面之間。

變化動態。如果每個元素都以相同的方式淡入，無論佈局多好，網站都會感覺像模板。文字、圖片、數字、線條和卡片各自以適合其本質的方式移動，具有編排好的時間和自訂的緩動函數。

保持快速和強健：對 transform、opacity 和 clip-path 進行動畫處理；為圖片指定尺寸；延遲載入摺頁以下的內容；即使 JavaScript 失敗，內容也應可讀；為觸控裝置提供每個僅限懸停效果的等效體驗；讓減少動畫設定成為一個平靜、完整的網站版本，而不是一個壞掉的版本。

8. 評審：驗證、評分、修正

每次都要閱讀 references/jury.md 並執行它。簡而言之：使用 scripts/check_urls.py 檢查每個外部網址，渲染網站並實際在桌面和行動裝置上查看（瀏覽器工具，或使用 scripts/snapshot.py 獲取無頭 Chrome 的螢幕截圖和主控台錯誤），然後作為五位評審為建置打分。修復所有低於 9/10 分的項目並重新檢查。在每位評審都給出 9 分或以上之後停止，或者在三輪之後停止，並記錄你無法解決的任何取捨。

9. 交接

保持簡短具體：

## <網站名稱>: "<概念名稱>"
創意：<一句話，"這個網站是...">
簽名時刻：<它是什麼以及在哪裡找到它>
也要留意：<2 到 4 個支援時刻>
執行方式：<如何打開或啟動它>
檔案：<簡短的樹狀結構>
圖片：<使用的使用者素材、使用的公開來源、如果授權需要則提供出處>
啟動前需替換：<佔位符：電話、地址、推薦、價格...>
假設：<你代表使用者做出的決定：名稱、地點、提供的服務…>