Hallmark 是 Together AI 推出的開源設計技能，在 GitHub 累積 40,319 顆星標，採 MIT 授權。它為 Claude Code、Codex、Cursor 與 OpenCode 提供五十套主題素材、三層品質門檻與真實瀏覽器實測，目標是讓 AI 代理產出的網頁不再帶有明顯的機器生成痕跡。
Hallmark 是什麼？
Hallmark 是一套開源設計技能，為編碼代理提供主題素材、版型決策與品質檢查，讓生成的網頁避開機器製作的視覺慣性，採 MIT 授權並支援四種主流代理工具。
名稱本身說明定位。Hallmark 在英文中指貴金屬上的純度印記，帶有「通過檢驗」的含義。專案把這層意思搬到網頁設計：不提供模板庫，而是提供一套判斷標準，讓代理在交出成品之前先接受檢查。
專案由 Together AI 團隊成員維護，2026 年 4 月 27 日建立，至今累積 305 次提交、2,097 個分支、5 位貢獻者與 22 個未結問題。README 開宗明義寫著，它拒絕讓成品看起來像 AI 生成。這句話並非行銷修辭，而是整份文件反覆回到的技術目標。
它與一般 UI 元件庫的根本差別，在於輸出的東西不同。元件庫交付可重複使用的按鈕與卡片，Hallmark 交付一次性的頁面，並且要求每一次產出都能說明自己為何這樣排版。
Hallmark 為什麼針對「AI 味」設計？
因為大型語言模型在生成網頁時會反覆落回同一批視覺習慣，例如每個標題上方都加一行小字標籤，或每頁結尾都放電子報訂閱框，這些重複模式構成可辨識的機器痕跡。
README 把這些痕跡逐項列出，寫得相當具體。每個標題上方都加一行小眉標、把標籤寫成拉開字距的大寫字母、在標題裡只用一種顏色標出一個詞、整頁由空白方框或滿版照片組成、首屏超出螢幕高度、每頁結尾都出現電子報訂閱、表單按下送出後只回一句感謝卻沒有真的送出資料。
這份清單的價值在於可檢查。美感偏好難以驗證，但「首屏是否超出螢幕」可以在瀏覽器裡量出來，「對比度是否足夠」可以按像素計算。專案把主觀批評轉換成可執行的規則，這也是它能夠機械化攔截的前提。
背後有一個現實背景。當網頁生成成本降到接近零，網際網路上同構的頁面迅速增加，讀者對這種風格的耐受度也同步下降。專案押注的方向是：可辨識度會成為稀缺資源，而稀缺資源最終會被計價。
Hallmark 的三層檢查機制如何運作？
機制分三層：Floor 是不可違反的硬規則，涵蓋對比度、焦點、動態偏好與手機版面；Reflex 是模型易落的預設值，可記錄理由後覆寫；Finish 只提示不攔截。
Floor 的定義最嚴格，只要觸發就不准出貨。項目包括文字與背景的對比度不足、鍵盤焦點無法辨識、未尊重系統的減少動態偏好、憑空編造的事實，以及手機版版面壞掉。這五項都屬於傷及可用性的缺陷，沒有討論空間。
Reflex 處理的是慣性。模型在沒有明確指示時，會自動加上小眉標、圓角藥丸按鈕、單一酸性強調色。這些做法本身不至於錯誤，但在大量頁面上重複出現就成了特徵。規則允許開發者在記錄理由的前提下覆寫，等於把判斷責任交回人類。
Finish 只管細節，例如區塊之間的節奏、文字與容器的間距、圖片的裁切方式。這一層不會阻擋交付，用意是提供改進方向而非門檻。
執行這三層的工具名為 sloplint，是一個零依賴的檢查程式。它讀取 HTML、CSS、框架元件與 Tailwind 類別，加上 –render 參數後會在真實瀏覽器中開啟頁面，於八種寬度下量測折線位置、文字背後的實際像素對比、用 Tab 鍵實測焦點環、照片佔全頁比例，以及是否有文字被其他元素覆蓋。
Hallmark 如何安裝與使用？
安裝需 Node 18 以上版本，執行一行 npx 指令即可完成，加上 agent 參數可只裝到單一工具，亦可經插件市場或複製儲存庫安裝。
預設安裝會把技能放進全域目錄，Claude Code 落在 ~/.claude/skills/hallmark，Codex CLI 落在 ~/.agents/skills/hallmark，Cursor 與 OpenCode 會自動找到上述兩份副本。若只想在單一專案使用，省略 -g 參數即可。
呼叫方式依工具而異，Claude Code 與 Cursor 使用斜線指令加提示詞，Codex CLI 使用錢號前綴加提示詞。若技能沒有自動觸發，在句子裡直接寫出使用 hallmark 建立頁面，通常就能叫出。
一次完整建置的流程分四步。前置檢查讀取專案既有的字型、色盤、框架與設計文件，並詢問一次素材來源，包括照片、截圖與真實數字，缺素材時不會自行編造。接著由 theme.mjs 從五十套主題中抽出三套符合提示詞的選項，並決定頁面的骨架。首屏單獨建置完成後先送一次獨立審查，通過才繼續其餘區塊。最後執行 sloplint 並由一個全新上下文的審查者覆核成品。
瀏覽器檢查需要額外安裝 puppeteer-core 與 Chrome，缺少這兩個依賴時，靜態規則仍會執行，只是跳過渲染量測。
Hallmark 提供哪些主題與素材？
主題目錄共五十套，每套為獨立素材包，含紙質、字體、色彩、表面與專屬元件，上限 8 KB。另附 755 張 Wikimedia Commons 開放授權照片，使用時標註出處。
每套主題都以一個完成頁面作為樣本，例如銀行對帳工具的 Dusk、webhook API 服務的 Cobalt、香氛工作室的 Atelier、家庭用藥提醒的 Dose。主題只定義材質，不規定內容與順序，因此同一套主題搭配兩個不同提示詞，會得到兩個結構不同的頁面。
這種設計刻意避開模板化的陷阱。若主題同時決定材質與結構，五十套主題最終只會產出五十種頁面；把結構交給版型決策處理，組合數量才不會被目錄規模限制。
照片庫的處理方式值得單獨說明。專案不使用 Unsplash、Pexels 或 Pixabay，理由是這三個圖庫的條款禁止 AI 工具挑選其圖片。改用的 Wikimedia Commons 照片各自保留 CC0、公有領域、CC BY 或 CC BY-SA 授權，專案在每次使用時於頁面上標註來源。
Hallmark 與同類設計技能有何差別？
差別在約束方式。同類工具多提供設計建議，Hallmark 以可量測門檻與瀏覽器實測構成阻擋，並在重設計前記錄連結與表單欄位，防止改版丟失功能。
專案在 README 中列出的參照對象包括 Impeccable、Anthropic 的 frontend-design 插件、Open Design、Kami、taste-skill、UI UX Pro Max 與 Emil Kowalski 的技能集。這份名單顯示 2026 年已形成一個獨立類別：為編碼代理提供設計判斷的技能層。
差異體現在三個具體做法。第一是首屏獨立審查，在建置其餘區塊之前就先鎖定第一眼印象。第二是重設計前的功能清單，sloplint –before 會先記錄頁面上每一個連結、表單欄位、事件處理與標題，改版後以 –kept 比對，只要有一項消失就判定失敗。第三是輸出交由全新上下文的審查者覆核，避免同一個上下文自我肯定。
第三點針對的是模型自身的確認偏誤。同一個對話上下文在檢查自己剛寫的程式碼時，傾向於認定沒有問題。換一個空白上下文重新閱讀，判斷會嚴格得多。
Hallmark 的專案數據表現如何？
專案於 2026 年 4 月建立，六個月累積四萬星標，分支比例約百分之五，貢獻者僅五位，主要語言標記為 CSS，另附三十份測試簡報的評測目錄。
專案於 2026 年 4 月 27 日建立，六個月內達到四萬星標。分支數 2,097 對星標數 40,319 的比例約為百分之五，低於熱門框架的常見水準，反映多數使用者停留在取用階段。貢獻者僅 5 位，意味專案仍由核心團隊主導，外部參與集中在問題回報。
主要語言標記為 CSS，這個結果符合專案性質：技能的核心資產是設計規則與主題素材，而非應用程式邏輯。程式部分集中在幾個 Node 腳本，用於主題抽取、頁面擷取與品質檢查。
儲存庫另附一個評測目錄，內含 30 份測試簡報與多模型比對腳本，可用同一批提示詞比較不同模型在同一技能下的產出。這種把設計品質納入評測的做法，在設計類開源專案中並不常見。
Hallmark 有哪些限制與風險？
限制有三：渲染檢查需另裝 Chrome 與 Puppeteer，缺少時只剩靜態規則；主題樣本以英文語境為主，中文排版須自行調整；僅 5 位貢獻者，維護取決於核心團隊。
語言與排版是最直接的落差。五十套主題的字體選擇、行高與字距，都以拉丁字母的閱讀節奏為基礎。套用到中文內容時，字重層次與行距需要重新校準，否則容易出現標題過重或正文過密的問題。專案並未提供中文排版預設。
依賴門檻也值得注意。完整功能需要 Node 18、Chrome 與 puppeteer-core 三者齊備，在容器化或無圖形介面的環境中，瀏覽器量測這一段會失效。此時 Floor 中關於對比度與焦點環的檢查只能靠靜態規則近似判斷，準確度下降。
維護風險來自團隊規模。5 位貢獻者對應四萬星標的使用基數，問題回應速度容易成為瓶頸，目前 22 個未結問題即為觀察指標。專案採 MIT 授權，即使上游停滯，分支與自行修補的空間仍然存在。
出處連結有哪些？
原始碼位於 GitHub 的 Nutlope/hallmark，官網 usehallmark.com 提供五十套主題完整預覽，安裝指令與各工具呼叫方式記錄於 README。
儲存庫網址為 https://github.com/Nutlope/hallmark，採 MIT 授權，可自由使用、分支與商用。官網 https://www.usehallmark.com 提供五十套主題的實際預覽頁，是判斷材質是否符合需求的最快途徑。
README 另附各工具的安裝細節，包括單一代理安裝參數、Claude Code 插件市場路徑、從複製儲存庫安裝的驗證流程，以及把 Floor 檢查掛進編輯階段的鉤子腳本。
總結：Hallmark 適合什麼團隊？
適合已用編碼代理大量產出網頁、且在意品牌辨識度的團隊。它把設計品質轉成可量測門檻，代價是需要額外安裝瀏覽器依賴，中文專案另需自行調整排版參數。
這個專案真正解決的問題，不是讓 AI 學會設計，而是讓 AI 的產出通過一套外部標準。當生成成本持續下降，稀缺的部分會從「能不能做出來」轉向「做出來的東西能不能被記住」。Hallmark 押注的正是後者，並用可驗證的方式把判斷固定下來。
對於每月產出數十個落地頁的行銷或產品團隊，這套機制的價值在於一致性：不同成員、不同時間、不同模型產出的頁面，至少都不會踩到同一批可用性缺陷。對於只偶爾生成一兩個頁面的個人開發者，學習成本可能高於收益，直接套用現成模板更為實際。
值得留意的是專案的路線圖已列出下一步方向，包括依主題調整的動態時間參數、多頁面一致性鎖定，以及把即時預覽做成 MCP 伺服器。若後者落地，這套檢查機制將能嵌入更多代理工作流程，而非僅限於四個已支援的工具。
