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

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

本文目錄

hallmark 是什麼？
我的實測：sloplint 到底抓到什麼？
怎麼安裝 hallmark？
使用範例
限制與注意事項
MK 觀點：適合誰、不適合誰
常見問題
延伸閱讀

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

hallmark 是什麼？

hallmark 的 GitHub 首頁，README 開頭寫著 A design skill that refuses to look AI-generated 圖：hallmark 的 GitHub 首頁。來源：Nutlope/hallmark，截圖於 2026-11-02

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

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

hallmark 官方宣傳圖，標語 The design skill that ends AI slop 圖：官方宣傳圖。圖片來源：Nutlope/hallmark 官方 repo（授權 MIT）

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

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

README 的 Themes 區塊，展示 Dusk、Cobalt、Studio 等十種主題的完成頁面 圖：50 種主題中的 10 種。來源：hallmark README「Themes」段落

README 的 How a build runs 段落，列出四個步驟 圖：一次建置的流程。來源：hallmark README「How a build runs」段落

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

先看數字（查證日期 2026-11-02，來源：GitHub API、repo）：

星數 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 發出三個主題 圖：我自己跑的 sloplint 與 theme deal 輸出（節錄）。來源：MK 實測，2026-11-02

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

hallmark 發出的三個主題 Vellum、Formwork、Almanac 的官方示意頁面 圖：theme deal 發給我的三個主題。圖片來源：Nutlope/hallmark 官方 repo 主題圖（授權 MIT）

怎麼安裝 hallmark？

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

npx skills add nutlope/hallmark -g

README 的 Install 區塊，列出各工具的安裝位置與呼叫方式 圖：官方安裝說明。來源：hallmark README「Install」段落

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

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

使用範例

/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 加需求就行。