像素完美網站
AI 網站之所以看起來普通，不外乎三個原因：模糊的計劃、套用圖庫的素材，以及沒有人實際檢視成果。這項技能同時解決這三個問題：素材由 Higgsfield 量身生成，計劃是帶有具體數值的像素完美提示詞，成果則在交付前透過螢幕截圖進行檢查。
請務必依序執行以下步驟。
1. 閱讀需求並決定（無需反覆提問）
決定以下五件事，並用簡短的訊息說明您的選擇：
- 對象與目的： 產品或人物，以及頁面想要說服誰。
- 三個詞的氛圍（例如：「平靜、高級、夜晚」）。
- 一種效果，作為頁面的識別標誌（食譜請見
references/efeitos.md）：- 滑鼠跟隨： 一個角色轉頭跟隨滑鼠（由滑鼠控制的影片）；
- 手電筒： 滑鼠游標開啟一個圓圈，顯示圖像內部的內容；
- 循環： 將靜態照片轉為循環影片，並帶有圖層視差效果。
- 輸出： 僅一個
index.html（預設），或者只輸出像素完美提示詞而不實際構建（當只要求提示詞時）。 - 範圍： 僅英雄區（預設）或整個著陸頁。
僅在無法繼續執行時提問（例如：真實品牌的名稱）。
2. 在 Higgsfield 生成資產
資產是讓頁面看起來高級的關鍵。優先順序：
- 使用使用者提供的資產。
- 透過 MCP 在 Higgsfield 生成，根據所選效果的食譜（詳見
references/efeitos.md）。 - 如果無法生成：則建立僅包含排版和動畫的頁面。絕對不能使用灰色方框、圖庫圖片或偽造的 URL。
適用於任何效果的規則：
- 先圖片，後影片。 圖片消耗少量點數，影片消耗數十倍。只有在圖片確定無誤後才生成影片。生成影片前請告知成本。
- 第二張圖片永遠是第一張的編輯版本（使用 Nano Banana 編輯基底），並保持「everything identical」，只改變一個地方。從頭重新生成會導致所有元素錯位。
- 方向以圖像邊緣為基準，而非角色本身（例如：「head turned toward the LEFT edge of the image」）。如果說「他的左邊」，模型會出錯。
- Nano Banana 一次只能處理一個任務。 發送一個，等待完成，再發送下一個。同時發送兩個會返回限制錯誤。
- 預留一半空白給文字： 主體位於一半，另一半保持簡潔。
- 圖像背景 = 頁面背景。 記下圖像邊緣的十六進位色碼；它將用作
--bg。
3. 撰寫像素完美提示詞
按照以下八個部分依序撰寫提示詞，並遵循 references/especificacao.md 中的模型：
字型、顏色、資產、結構、動畫、JavaScript、響應式、檢查。
每個部分都必須有具體數值。避免「漂亮的漸層」或「流暢的動畫」：每個形容詞都應附上產生該效果的具體數值。同時撰寫頁面的實際文字（標題、副標題、導航、按鈕）。
如果只要求提示詞，那麼提示詞即為交付成果：請使用 references/revisao.md 進行檢查，並在此步驟停止。
4. 構建
精準按照提示詞進行構建：
- 一個包含
<style>和<script>的index.html，字型透過連結引入，CDN 函式庫需指定固定版本。 - CSS 的第一條規則應將背景設定在
html, body上，以避免白色閃爍。 - 使用語義化 HTML、真實的
<title>、alt屬性、可見的焦點樣式，並尊重prefers-reduced-motion。 - 在手機（無滑鼠）以及啟用減少動畫的情況下，效果應停留在一個好看的靜止畫面上。
- 禁止使用 lorem ipsum、佔位方塊或表情符號作為圖示。
5. 查看並修正（強制）
拍攝桌面版 (1440×900) 和手機版 (390×844) 的螢幕截圖，並仔細檢視這些截圖。使用 Playwright：npx playwright screenshot --viewport-size=1440,900 index.html desktop.png。如果沒有截圖工具，請註明頁面未經視覺檢查，並根據 references/revisao.md 手動審查程式碼。
使用 references/revisao.md 中的評分標準評分，找出最弱的三個項目並用具體數值修正，然後再次截圖。最多進行三輪修正，直到平均分數超過 8 分且沒有任何單項低於 7 分。
6. 發布（如果要求）
Higgsfield 的 MCP 可以將網站部署到 .higgsfield.app 網址（使用 create_website 和 deploy_website；詳細步驟請查閱 get_workflow_instructions 中的 website-builder-flow）。每次部署都會自動公開：請提前告知，並確保網站上不包含任何密鑰或個人資料。
7. 交付
- 提供檔案，並說明如何開啟。
- 提供最終的桌面版螢幕截圖。
- 用兩三行說明所選效果及設計決策。
- 列出每個資產在 Higgsfield 花費的點數。
- 如果有任何臨時項目，請說明需要更換的內容。
檔案
references/efeitos.md：三種效果的食譜，包含生成提示詞和程式碼。references/especificacao.md：八段式像素完美提示詞的模型。references/revisao.md：評分標準和修正循環。
此結構（需求 → 媒體 → 規格 → 構建 → 截圖）改編自 MotionSites Web Builder，採用 MIT 授權（請參閱 LICENSE.md）。本技能的提示詞、食譜和程式碼均為我們所有。