# 策展 · X (Twitter) 🔥🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Hassan (@nutlope) · 平台：X (Twitter) · 日期：2026-05-20

> 原始來源：https://x.com/nutlope/status/2056754959819915459

## 中文摘要

Hallmark 開源工具助 AI 生成具美感介面。

這套由 Hassan (@nutlope) 開發的工具，專為 Claude Code、Cursor 與 Codex 等 AI 程式開發環境設計。Hallmark 的核心理念是透過一套嚴格的規則集，對抗大型語言模型（LLM）訓練過程中產生的預設偏好，確保產出的設計在排版、色彩、佈局與微互動上更具專業質感，而非千篇一律的 AI 生成物。

**核心功能與操作指令**
Hallmark 透過四個主要指令來管理設計流程，使用者可透過 `npx skills add nutlope/hallmark` 進行安裝：

- `build`（預設）：根據使用者提供的受眾、用途與語氣，自動規劃網頁結構並應用設計規則。
- `audit <target>`：針對現有程式碼進行審查，產出針對 AI 常見錯誤（如結構雷同、設計缺陷）的診斷報告。
- `redesign <target> [--mood <name>]`：保留原有的文案與品牌資訊，但徹底重構網站結構，賦予其全新的視覺指紋。
- `study <screenshot | URL>`：這是 Hallmark 的核心差異化功能，能分析使用者喜愛的設計，提取其「DNA」（如宏觀結構、字體搭配、色彩錨點），並產出診斷報告或可供其他 AI 工具（如 Cursor、v0、Bolt）讀取的 `design.md` 檔案。

**技術架構與防禦機制**
Hallmark 內建了多達 65 道「slop test」（劣質內容測試）閘門，在輸出程式碼前進行嚴格檢查。若觸發任何一項規則，系統會拒絕輸出。這些檢查涵蓋了：
- **排版紀律**：限制每頁字體家族數量，並規範字體使用頻率。
- **輸入狀態**：確保焦點環（focus ring）與邊框寬度的一致性，並規範錯誤提示的空間預留。
- **對比度與色彩**：符合 APCA / WCAG 標準，並強制要求使用強調色。
- **結構防禦**：自動偵測並阻擋常見的「AI 導航列」或「AI 頁尾」指紋，避免設計過於公式化。
- **專案記憶**：透過 `.hallmark/log.json` 記錄過往的設計決策，確保連續產出的內容不會重複使用相同的結構或主題。

**設計哲學與客製化**
Hallmark 拒絕使用「簡潔現代」這種空泛的描述，而是要求使用者選擇明確的語氣（如：編輯風格、粗獷主義、柔和、技術導向、奢華或俏皮）。系統內建 21 種宏觀結構與 22 種主題，並針對不同類型的網站（如 SaaS、個人作品集、電商）提供特定的微互動建議。此外，Hallmark 強調「DNA 提取」而非「像素複製」，在 `study` 模式下，它會識別字體角色而非盲目猜測字體 ID，並在輸出 `design.md` 時加入更嚴格的審核層，要求使用者確認來源的合法性，以避免直接複製付費模板或競爭對手的設計。

**安裝與使用指引**
若要將 Hallmark 整合至開發環境，請執行以下指令：
```bash
npx skills add nutlope/hallmark
```

安裝完成後，可根據使用的工具將其放置於對應路徑：
- Claude Code：`~/.claude/skills/hallmark/`
- Cursor：`.cursor/rules/hallmark.mdc`
- Codex：`~/.codex/skills/hallmark/`

若需在本地預覽範例網站，可進入 `site` 資料夾並啟動伺服器：
```bash
cd site && python3 -m http.server 4173
```
隨後即可透過瀏覽器訪問 `http://localhost:4173`，並按下 `T` 鍵切換不同主題，或參考 [官方網站](https://www.usehallmark.com/) 獲取更多資訊。該專案採用 MIT 授權，鼓勵開發者自由使用與貢獻。

## 標籤

Skills, Claude Code, Cursor, Codex, 開源專案, IDE, Hallmark, Claude, Cursor, Codex