新區塊
一個用於已建立規則的網站上單一區塊的簡短流程。它是 futuristic-web-design 技能的區塊步驟，封裝後可獨立運作。
如果 ../futuristic-web-design/ 位於此技能旁邊，其參考檔案會包含詳細資訊。根據任務需求讀取相關檔案：references/design-system.md 用於版面配置詞彙和通用網站稽核，references/ship.md 用於聯絡表單和電話驗證。
如果專案還沒有規則檔案或設計系統，請停止並從第一個階段使用 futuristic-web-design。在沒有設計系統的情況下建立的區塊，正是產生通用外觀的原因。
流程
- 讀取規則。 開啟專案的規則檔案（
AGENTS.md、CLAUDE.md或GEMINI.md）和主題標記。僅使用其中定義的字型和色板，以及專案已使用的技術棧。 - 確認內容。 當涉及事實（價格、聲明、名稱、引述）時，請提問。切勿為真實企業虛構客戶、評論或統計數據。在其他情況下，撰寫真實的文案並標註您編造的內容。不要使用佔位文字。
- 有目的地選擇版面配置。 分欄、居中、滿版、網格、Bento 或非對稱。用一句話說明選擇的理由。避免預設的三張相同卡片上方放一個居中標題：將其中一個項目突出顯示，並將其他項目偏移。
- 在獨立的檔案中建立一個元件，位於
components/或專案的等效目錄下。 - 在瀏覽器中檢查 390px、768px 和 1440px 寬度，並修復所見問題。一個版面配置即使滿足所有規則，看起來仍可能不對勁。
- 與相鄰區塊的上下間距保持一致。
- 以三行內容回報： 建立了什麼、檔案路徑，以及需要使用者確認的項目（編造的文案、未接線的按鈕、任何您無法驗證的事項）。
僅更改被要求的區塊。比請求更廣泛的差異會掩蓋是哪個編輯起到了作用。
版面配置選項
當使用者要求選項，或無法描述他們的需求時，從相同內容建立兩到三個變體。將每個變體放在各自的預覽路由上（/preview-1、/preview-2，或對於重新設計使用 /before 和 /after），並附上一行說明。人們更容易從選項中選擇，而非自己指定。
在他們做出選擇之前，不要修改真實頁面。然後刪除其他變體及其路由，因為殘留的預覽路由會隨網站一起部署。
讓區塊看起來有設計感的重點
- 字型。 標題字型使用較大字級且字距緊密，閱讀字型用於其他所有內容。僅使用兩種字型；框架預設值（如標籤上的
font-mono）視為第三種字型。英雄區塊的標題最多約八個字。 - 一個主要按鈕。 使用實心樣式，顏色素板中的按鈕顏色，與簡報中的動作相關聯。第二個動作是帶有箭頭的文字連結或低調的輪廓按鈕。兩個權重相同的按鈕表示沒有做出決定。
- 每個按鈕都指向真實的目標。 如果目的地未知，請使用最近的可靠目標，並在回報中將按鈕標記為未接線。
- 表面與空間。 充足的留白、平面填色、極細邊框、可選的紋理或玻璃效果。不要使用漸層來代替色板。僅在懸停時顯示陰影。
- 圖片。 以顯示尺寸提供，低於第一視窗的圖片使用懶加載，並提供描述圖片的替代文字（例如「琥珀色精華液瓶子放在淺色石頭上」，絕不使用「圖片 1」）。
- 動畫。 短暫淡入加上向上移動幾個像素，持續時間少於 500 毫秒，僅執行一次。在
prefers-reduced-motion設定下，任何元素都不應移動，包括平滑滾動和懸停過渡效果。
390px 檢查
手機佔了大多數訪問量，因此這是決定區塊是否完成的寬度。
- 內文可讀，且沒有標題換行超過五行或更多。
- 沒有任何內容緊貼螢幕邊緣。
- 觸控目標約為 44px 或更大。
- 沒有水平滾動。
- 導覽列折疊到一個可開啟和關閉的選單切換按鈕後面。
- 同一行的卡片中，無論上方文字長度如何，價格和按鈕應保持在同一行。請在所有三種寬度下檢查這一點。
聯絡區塊
一個沒有目的地的表單會造成傷害，因為人們會以為他們的訊息已送達。模型是信箱：對所有人開放投遞，但只有擁有者才能鎖定閱讀。
- 欄位
name、email、message，儲存到 Supabase 的leads資料表，或專案已使用的後端。 - 啟用資料列級別安全性：允許匿名插入，不允許公開讀取。不要在插入後鏈接
.select()；沒有讀取權限會導致呼叫失敗。 - 網站程式碼僅使用公開金鑰，從
.env.local載入，該檔案應保持被 .gitignore 忽略。 - 在發送前進行驗證（合理的電子郵件格式、非空的訊息）並解釋任何拒絕原因。對成功和失敗分別提供不同的訊息。
- 垃圾郵件防禦：一個必須保持空白的隱藏蜜罐欄位，以及拒絕比人類打字速度更快的提交。
- 像訪客一樣測試：空白訊息、格式錯誤的電子郵件、有效的提交。只有資料表中出現新的一行才能證明其正常運作；螢幕上的確認訊息不足以證明。
- 當儲存失敗時，請讀取錯誤訊息並修正政策。切勿關閉資料列級別安全性，因為此資料表保存著人們的姓名和地址。