Hallmark 是給 Claude Code、Cursor、Codex 的設計技能,由 Together AI 的 Nutlope(Hassan El Mghari)開源。它不是元件庫,而是一套規則:先選版面巨結構、套用主題規則集、跑 57 道 slop-test 反模式關卡、輸出前先自我批判。目標是讓兩份不同需求的頁面看起來像兩個不同的網站,而不是同一套模板換色。本手冊涵蓋一行安裝、四個指令動詞、20 套主題與實戰流程。
Hallmark 是一個設計技能(skill),不是應用程式,也不是元件庫。它由 Together AI 的 Nutlope(Hassan El Mghari)開源,主要語言是 CSS,建立於 2026-04-27,採 MIT 授權。它解決一個具體問題:大型語言模型被訓練進了一組「分布內」的預設視覺習慣,讓多數 AI 生成的介面看起來彼此雷同。Hallmark 透過結構變化加品質關卡,讓輸出拒絕落回這些預設。
它的運作是一條固定流程:先挑一個版面巨結構(macrostructure),再套用一組主題規則集(theme rule-set),接著跑 57 道 slop-test 反模式關卡,最後在輸出前先做一次自我批判(pre-emit self-critique)。官方的設計目標是:由 Hallmark 為兩個不同需求生成的兩個頁面,要感覺像兩個不同的網站,而不是同一套模板的換色版本。
Hallmark 同時支援三種編碼代理:Claude Code、Cursor、Codex。倉庫核心是 SKILL.md 裡的規則集,搭配 references/ 的參考資料。線上展示站 usehallmark.com 列出八個示範專案,涵蓋 20 套內建主題與「Custom」客製模式。
最快的方式是一行指令,透過 skills 套件管理器安裝。它會把 Hallmark 的 SKILL.md 與 references/ 放到對應位置。
若要手動安裝,從倉庫的 skills/hallmark/ 複製 SKILL.md 與 references/ 到各工具對應的目錄。三種工具的路徑各不相同。
.cursor/rules/hallmark.mdc 時只放 SKILL.md 的內文(body),要排除最上方的 frontmatter。Claude Code 與 Codex 則是把整份 SKILL.md 與 references/ 一併放到 skills 目錄。安裝後依各工具的慣例觸發,即可開始使用。
Hallmark 有四個指令動詞。預設(不加動詞)直接生成新介面;audit、redesign、study 各對應一種既有素材的處理方式。動詞底下是同一套機制:挑巨結構、套主題規則集、跑 57 道 slop-test、輸出前自我批判。下方八張卡片:前四張是動詞,後四張是機制。
design.md。| 你的情境 | 動詞 | 輸出 |
|---|---|---|
| 從零建立新 UI | hallmark(預設) |
套主題、過 slop-test 的新介面 |
| 既有程式碼想知道哪裡像 AI | hallmark audit |
反模式評分 + punch list |
| 保留內容、只換結構與視覺 | hallmark redesign |
重構版面、保留文案與品牌 |
| 想把某個網站的設計風格擷取下來 | hallmark study |
設計 DNA,可輸出可攜的 design.md |
以下整理自 Hallmark 官方 repo 與 usehallmark.com。多數誤用集中在幾個重複出現的點:四個動詞的分工、Cursor 的安裝格式、何時該用 Custom 模式。先看過這幾條,可以少走彎路。
想把某個網站的調性搬到自己的專案:先 hallmark study <url> 擷取設計 DNA,再對你的目標跑 hallmark redesign。study 可輸出 design.md 作為中介。
放進 .cursor/rules/hallmark.mdc 時,只複製 SKILL.md 的內文,不要帶最上方的 frontmatter。Claude Code 與 Codex 則是整份 SKILL.md 一併放入。
20 套內建主題涵蓋多數情境;若需求要求量身打造的原創配色與版面,改用 Custom 模式,它會生成 bespoke 結果而非套模板。展示站上的 The Cascadia Nightjar、The Mend Assembly 即屬此類。
來源 · 官方 usehallmark.comusehallmark.com 上有四套主題可用 T 鍵循環預覽,快速感受不同主題規則集套在同一版面上的差異,再決定要在專案裡用哪一套。
對既有程式碼跑 hallmark audit <target>,它依反模式評分並輸出一份 punch list。你可以照清單逐項修,而不是把整頁打掉重做。
study 輸出的 design.md 是可攜的設計描述。把它存進另一個專案,後續生成就能參照同一套 macrostructure、字體與色彩錨點,讓多個專案保持一致調性。
redesign 只重建結構與視覺,文案、資訊架構與品牌會被保留。適合「內容沒問題,但版面看起來太像 AI」的情況,不必重寫一遍文字。
倉庫的 docs/recipes.md 收錄成套的操作流程,docs/study-examples.md 則有 study 的實例。先看這兩份,比自己摸索動詞組合更快上手。
以下示範一段流程:在 Claude Code 裡請 Hallmark 建一個 landing page。它先挑 macrostructure、套主題規則集、跑 57 道 slop-test、輸出前自我批判,最後 emit。動詞與機制名稱皆取自官方文件,流程內容為示意。
輸出不像 AI,靠的不是某個更聰明的模型,而是 把「避免 AI 廢設計」拆成可逐項檢查的步驟:先在巨結構層面避開預設排版,再用主題規則集統一視覺語言,接著用 57 道關卡逐項擋下常見反模式,最後在 emit 前做一次自我批判。每一步都是規則,不是靈感。
這也是為什麼兩份不同 brief 的輸出會長得不一樣:macrostructure 與主題的組合在前段就分岔了,而不是到最後才換個顏色。anti-slop 是一組啟發式關卡,不是保證,品質仍取決於 brief 的清晰度。
.cursor/rules/hallmark.mdc 時只放 SKILL.md 內文。帶進 frontmatter 是常見的安裝錯誤,會讓規則無法正確套用。
~/.claude/skills/hallmark/、Codex 是 ~/.codex/skills/hallmark/ 或專案層級、Cursor 是 .cursor/rules/hallmark.mdc。裝錯位置會讓技能不觸發。
Hallmark 是 MIT 授權的開源專案,核心規則在 SKILL.md,參考資料在 references/。基本生成跑通之後,有幾個方向能把它接進更完整的設計流程。
1. 用 study → design.md 對齊品牌。hallmark study 從截圖或 URL 擷取設計 DNA,輸出可攜的 design.md。把它帶進其他專案,後續生成就能參照同一套 macrostructure、字體與色彩錨點。
2. 用 redesign 翻新既有頁面。對既有目標跑 hallmark redesign,保留文案、資訊架構與品牌,只重建結構與視覺。適合內容沒問題、但版面太像 AI 的情況。
3. 用 audit 排序待修項。hallmark audit 對既有程式碼以反模式評分並輸出 punch list,讓你照優先序逐項處理,而非整頁重做。
4. 需要原創設計時改用 Custom 模式。20 套內建主題不夠時,Custom 模式生成 bespoke 的配色與版面,無模板。展示站上的 The Cascadia Nightjar、The Mend Assembly 即為此類示例。
5. 讀 custom-theme.md 自訂主題協定。倉庫的 references/custom-theme.md 說明客製主題的協定,讓你把自己的設計規則沉澱成一套可重用的主題規則集。
① docs/recipes.md——成套的操作流程與工作流範例。
② docs/study-examples.md——study 動詞的實例與 design.md 用法。
③ usehallmark.com——八個示範專案、20 套主題與 Custom 範例的線上展示。