Nutlope/hallmark

Anti-AI-slop design skill for Claude Code, Cursor, and Codex.

這是什麼

Hallmark 是給 Claude Code、Cursor 與 Codex 使用的設計 skill，目標很直接：讓 AI 產出的網頁不要再一眼看起來像「AI 模板」。它的做法不是只換配色，而是先依照需求挑選頁面的 macrostructure，再套用設計規則、主題與自我檢查流程。README 提到，它會在交付前跑 57 個 slop-test gates 與 pre-emit self-critique，刻意避開大型語言模型常落入的預設版型與視覺習慣。換句話說，Hallmark 想解決的不是「AI 會不會寫 HTML/CSS」，而是「AI 做出來的頁面是否有足夠的設計指紋與情境感」。

為什麼上榜

這個專案上榜的關鍵，在於它正好踩中近期 AI coding 工具的痛點：程式能生、頁面能跑，但視覺常常同質化。Hallmark 以 8,410 stars、今日新增 1,277 stars 的熱度，顯示開發者對「反 AI 味」設計流程有強烈需求。README 展示的重點也很清楚：不同 brief 會得到不同結構與主題，而不是同一個 landing page 換顏色。它最有意思的地方，是把設計判斷包成可重複使用的 skill：不只生成新 UI，也能稽核、重設計，甚至從截圖或 URL 萃取設計 DNA。

適合誰，可以拿來做什麼

Hallmark 適合已經在用 AI coding agent 做產品頁、demo、內部工具或活動頁的人，特別是覺得預設輸出太像 SaaS 模板、太平滑、太缺少品牌個性的團隊。它可以拿來快速產出自成一格的 HTML/CSS 頁面，也可以用 hallmark audit 檢查既有程式碼裡有哪些設計反模式；若原有資訊架構與文案可用，但版型太普通，hallmark redesign 則主打保留 copy、IA 與 brand，重新建立不同的視覺指紋。對設計師而言，hallmark study 也有參考價值：它會從喜歡的設計中抽出 macrostructure、字體搭配與色彩錨點，但 README 明確說會拒絕 pixel-clone 與付費模板。

上手

README 提供的安裝方式相當簡單，主要透過 skills CLI 加入：

npx skills add nutlope/hallmark

之後可重跑同一指令更新。若要手動安裝，README 說可把 skills/hallmark/SKILL.md 與 references/ 複製到對應位置：Claude Code 使用 ~/.claude/skills/hallmark/，Cursor 使用 .cursor/rules/hallmark.mdc（只放 SKILL.md 內容、不要 frontmatter），Codex 則可放在 ~/.codex/skills/hallmark/ 或專案內 .codex/skills/hallmark/。規則集位於 SKILL.md 與 references/，範例可看 docs/recipes.md 與 docs/study-examples.md。

README 重點摘要

• Hallmark 提供四種主要動作：預設生成新 UI、audit 評分既有程式碼、redesign 重建結構、study 從截圖或 URL 萃取設計 DNA。
• README 強調每個頁面是 self-contained HTML + CSS，並在 CSS comment 中標記使用的 macrostructure。
• 內建 20 個 themes，但當 brief 有明確創意意圖、既有目錄主題不適合時，會切到 Custom，從 palette、type 到 layout 重新設計。
• study 模式可選擇輸出可攜的 design.md，用來交接給其他 AI 工具，但不做像素級複製。
• 授權為 MIT，README 明確鼓勵使用、fork 與 ship。