一套讓 AI 輸出不像 AI 的設計技能。
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」客製模式。
挑 macrostructure
套 theme 規則集
57 道 slop-test
輸出前自我批判
emit
由 Hallmark 為兩個不同需求生成的兩個頁面,應感覺像兩個不同的網站,而不是同一套模板的換色版本。
一行指令安裝, 三種工具各有路徑。
最快的方式是一行指令,透過 skills 套件管理器安裝。它會把 Hallmark 的 SKILL.md 與 references/ 放到對應位置。
# 一行安裝(skills 套件管理器)
npx skills add nutlope/hallmark手動安裝:複製 SKILL.md 與 references/
若要手動安裝,從倉庫的 skills/hallmark/ 複製 SKILL.md 與 references/ 到各工具對應的目錄。三種工具的路徑各不相同。
# Claude Code
~/.claude/skills/hallmark/
# Cursor(只放 body,排除 frontmatter)
.cursor/rules/hallmark.mdc
# Codex(個人或專案層級)
~/.codex/skills/hallmark/ # 個人
.codex/skills/hallmark/ # 專案層級四個指令動詞, 背後四道機制。
Hallmark 有四個指令動詞。預設(不加動詞)直接生成新介面;audit、redesign、study 各對應一種既有素材的處理方式。動詞底下是同一套機制:挑巨結構、套主題規則集、跑 57 道 slop-test、輸出前自我批判。下方八張卡片:前四張是動詞,後四張是機制。
Verb · 01
hallmark(預設)
建立新介面
不加動詞即生成全新 UI:挑選 macrostructure、套用主題、跑 slop-test。給沒有既有素材、要從零開始的需求。
Verb · 02
hallmark audit <target>
體檢既有程式碼
對既有程式碼以反模式評分,輸出一份可逐項處理的 punch list。用來判斷一個介面哪裡像 AI、該先修哪裡。
Verb · 03
hallmark redesign <target>
保留內容重構
重建結構,同時保留文案、資訊架構與品牌。換的是版面與視覺語言,不是內容。
Verb · 04
hallmark study <url>
擷取設計 DNA
從截圖或 URL 擷取「設計 DNA」:macrostructure、字體、色彩錨點。可輸出一份可攜的 design.md。
Mechanism · 05
macrostructure
版面巨結構選擇
生成的第一步:先決定整體版面巨結構,而非直接落回所有 LLM 被訓練進的同一種預設排版。
Mechanism · 06
theme rule-sets
20 套主題規則集
共 20 套內建主題,每套是一組規則集而非單一樣式。usehallmark.com 上四套可用 T 鍵循環預覽。
Mechanism · 07
slop-test gates
57 道反模式關卡
輸出前跑 57 道 slop-test 反模式關卡,逐項檢查那些「一看就是 AI」的常見特徵,不通過就擋下。
Mechanism · 08
self-critique / Custom
自我批判 / 客製模式
輸出前先做一次 pre-emit 自我批判。Custom 模式則生成量身打造的配色與版面,無模板,給需要原創設計的需求。
哪個動詞配哪種情境
| 你的情境 | 動詞 | 輸出 |
|---|---|---|
| 從零建立新 UI | hallmark(預設) | 套主題、過 slop-test 的新介面 |
| 既有程式碼想知道哪裡像 AI | hallmark audit | 反模式評分 + punch list |
| 保留內容、只換結構與視覺 | hallmark redesign | 重構版面、保留文案與品牌 |
| 想把某個網站的設計風格擷取下來 | hallmark study | 設計 DNA,可輸出可攜的 design.md |
用得順手的八條要點。
以下整理自 Hallmark 官方 repo 與 usehallmark.com。多數誤用集中在幾個重複出現的點:四個動詞的分工、Cursor 的安裝格式、何時該用 Custom 模式。先看過這幾條,可以少走彎路。
先 study 再 redesign,可移植一個風格
想把某個網站的調性搬到自己的專案:先 hallmark study <url> 擷取設計 DNA,再對你的目標跑 hallmark redesign。study 可輸出 design.md 作為中介。
來源 · 官方 repo · docs/study-examples.md
Cursor 安裝只放 body,排除 frontmatter
放進 .cursor/rules/hallmark.mdc 時,只複製 SKILL.md 的內文,不要帶最上方的 frontmatter。Claude Code 與 Codex 則是整份 SKILL.md 一併放入。
來源 · 官方 repo · README
需要原創設計時用 Custom 模式
20 套內建主題涵蓋多數情境;若需求要求量身打造的原創配色與版面,改用 Custom 模式,它會生成 bespoke 結果而非套模板。展示站上的 The Cascadia Nightjar、The Mend Assembly 即屬此類。
來源 · 官方 usehallmark.com
在展示站用 T 鍵循環主題
usehallmark.com 上有四套主題可用 T 鍵循環預覽,快速感受不同主題規則集套在同一版面上的差異,再決定要在專案裡用哪一套。
來源 · 官方 usehallmark.com
audit 給你可逐項處理的 punch list
對既有程式碼跑 hallmark audit <target>,它依反模式評分並輸出一份 punch list。你可以照清單逐項修,而不是把整頁打掉重做。
來源 · 官方 repo · README
design.md 可跨專案攜帶
study 輸出的 design.md 是可攜的設計描述。把它存進另一個專案,後續生成就能參照同一套 macrostructure、字體與色彩錨點,讓多個專案保持一致調性。
來源 · 官方 repo · docs/study-examples.md
redesign 會保留內容與品牌
redesign 只重建結構與視覺,文案、資訊架構與品牌會被保留。適合「內容沒問題,但版面看起來太像 AI」的情況,不必重寫一遍文字。
來源 · 官方 repo · README
讀 recipes.md 看完整工作流
倉庫的 docs/recipes.md 收錄成套的操作流程,docs/study-examples.md 則有 study 的實例。先看這兩份,比自己摸索動詞組合更快上手。
來源 · 官方 repo · docs/recipes.md
看 Hallmark 怎麼把一個 brief 變成介面。
以下示範一段流程:在 Claude Code 裡請 Hallmark 建一個 landing page。它先挑 macrostructure、套主題規則集、跑 57 道 slop-test、輸出前自我批判,最後 emit。動詞與機制名稱皆取自官方文件,流程內容為示意。
$ You ›
幫我做一個 B2B 分析工具的 landing page,主打「五分鐘看懂你的
流失原因」,要看起來不像範本。
claude: Claude(Hallmark)›
在輸出前,我會先選版面巨結構,再套主題,
最後跑 slop-test。先說我為什麼這樣選——
hl: → 選定:非對稱主視覺 + 數據佐證帶,不用置中英雄區
hl: → theme: Cold Snap(20 套內建之一)
ok: → 54 / 57 通過 · 3 項已修正後重測通過
這版的弱點:資料帶的對比偏低,行動呼籲層級不夠明確。
我先把 CTA 提到主視覺右側,再 emit。
ok: → 已輸出 landing page · macrostructure + Cold Snap 主題
ok: → 通過 57 道 slop-test · 與預設模板不同形
claude: Claude ›
要我再用 audit 對這頁評一次分,或換 study 擷取你
既有官網的設計 DNA 來對齊品牌?
它不是直接畫圖,而是先選巨結構、套主題、跑完 57 道 slop-test、再自我批判,才輸出。拒絕落回每個 LLM 都被訓練進的那組預設。
這段流程為什麼成立
輸出不像 AI,靠的不是某個更聰明的模型,而是 把「避免 AI 廢設計」拆成可逐項檢查的步驟:先在巨結構層面避開預設排版,再用主題規則集統一視覺語言,接著用 57 道關卡逐項擋下常見反模式,最後在 emit 前做一次自我批判。每一步都是規則,不是靈感。
這也是為什麼兩份不同 brief 的輸出會長得不一樣:macrostructure 與主題的組合在前段就分岔了,而不是到最後才換個顏色。anti-slop 是一組啟發式關卡,不是保證,品質仍取決於 brief 的清晰度。
它管結構與品味, 邏輯仍要你接。
把 Hallmark 調進你的設計流程。
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 範例的線上展示。
目標是讓兩份不同需求的頁面看起來像兩個不同的網站,而不是同一套模板的換色版本。