Nutlope/hallmark

Hallmark 是給 Claude Code、Codex CLI、Cursor 與 OpenCode 用的設計 skill,目標是讓 AI 產生的頁面不要看起來像 AI 做的。它從 50 個主題材質中挑三個,依訪客來頁面要做的事安排版面,再用 sloplint 在真實瀏覽器裡檢查常見的機器感痕跡。與同類 skill 的差別在於它把檢查分成 Floor、Reflex、Finish 三層,Floor 問題直接擋下不允許出貨,最後還會交給一個 fresh-context reviewer 覆核。
AI 寫程式與 SkillsCSS★ 40,279

專案簡介

以上內容由 AI 根據官方 README 整理,未經實測;指令以官方文件為準。

原始描述

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

AI 規格

可搭配的工具Claude CodeCodex CLICursorOpenCodeGitHub Copilot

主要功能

  • 從 50 個主題中挑三個材質,依頁面目的決定版面
  • sloplint 在真實瀏覽器以八種寬度檢查 AI 生成痕跡
  • Floor、Reflex、Finish 三層門檻,Floor 問題不允許出貨
  • 可用 URL、dev server 或 app 截取真實產品畫面
  • 內建 755 張 Wikimedia Commons 開放授權照片並標註來源
  • 支援 redesign 與 audit 子指令,redesign 會保留內容與 wiring

系統需求

  • Node 18 或以上
  • 瀏覽器檢查與截圖需全域安裝 puppeteer-core 並具備 Chrome

安裝方式

  1. 用 skills CLI 全域安裝 Hallmark(去掉 -g 則只裝到當前專案)

    npx skills add nutlope/hallmark -g
  2. 安裝 puppeteer-core 以啟用瀏覽器渲染檢查與截圖(另需 Chrome)

    npm i -g puppeteer-core
  3. 從 clone 下來的倉庫安裝,會先驗證每個主題與 reference

    node skills/hallmark/scripts/install.mjs

快速開始

/hallmark <prompt>

設定教學

安裝後在支援的 harness 用 /hallmark <prompt> 或直接描述要做的頁面即可觸發。若要用瀏覽器渲染檢查與截圖,需另外全域安裝 puppeteer-core 並具備 Chrome;否則只跑靜態檢查。

部署方式

全域安裝到所有專案

  1. 用 skills CLI 把 Hallmark 安裝到所有專案

    npx skills add nutlope/hallmark -g

只安裝到單一 harness

  1. 只安裝給 Claude Code(或將 claude-code 換成 codex、opencode、cursor、github-copilot)

    npx skills add nutlope/hallmark -g --agent claude-code

以 Claude Code plugin 安裝

  1. 在 Claude Code 加入 Hallmark marketplace

    /plugin marketplace add nutlope/hallmark
  2. 從 marketplace 安裝 Hallmark plugin

    /plugin install hallmark@hallmark

設定內容整理自 repository 內的設定檔與文件,未經實測;變數名稱與指令以官方檔案為準。

適合用途

  • 用 Claude Code 或 Cursor 生成 landing page,想避免一眼看出是 AI 做的開發者
  • 需要把既有頁面重做成不同視覺系統但保留內容與 wiring 的前端工程師
  • 想在下線前用 sloplint 掃過對比、焦點、reduced motion 等問題的團隊
  • 要在頁面裡放入真實產品截圖與授權照片的設計者

常見問題

執行 Hallmark 需要什麼版本的 Node?

需要 Node 18 或以上。

沒有安裝 Chrome 也能用嗎?

靜態檢查不需要;但 sloplint --render 與截圖功能需要另外安裝 puppeteer-core 並有 Chrome。

安裝後檔案會放在哪裡?

它會安裝到 ~/.claude/skills/hallmark(Claude Code)或 ~/.agents/skills/hallmark(Codex CLI),Cursor 與 OpenCode 會找到上述位置的副本。

可以拿它改造既有的頁面嗎?

可以,用 /hallmark redesign <path> 重建頁面並保留內容與 wiring;只想檢查則用 /hallmark audit <path>。

它會使用 Unsplash 或 Pexels 的圖嗎?

不會。照片來自 Wikimedia Commons 的 755 張開放授權照片,清單在 skills/hallmark/scripts/photos.json,使用時會在頁面上標註授權。

如果 skill 沒有自動觸發怎麼辦?

直接指名它,例如在 prompt 裡寫 use hallmark to build ...。

公開標籤

未提供
Stars 等欄位只是 GitHub 快照,不保證品質、安全性或商用適用性。