Signature — 形狀與身份管線 for OpenCode
源自《50 個設計靈感網站》（在瀏覽器中開啟 50 個網站，已於 2026 年 10 月 22 日驗證）加上 Nutlope 的 Hallmark 核心流程。每個形狀與身份都引用真實的語料庫證據——這個函式庫是觀察結果，而不是品味傳說。
分工（請勿模糊）
- 前端設計負責工藝：藝術指導、排版判斷、色彩判斷、動態哲學、文案撰寫、自我批評循環。當它被載入時，請遵循它——不要在它的規則中重述。
- Signature 負責流程與函式庫：這次建置採用哪個頁面形狀、穿著哪個身份、不重複的記錄簿，以及機械化的（grep 與計算）關卡清單。
動作
建置（預設）
- 將簡報拆分為：領域、受眾與能量詞（「電影感」、「密集」、「個人化」、「宏偉」）。
- 從
references/structures.md中選取一個形狀。用一句話說明：Shape: <名稱> (次選: <名稱>)。如果簡報模糊，則提供領域三元組——切勿默默使用預設值。 - 根據語料庫驗證：使用 Playwright MCP（導航 + 截圖工具）或 webfetch 開啟該形狀/身份行中的 1–2 個證據 URL。無效連結則晉級至下一行。調色盤錨點在你看過實際頁面之前都只是種子。
- 從
references/identities.md中選取一個身份，該身份需與形狀的氛圍相符，然後根據你實際所見修正其代幣種子。 - 先撰寫代幣：一個語義化的
:root區塊加上戳記（如下），然後再寫元件 CSS。 - 開始建置。一個令人難忘的元素承載整個頁面；其他所有元素保持低調（前端設計的克制規則——應用，不要重新推導）。
- 執行所有關卡並修正每個失敗。然後進行品味檢查——如果已載入前端設計，則透過它進行；否則根據其 AI 特質校準清單進行。
audit <目標>
閱讀程式碼/網站並僅執行關卡。每個失敗是一個要點：file:line — 關卡編號 — 一行修正。僅限機械化發現；當遇到品味問題時，用一句話說明相關的前端設計原則，而不是發明新規則。如果存在戳記，則回報該形狀是否重複之前的建置。
redesign <目標>
保留資訊架構、文案與品牌資產。透過 grep 搜尋戳記：新的形狀必須與上次蓋印的形狀不同。身份可以輪換；更改品牌語音或調色盤需要事先詢問。
study <URL | 截圖>
開啟來源。提取：區段順序 → 最接近的形狀；調色盤錨點（取樣實際顏色）；字體角色與任何觀察到的字體 → 最接近的身份。輸出一行：study: source=<URL> shape≈<Shape> identity≈<Identity> anchors=<十六進制碼>。如果函式庫中沒有任何項目符合，則追加一個新的身份行（格式在 identities.md 底部）——但切勿默默將研究結果替換為函式庫選項：如果使用者想要原封不動地使用研究的 DNA，則戳記會變成 identity=studied:<來源>，而研究值會變成代幣。
記錄簿就是程式碼
- 在主樣式表的頂部蓋上戳記（並在僅 HTML 的建置中，在
index.html的<head>中鏡像）：/* signature: shape=<Shape> identity=<Identity> refs=<實際開啟的 URL> */ - 在選取之前，透過 grep 搜尋專案中現有的戳記。連續兩次建置不能共享相同的形狀；最好也不要重複使用相同的身份。
- 沒有獨立的記錄簿檔案。CSS 就是記錄簿。
合約
- 設計代幣放在一個地方（
:root自訂屬性或專案的tokens.css/Tailwind@theme）。名稱是語義角色（--color-ink），而不是值。 - 重複使用專案本身的代幣名稱，而不是覆蓋它們；擴充 Tailwind 主題，永遠不要內聯任意值。
- 現有的全域樣式表是只能追加：完全保留每個
@tailwind/@import "tailwindcss"指令在原來的位置，在現有規則下方新增代幣，並將任何新的@import放在最頂端。切勿默默移除框架指令——這會使整個應用程式失去樣式。只有在明確要求時才能完整重寫。 - 符合框架的檔案慣例。不要重新發明專案已有的路由/佈局模式。
- 範圍：這是一個品味流程。不要發明文案（如果使用者沒有提供文字，則詢問）；不要包含商業邏輯；不要從無到有選取品牌身份——遵循你被給予的那些。
關卡（機械化——每個答案必須是「否」；每個失敗 = 在交接前進行一次修正）
代幣紀律
- 如果任何元件中出現的
#hex、oklch()、rgb()或font-family無法解析為命名代幣，則失敗。將它提取出來或替換它。 - 如果任何 padding/gap/margin 超出了專案的間距尺度（缺少命名代幣時的 4px 倍數），則失敗。任意的
17px是一個特徵。 - 如果缺少戳記註解，或其中提到的 URL 從未被實際開啟過，則失敗。
佈局生存
4. 如果頁面在任何 320–1920px 的視口寬度下出現水平滾動，則失敗。在 html 和 body 上都使用 overflow-x: clip（不是 hidden——clip 保留 sticky/fixed）。
5. 如果任何包含圖片的 1fr 網格/行軌道不是 minmax(0, 1fr)，則失敗。
6. 如果顯示大小的文字缺少 overflow-wrap: anywhere（且其容器缺少 min-width: 0），則失敗——長的複合詞會溢出手機螢幕。
7. 如果可點擊文字（按鈕、導航、分頁、CTA 標籤）在 320/375/768/1280px 下可以換行到 2 行，則失敗。
程式碼事實
8. 如果使用 transition: all，則失敗——請明確指定屬性。
9. 如果一個元素承載了超過一個懸停效果（同時有 translate + scale + shadow + color 組合），則失敗。
10. 如果輸入框在狀態之間更改了 border-width，則失敗；狀態更改應只影響顏色/外框/陰影。焦點環使用 outline，而不是 border。禁用狀態需要至少使用：opacity、cursor: not-allowed、disabled/aria-disabled 中的兩個。
11. 如果任何 <svg>/<canvas>/裝飾性元素既沒有 aria-hidden="true" 也沒有可存取名稱，則失敗。
動態與效能
12. 如果任何動畫/關鍵影格缺少 prefers-reduced-motion: reduce 的備援方案，則失敗。
13. 如果自動輪播內容沒有暫停於懸停和焦點的功能（WCAG 2.2.2），則失敗。
14. 如果 LCP 主角資源使用了 loading="lazy"，或主角影片缺少 poster/fetchpriority="high"，則失敗。
對比與誠實 15. 如果任何顏色/背景配對未達到 WCAG 4.5:1（內文）或 3:1（大型文字、圖示、焦點環），則失敗。兩個熱點：文字繼承了父層級在切換表面時的顏色；按鈕填充色與其文字亮度相差小於 5%。 16. 如果出現捏造的事實——使用者從未提供的指標、百分比、引用、名稱、價格，以及填充數據欄位的內容，則失敗。佔位欄位應顯示「confirm」，切勿發明。 17. 如果使用表情符號作為功能/步驟/定價圖示，則失敗；每個頁面最多使用一個圖示庫。 18. 如果重新繪製了瀏覽器元素：假的瀏覽器欄位、假的電話瀏海、假的終端機/IDE 視窗邊框。請使用真實的截圖或什麼都不放。
函式庫紀律 19. 如果載入的字體不是已知的免費/授權網頁字體，則失敗。語料庫中的鑄字廠字體（Commercial Type、Klim、Grilli Type、type.today、Pangram Pangram 試用版）是顯示參考——請檢查授權，在付費前先詢問。Google Fonts 和開放可變字體通過。 20. 如果這次建置的形狀與專案最近的戳記相符（根據記錄簿規則，先 grep），則失敗。
參考資料——按需閱讀，絕不一次讀完
references/structures.md— 十種頁面形狀，包含骨架、證據與領域三元組表格。在選取形狀時閱讀（建置/重新設計/稽核）。references/identities.md— 二十種身份：調色盤種子、字體配對、語料庫證據。在選取身份時閱讀（建置/重新設計/研究）。
實際範例（來自語料庫本身的指引）
簡報：「Meet India Journeys — 一家旅遊業者網站，提供喀拉拉邦的河流與遺產之旅。」
領域詞「travel」→ 三元組是 Scroll Story · Case Catalog · Luxury Ledger。選取 Scroll Story（次選：Case Catalog），因為主題是一次展示一個地點。實際開啟 apple.com 和 simplychocolate.dk 來研究章節節奏、主角媒體和滿版處理。身份：Forest Confection（深綠色 + 可可色，緊湊顯示字體）適合河流與遺產主題；在修正代幣之前先取樣實際的參考資料。戳記：
/* signature: shape=Scroll Story identity=Forest Confection refs=apple.com,simplychocolate.dk */