# hallmark 實測：讓 AI 做的網頁不再有 AI 味

> hallmark 是 Together AI 做的設計 Skill，用 50 種主題和一套「AI 味」檢查規則，讓 Claude Code、Cursor 做的網頁不像生成的。我實際跑了它的 sloplint 檢查器，整理安裝、用法與限制。

- 作者：Michael Kuo（https://mk-ai-notes.pages.dev/about/）
- 發布日期：2026-11-02（2026-11-02T20:02:00+08:00）
- 原文網址：https://mk-ai-notes.pages.dev/posts/skill-hallmark/
- 分類：GitHub 飆星與 Skill 實測（https://mk-ai-notes.pages.dev/category/github/）
- 系列：MK 熱門 Skill 實測 第 2 篇／共 11 篇（https://mk-ai-notes.pages.dev/series/mk-skill-lab/）
- 標籤：Claude Code、Skill、Cursor、網頁設計、Codex
- 閱讀時間：約 8 分鐘（約 1564 字）
- 參考來源：https://github.com/Nutlope/hallmark

![hallmark 實測：讓 AI 做的網頁不再有 AI 味](https://mk-ai-notes.pages.dev/og/skill-hallmark.png)

---

你有沒有發現，叫 AI 做的到達頁常常一眼就認得出來？紫藍漸層、每個標題上面一行小小的大寫標籤、標題裡只有一個字上色。hallmark 就是專門治這種「AI 味」的設計 Skill。我拿它內建的檢查器去掃一份刻意做爛的頁面，它一口氣抓出 24 個硬傷，下面跟大家分享我試用的心得。

## hallmark 是什麼？

![hallmark 的 GitHub 首頁，README 開頭寫著 A design skill that refuses to look AI-generated](https://mk-ai-notes.pages.dev/img/skill-hallmark/repo-home.jpg)
*圖：hallmark 的 GitHub 首頁。來源：[Nutlope/hallmark](https://github.com/Nutlope/hallmark)，截圖於 2026-11-02*

hallmark 是給 Claude Code、Codex、Cursor、OpenCode 用的設計技能，README 寫明是 **Together AI** 做的。它主要做三件事：

1. **發主題**：從 50 種「材質」主題挑 3 種給你選，每種有自己的紙張、字體、顏色和元件。
2. **照網站的任務排版**：訂位頁就要能訂位、商店就要能買，按鈕放在那個品類真實網站會放的位置。
3. **抓 AI 味**：用 `sloplint` 掃出模型最愛的套路，再請一個「沒看過前文」的審稿員冷眼看一次。

![hallmark 官方宣傳圖，標語 The design skill that ends AI slop](https://mk-ai-notes.pages.dev/img/skill-hallmark/og.jpg)
*圖：官方宣傳圖。圖片來源：Nutlope/hallmark 官方 repo（授權 MIT）*

SKILL.md 開頭列了 16 條不能違反的底線，我挑幾條很有代表性的：顏色和字體都要走 `:root` 的設計變數；不准 `transition: all`；不准紫到藍的漸層、卡片包卡片、拿 emoji 當圖示；首屏 1280×800 內就要看到標題、一句說明和主按鈕；**不准捏造數據、推薦語或客戶標誌牆**。

規則分三層：**Floor**（底線，不能破）、**Reflex**（模型的慣性預設，有理由可以豁免）、**Finish**（細節打磨，不擋上線）。

![README 的 Themes 區塊，展示 Dusk、Cobalt、Studio 等十種主題的完成頁面](https://mk-ai-notes.pages.dev/img/skill-hallmark/readme-themes.jpg)
*圖：50 種主題中的 10 種。來源：hallmark README「Themes」段落*

![README 的 How a build runs 段落，列出四個步驟](https://mk-ai-notes.pages.dev/img/skill-hallmark/readme-build-flow.jpg)
*圖：一次建置的流程。來源：hallmark README「How a build runs」段落*

## 我的實測：sloplint 到底抓到什麼？

先看數字（查證日期 2026-11-02，來源：[GitHub API](https://api.github.com/repos/Nutlope/hallmark)、[repo](https://github.com/Nutlope/hallmark)）：

- 星數 44,985、Fork 2,388，授權 MIT
- 版本 v2.0.0，最後更新 2026-10-29（commit `4f6a46c`）
- 主題檔 50 個；`photos.json` 收了 755 筆照片

我用 Node v22 跑了兩個不用開瀏覽器的指令。第一個，拿 repo 附的爛頁面 `slopped.html` 做靜態檢查，結果是 **24 FAIL、15 REFLEX、4 WARN**：紫藍漸層標題、卡片包卡片、`transition: all`、「Unleash」「Seamless」這種行銷空話、標題上的「01 / FEATURES」小眉標，連「10x faster」這種沒來源的數字都被點名。

![終端機畫面：sloplint 列出 24 個 FAIL，theme deal 發出三個主題](https://mk-ai-notes.pages.dev/img/skill-hallmark/sloplint-run.png)
*圖：我自己跑的 sloplint 與 theme deal 輸出（節錄）。來源：MK 實測，2026-11-02*

第二個是 `theme.mjs deal`，我輸入「台北烘焙坊、可以線上預訂」，它發了 Vellum、Formwork、Almanac 三個主題，還特別標註 Vellum 適合「bakery」。下面是這三個主題的官方示意圖，羊皮紙質感的 Vellum 拿來做麵包店，我覺得滿對味的。

![hallmark 發出的三個主題 Vellum、Formwork、Almanac 的官方示意頁面](https://mk-ai-notes.pages.dev/img/skill-hallmark/dealt-themes.jpg)
*圖：theme deal 發給我的三個主題。圖片來源：Nutlope/hallmark 官方 repo 主題圖（授權 MIT）*

## 怎麼安裝 hallmark？

前置：Node 18 以上。想用「在真瀏覽器裡多種寬度檢查」（`sloplint --render`），還要 `npm i -g puppeteer-core` 和 Chrome；沒有的話靜態檢查一樣能跑。這次我只跑了靜態檢查，瀏覽器那段先跳過。

```sh
npx skills add nutlope/hallmark -g
```

![README 的 Install 區塊，列出各工具的安裝位置與呼叫方式](https://mk-ai-notes.pages.dev/img/skill-hallmark/readme-install.jpg)
*圖：官方安裝說明。來源：hallmark README「Install」段落*

只裝給某個工具就加 `--agent claude-code`（或 `codex`、`opencode`、`cursor`）。也可以當 Claude Code 外掛裝，呼叫時會變成 `/hallmark:hallmark`：

```text
/plugin marketplace add nutlope/hallmark
/plugin install hallmark@hallmark
```

## 使用範例

```text
/hallmark 一間台北社區烘焙坊的網站，可以線上預訂週末麵包
/hallmark redesign ./src/app
/hallmark audit ./index.html
```

開工前它只會問你一次四件事：素材（照片、截圖、真實數字）、受眾、主要行動、調性。懶得回就說「go ahead」，它會自己推測。重新設計會保留內容和連結，最後給前後對照；`audit` 只出報告、不改檔。

我很喜歡的一點：SKILL.md 寫明它**不會去動你現有的設計**，除非你親口點名 hallmark。

## 限制與注意事項

- **照片不是內附圖檔**：755 筆是 Wikimedia Commons 的連結，授權各不相同，405 筆是 CC BY-SA 4.0，只有 73 筆是 CC0，用的時候要在頁面標註作者與授權。
- **AI 生圖要付費金鑰**：設了 `TOGETHER_API_KEY` 才會用 Together AI 生圖，費用另計；沒設就用版面和占位圖。
- **規則很強勢**：例如禁止小眉標、全大寫標籤，如果你家品牌規範就是這樣，要先寫進 `design.md` 鎖住。
- **以「一頁」為單位**：README 說每頁是自成一體的 HTML 與 CSS；React 這類框架專案，要開著 dev server 讓它用網址檢查。

## MK 觀點：適合誰、不適合誰

**適合**：常用 AI 做到達頁、活動頁、作品集的一人公司或行銷人，想要「不像模板」又不想自己啃設計系統。只拿 `sloplint` 掃自己現有的頁面，也很划算。

**不適合**：已經有成熟設計系統的團隊，它的規則可能跟你們的規範打架；只想快速出原型、不在乎風格的人也用不到。

老實說，就算你不讓它設計，**光把它列的 AI 味清單看一遍**，下次自己下提示詞就會避開一大半地雷。

## 常見問題

**Q：hallmark 免費嗎？**
工具免費、MIT 授權。只有你選擇用 Together AI 生圖時，才會花到自己的 API 費用。

**Q：它會不會亂改我現有的網站？**
不會主動改。只有你明確下 `/hallmark redesign` 或 `audit` 時，它才會處理既有設計。

**Q：沒裝 Chrome 能用嗎？**
可以設計、也能跑靜態檢查；「在不同寬度實際渲染再檢查」那一步才需要 Chrome 和 puppeteer-core。

**Q：Cursor 怎麼用？**
用 `npx skills add` 裝好，Cursor 會讀到同一份技能，輸入 `/hallmark` 加需求就行。

## 延伸閱讀

- 同系列：[anatomy 實測：讓 Claude 把技術概念畫成一台機器](https://mk-ai-notes.pages.dev/posts/skill-anatomy/)
- 同系列：[replica-skill 實測：11 個技能拆解重建 App](https://mk-ai-notes.pages.dev/posts/skill-replica-skill/)
- [怎麼知道一段文字是不是 AI 寫的？](https://mk-ai-notes.pages.dev/posts/ep05-watermark/)
- [為什麼對 AI 說「加油」，答案會變好？](https://mk-ai-notes.pages.dev/posts/ep01-prompting/)

引用本文請附原文網址：https://mk-ai-notes.pages.dev/posts/skill-hallmark/（作者：Michael Kuo）