Superpowers 是一套給 coding agent 用的軟體開發方法論,由一組可組合的 skills 加上開場指令組成,讓 agent 在對話一開始就自動套用。它把流程固定成先問清需求、寫設計、拆計畫、再進 TDD 實作與程式碼審查,而不是一看到需求就直接寫程式。與單純的規則檔不同,這些 skills 會依情境自動觸發,並支援 Claude Code、Codex、Cursor、Gemini CLI、OpenCode 等多個 harness。
Nutlope/hallmark
專案簡介
以上內容由 AI 根據官方 README 整理,未經實測;指令以官方文件為準。
原始描述
Anti-AI-slop design skill for Claude Code, Cursor, and Codex.
AI 規格
主要功能
- 從 50 個主題中挑三個材質,依頁面目的決定版面
- sloplint 在真實瀏覽器以八種寬度檢查 AI 生成痕跡
- Floor、Reflex、Finish 三層門檻,Floor 問題不允許出貨
- 可用 URL、dev server 或 app 截取真實產品畫面
- 內建 755 張 Wikimedia Commons 開放授權照片並標註來源
- 支援 redesign 與 audit 子指令,redesign 會保留內容與 wiring
系統需求
- Node 18 或以上
- 瀏覽器檢查與截圖需全域安裝 puppeteer-core 並具備 Chrome
安裝方式
用 skills CLI 全域安裝 Hallmark(去掉 -g 則只裝到當前專案)
npx skills add nutlope/hallmark -g安裝 puppeteer-core 以啟用瀏覽器渲染檢查與截圖(另需 Chrome)
npm i -g puppeteer-core從 clone 下來的倉庫安裝,會先驗證每個主題與 reference
node skills/hallmark/scripts/install.mjs
快速開始
/hallmark <prompt>設定教學
安裝後在支援的 harness 用 /hallmark <prompt> 或直接描述要做的頁面即可觸發。若要用瀏覽器渲染檢查與截圖,需另外全域安裝 puppeteer-core 並具備 Chrome;否則只跑靜態檢查。
部署方式
全域安裝到所有專案
用 skills CLI 把 Hallmark 安裝到所有專案
npx skills add nutlope/hallmark -g
只安裝到單一 harness
只安裝給 Claude Code(或將 claude-code 換成 codex、opencode、cursor、github-copilot)
npx skills add nutlope/hallmark -g --agent claude-code
以 Claude Code plugin 安裝
在 Claude Code 加入 Hallmark marketplace
/plugin marketplace add nutlope/hallmark從 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 ...。