2026 年 7 月，一個名為 Nutlope/hallmark 的開源專案在 GitHub Trending 上瘋狂漲粉 —— 單日暴漲 3,181 星，迅速突破 10,000+ stars。它不是新的 AI 模型，不是程式框架，而是一個反 AI-slop 的設計 Skill。

如果你也受夠了 AI 生成的網頁千篇一律、長得像同一個模板，Hallmark 就是為你準備的。

什麼是 Hallmark？

Hallmark 是一個開源的「反 AI 味」設計 Skill，專為 Claude Code、Cursor 和 Codex 等 AI 程式工具設計。它由 Together AI 團隊開發，採用 MIT 授權開源。

為什麼 AI 生成的設計總是「一個樣」？

所有大型語言模型都訓練自相同的網際網路資料，預設會收斂到相似的「分布中心」（on-distribution defaults）。這導致：

  • 每個 landing page 都是 hero + 三欄 features + CTA
  • 配色永遠是漸層色 + 白色卡片
  • 字型永遠是 Inter / sans-serif
  • 佈局幾乎一模一樣

這種現象被稱為 「AI slop」 —— AI 生成的內容看起來像是同一個模子裡刻出來的。

Hallmark 如何解決這個問題？

Hallmark 的核心機制非常聰明：

機制 說明
21 種巨觀結構 每次從 21 種佈局中隨機選擇，確保結構多樣性
20+ 主題 涵蓋 Distil、Cold Snap、Bubble、Garden、Riso 等風格迥異的設計
57 道 slop 檢測門 生成後自動檢測 57 種 AI 常見設計反模式
預發射自檢 輸出前進行自我審查，不符合要求就拒絕輸出

效果就是：用 Hallmark 生成的兩個頁面，看起來像兩個完全不同的網站，而不是同一個模板的換色版。

安裝 Hallmark

方法一：使用 npx（推薦）

最簡單的方式是透過 npx skills add 指令安裝：

npx skills add nutlope/hallmark

這條指令會自動下載 Hallmark 的 Skill 檔案到你的 AI 工具配置目錄中。以後更新時再次執行即可。

方法二：手動安裝

如果你更喜歡手動管理，只需下載 SKILL.md 和 references/ 資料夾，放到對應的目錄：

Claude Code：

mkdir -p ~/.claude/skills/hallmark/
# 將 SKILL.md 和 references/ 放進去

Cursor：

# 在專案根目錄建立
mkdir -p .cursor/rules/
# 將 SKILL.md 的內容（不含 frontmatter）放到 .cursor/rules/hallmark.mdc

Codex：

# 個人層級（全域）
mkdir -p ~/.codex/skills/hallmark/

# 專案層級（僅當前專案）
mkdir -p .codex/skills/hallmark/

Hallmark 的四大核心指令

Hallmark 提供了四個強大的指令，覆蓋從新建到重構的完整工作流程：

1. hallmark（預設指令）

這是最常用的指令，用於從零開始建構新 UI。

hallmark

它會： - 為你的需求選擇一個巨觀結構 - 套用一套規則集 - 執行 57 道 slop 測試 - 在輸出前進行自我審查

✅ 效果：每個新頁面都有獨特的「設計指紋」，絕不雷同

2. hallmark audit <target>

用於評估現有程式碼，檢測其中的 AI-slop 反模式。

hallmark audit src/components/LandingPage.jsx

它會： - 分析目標檔案或目錄中的程式碼 - 打分並列出所有發現的 AI 設計反模式 - 生成修復建議清單 - 不修改任何程式碼，純診斷

✅ 效果：快速識別哪些地方需要重構，避免盲目重寫

3. hallmark redesign <target>

用於重構現有頁面，保留核心內容但徹底改變外觀。

hallmark redesign src/pages/Home.jsx

它會： - 丟棄原有結構 - 保留文案、資訊架構和品牌元素 - 用全新的設計指紋重建整個頁面 - 確保新設計符合 Hallmark 的反 slop 標準

✅ 效果：一次重構，煥然一新，同時保持業務邏輯不變

4. hallmark study <screenshot | URL>

用於學習優秀設計，提取其設計 DNA。

hallmark study https://example.com/design-inspiration

它會： - 分析截圖或網頁 URL - 提取巨觀結構、字型配對、色彩錨點等核心設計要素 - 拒絕像素級複製和付費模板 - 可選生成可攜式的 design.md 檔案，用於與其他 AI 工具協作

✅ 效果：把大師級設計變成可複用的設計系統

實戰演示：從零建構一個 Landing Page

讓我們用 Hallmark 建立一個現代 SaaS 產品的著陸頁：

  1. 啟動 Claude Code，確保 Hallmark Skill 已啟用
  2. 輸入提示詞： text 使用 hallmark 建構一個 SaaS 產品的著陸頁，產品名稱是 "Hyperlane"，功能是 Dev Infrastructure 監控平台，目標用戶是工程師，強調即時性和可靠性。
  3. 觀察輸出： - Hallmark 自動選擇了 "Hyperlane" 主題（來自其官方範例） - 使用了獨特的網格佈局和配色方案 - 包含了專門針對工程師的文案和視覺元素 - 生成的 HTML/CSS 檔案自帶註解，標明使用的巨觀結構

這就是 Hallmark 的魔力 —— 不再是通用模板，而是為特定產品量身打造的設計。

Hallmark 的設計哲學

Hallmark 的背後是一套深刻的設計哲學：

  • 拒絕模板化：沒有「預設主題」，每次都是全新創作
  • 擁抱多樣性：21 種巨觀結構確保結構不重複
  • 品質優先：57 道檢測門比人類設計師更嚴格
  • 可追溯性：每個生成的 HTML 檔案都帶有 CSS 註解，標明設計指紋
  • 可組合性：生成的 design.md 可以匯入其他 AI 工具，形成設計流水線

總結

Hallmark 不是一個簡單的 CSS 框架，而是一個設計思維的 AI 代理。它教會 AI 工具如何像人類設計師一樣思考：理解上下文、尊重品牌、追求獨特性、避免平庸。

在 AI 設計工具氾濫的今天，Hallmark 提供了一種截然不同的思路：不是讓 AI 更快地生成更多東西，而是讓 AI 生成更少但更好的東西。

🚀 立即行動： 1. 造訪 Hallmark 官網 查看所有範例 2. 在 GitHub 上給 Nutlope/hallmark 點 Star 3. 執行 npx skills add nutlope/hallmark 開始你的反 AI-slop 設計之旅

本文基於 Hallmark v2.1.0 撰寫，最新版本請參考 GitHub 儲存庫