Mindket

Hallmark 设计技能

新上架第 2 版 · 更新于
星标54.5k

概览

Nutlope 为 Claude Code、Codex、Cursor 和 OpenCode 做的设计技能。它用 50 种主题或一个自定义方向来做页面,再到浏览器里检查,找出让 AI 做的页面一看就像机器生成的那些套路。

Hallmark 设计技能 是一款 GitHub 上的开源项目,属于开发类,由 Mindket 上架。可免费获取。当前为第 2 版,最近更新于 。按它的 README 从 GitHub 安装。Mindket 的设置说明可在你的 Mindket 账户获取,以 zip 压缩包下载。

速览

用在
  • Claude Code:用 skills 安装器或作为插件安装,用 /hallmark 调用
  • Codex CLI:同一个安装器,用 $hallmark 调用
  • Cursor 和 OpenCode:它们会找到安装器放进共享技能文件夹的副本
  • GitHub Copilot:安装器可以用 --agent 指定它,不过 README 没有给出它的文件夹和调用步骤
先运行
npx skills add nutlope/hallmark -g

平台

Claude Code编程智能体
Codex编程智能体
Cursor代码编辑器
OpenCode编程智能体
GitHub Copilot编程智能体

关于

它是什么

Hallmark 是给编程智能体用的设计技能,用它做出来的网页看不出是机器做的。它的 README 注明制作方是 Together AI,Claude Code 插件则把 Nutlope 列为作者。每次构建都从 50 种主题里选一种开始;你要求 custom(自定义)时,就只按你的提示词来做。它围绕访客来这里要完成的事规划页面,然后在真实浏览器里检查,最后由一个上下文全新的审查者拍板。

  1. 预检读取你的项目,并向你要真实素材
  2. 抽出三种贴合提示词的主题
  3. 先单独做首屏,再做一次不带上下文的审查
  4. 在八种宽度下对页面做 lint 检查
  5. 一个全新的子智能体审查做好的页面

适合谁

用 AI 编程智能体做网页、做出来却总是同一副千篇一律模样的人。自由职业者和小型工作室获益最多,因为它的主题和图库能顶替他们请不起的设计师。

谁在用,怎么用
行业谁在用怎么用例子
网页设计与代理公司自由职业者和小型工作室用主题给客户做页面,或者给旧页面换风格,同时保住它的链接、表单和处理函数自由职业者给客户的旧页面换风格,只要丢了一个链接或表单字段,这次运行就过不了它自己的检查。
咖啡馆、商店和本地服务周末写代码的店主围绕访客来这里要完成的事,做菜单页、预约页或网店页面一位咖啡馆老板做了一个以点单按钮收尾的菜单页面。
软件创业公司有应用要上线的创始人把它指向应用或开发服务器,让落地页展示产品本身创始人的落地页放的是正在运行的应用截图,而不是空框。
有设计系统的产品团队团队负责人和前端开发者在项目根目录放一份 design.md 守住自家风格,或者上线前审查一个页面团队负责人审查一个发布页,拿到一份要改掉的 AI 痕迹清单,全程不改动任何文件。

如果你只要一个粗略的样稿,可以不用它:不带上下文的首屏审查和子智能体那一轮,都要多花模型回合,一次性的页面用不着。

用在哪里

README 列出了四个智能体,安装器还接受第五个作为安装目标。

  • Claude Code:用 skills 安装器或作为插件安装,用 /hallmark 调用
  • Codex CLI:同一个安装器,用 $hallmark 调用
  • Cursor 和 OpenCode:它们会找到安装器放进共享技能文件夹的副本
  • GitHub Copilot:安装器可以用 --agent 指定它,不过 README 没有给出它的文件夹和调用步骤
它能做的活
任务你给它什么你拿回什么
新页面一段提示词,加上真实的照片和数字一个按贴合提示词抽出的主题做成的页面;说 custom 就只按你的提示词来做
完整重新设计一个已有的页面或应用文件夹新的设计系统和布局,内容和交互逻辑保持不变
换风格或打磨一个页面,加上 keep the layout 或 polish布局不变、换一种样子,或者只修掉 AI 痕迹
审查一个页面文件一份要改的清单,不改动任何文件

把它指向一个 URL、开发服务器或应用,它就会截取你真实产品的画面放进页面。

如何设置

点“获取”会把一个装有 Mindket 安装说明的 zip 压缩包存进你的下载文件夹,里面按 Nutlope 的 README 列出了每个智能体的步骤。主要途径是 skills 安装器。

先准备好这些
需要说明
Node.jsREADME 要求 18 或更高版本,npm 上的 skills 包写的是 22.20 或更高版本
一个编程智能体Claude Code、Codex CLI、Cursor、OpenCode 或 GitHub Copilot
puppeteer-core 和 Chrome可选,用于浏览器检查和截图。没有它们时,只运行静态检查
TOGETHER_API_KEY可选,用于通过 Together AI 的 API 生成图片的步骤
  1. 在终端里运行安装命令。加上 -g 会为所有项目安装,不加则只装进当前项目。
  2. 安装器询问时,选出要装它的智能体,或者用 --agent 指定一个。
  3. 要做浏览器检查和截图,就装上 puppeteer-core,并在电脑上保留 Chrome。
  4. 在你的智能体里输入 /hallmark,在 Codex 里则输入 $hallmark。
npx skills add nutlope/hallmark -g
npx skills add nutlope/hallmark -g --agent claude-code
npm i -g puppeteer-core

Claude Code 也可以在会话里把它作为插件添加。用这种方式安装后,要用 /hallmark:hallmark 来调用。

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

如何使用

输入 /hallmark 加上你的提示词,或者用平常的话描述一个新构建。除非你点名要它做,Hallmark 从不会去动你已有的设计。

用这些词来指挥它
说它会做什么
redesign保留内容和交互逻辑,换掉设计系统和布局
keep the layout给页面换风格,布局原样不动
polish只修掉 AI 痕迹
custom不用现成主题,只按你的提示词来做
audit只报告要改的地方,不改动任何文件

对已有的页面,写明模式和路径:

/hallmark redesign ./src/app
/hallmark audit ./index.html

如果它没有自己启动,就在请求里点名用它,比如“用 hallmark 做一个定价页”。在克隆下来的仓库里,用它的 linter 可以检查任何页面。

node skills/hallmark/scripts/sloplint.mjs <file-or-dir> --render

示例

你要一个小工作室的页面,并附上两张工作室内的照片。

/hallmark a booking page for weekend pottery classes

Hallmark 会先就缺少的内容问你一次,比如真实价格或署名的引语,因为它什么都不编造。它抽出三种主题,先单独做出首屏并审查,这时其余部分还没开始做。你拿到的是一个自包含的 HTML 和 CSS 页面,以预约操作收尾,在八种宽度下检查过,并由一个子智能体审查过。它的第一条 CSS 注释列出了这次构建做的各项决定。

新手与专家

新手:AI 做的页面往往长一个样:每个标题上方都有一个小标签,大标题里有一个词是彩色的,每个页面末尾都有邮件订阅。Hallmark 给你的编程智能体一个主题,再加一道能抓出这些习惯的浏览器检查。先挑一样你很熟悉的东西做个单页网站,并给它真实的照片和数字。

专家:能不能上线,由三类关卡决定。

Hallmark 的关卡
关卡检查什么构建能推翻它吗?
Floor(底线)对比度、焦点和减少动效,编造的事实,以及坏掉的手机布局不能,有 Floor 问题的页面绝不放行
Reflex(反射)模型的默认套路能,但要记下理由
Finish(收尾)小细节只报告,从不拦截

每种主题是一个最多 8 KB 的文件,提供的是材质而不是布局,所以同一主题下的两个提示词会做出两个不同的页面。重新设计时,sloplint --before 会记下每个链接、字段、处理函数和标题,只要少了一个,sloplint --kept 就会让这次运行失败。不带上下文的首屏审查和子智能体那一轮,都要多花模型回合。

注意事项

它做的事大多留在你的电脑上,只有两个可选步骤会连到外面。

  • 照片:来自一份 755 张开放许可图片的清单,托管在 Wikimedia Commons,每张都在页面上注明出处,许可为 CC0、公有领域、CC BY 或 CC BY-SA
  • 图库网站:条款禁止 AI 工具挑选其图片的,Hallmark 一律跳过
  • 你的电脑:它读取你项目里的文件,并用你本地的 Chrome 截图
  • 它写的文件:一个 .hallmark 文件夹存放预检笔记和构建日志,另在你的样式表旁写入 tokens.css 和 base.css
  • 生图步骤:设置了 TOGETHER_API_KEY 时,提示词会发给 Together AI 的 API;没有这个密钥就跳过这一步
  • 编辑钩子:可选的 install-hook.mjs 会给 Claude Code 加一个每次编辑后运行的提示性 Floor 检查
  • 使用数据:skills 安装器会发送匿名使用数据,除非设置了 DISABLE_TELEMETRY=1 或 DO_NOT_TRACK=1
  • 许可证:MIT

README 和文件

README
# Hallmark 设计技能:安装说明

这个工具包里只有安装说明,由 Mindket 编写。Hallmark 技能和它的 Claude Code 插件要从 Nutlope 的仓库安装,地址是 https://github.com/Nutlope/hallmark

这些说明不是 Nutlope 或 Together AI 写的,也没有得到它们的认可。README 说 Hallmark 由 Together AI 制作。插件清单把 Nutlope 列为作者。

许可证:MIT。LICENSE 文件写的是“Copyright (c) 2026 Hallmark contributors”。来源见 https://github.com/Nutlope/hallmark/blob/main/LICENSE

README 说,Hallmark 图库里的照片各自保留原来的许可(CC0、公有领域、CC BY 或 CC BY-SA),Hallmark 用到哪一张,就在页面上注明哪一张的出处。

## 会安装什么

- hallmark 技能文件夹:SKILL.md、它的参考资料(主题和设计笔记),以及它的 Node 脚本。
- 按 README 的安装表,Claude Code 的副本放在 `~/.claude/skills/hallmark`,Codex CLI 的放在 `~/.agents/skills/hallmark`。Cursor 和 OpenCode 会找到这些副本。
- 除非你加上可选的编辑时钩子,否则每次编辑后不会运行任何东西。见 setup/claude-code.md。

## 事先需要准备

- README 要求 Node 18 或更高版本。
- README 用的安装器是 npm 上的 `skills` 包。它在注册表里的条目,engines 字段写的是 Node >=22.20.0,见 https://registry.npmjs.org/skills/latest
- 按 README 的说法,浏览器检查和截图需要 puppeteer-core 和 Chrome。没有它们,就只运行静态检查。puppeteer-core 在注册表里的条目写的是 Node >=22.12.0,见 https://registry.npmjs.org/puppeteer-core/latest

```
npm i -g puppeteer-core
```

## 主安装命令

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

加上 `-g`,技能会为所有项目安装。去掉 `-g`,就只装进当前项目。

## 各智能体的说明

- setup/claude-code.md
- setup/codex.md
- setup/cursor.md
- setup/opencode.md
- setup/github-copilot.md

## 技能会在你的项目里写入什么

SKILL.md 说,构建时会保留一个 `.hallmark` 文件夹(`preflight.json`、`log.json`),并在你的样式表旁边写入 `tokens.css` 和 `base.css`。除非另行指定,截图脚本会把截图存到 `images/screens`。

## 更新或卸载

README 没有给出更新或卸载的步骤。主命令用 skills CLI 安装,这个 CLI 自己的 README https://github.com/vercel-labs/skills 给出了查看、检查、更新和移除已安装技能的命令。技能的名称是 hallmark。副本放在哪里,取决于你选了哪些智能体,以及有没有用 -g。CLI 的智能体对照表 https://github.com/vercel-labs/skills/blob/main/docs/agents.md 给出了每个智能体的文件夹。用了 -g 时,Cursor 的是 ~/.cursor/skills,OpenCode 的是 ~/.config/opencode/skills。不用 -g 时,副本会放进项目的 .claude/skills 或 .agents/skills 文件夹。install.mjs 的帮助文本说,从克隆仓库装上的副本,可以用它的 --remove 参数移除。

## 使用数据

skills CLI 的 README 说,这个 CLI 会收集匿名使用数据。它还说,设置 DISABLE_TELEMETRY=1 或 DO_NOT_TRACK=1,就会关闭遥测和安全审计请求。来源见 https://github.com/vercel-labs/skills

## 可选:生成图片

设置了 `TOGETHER_API_KEY` 变量时,这个技能可以通过 Together AI 的 API 生成图片。没有这个密钥,它就跳过这一步。设置密钥后,你的图片提示词会发送给 Together AI。来源见 https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/scripts/imagegen.mjs

## 来源

- README 的 Install 一节 https://github.com/Nutlope/hallmark/blob/main/README.md
- LICENSE https://github.com/Nutlope/hallmark/blob/main/LICENSE
- SKILL.md https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/SKILL.md
- capture.mjs https://github.com/Nutlope/hallmark/blob/main/skills/hallmark/scripts/capture.mjs
文件
README.md  4 KB
setup/claude-code.md  2 KB
setup/codex.md  998 B
setup/cursor.md  1 KB
setup/github-copilot.md  588 B
setup/opencode.md  1 KB

6 个文件,共 9 KB,以 zip 压缩包下载。

更新内容

  • 第 2 版 · 2026-11-09

    Updated by Mindket to the current version of this kit.

  • 第 1 版 · 2026-11-03

评价

还没有评分

写评价

还没有评价。

大家怎么说

Hacker News、Bluesky、X、Reddit、Facebook 和 YouTube 上提到这个项目的帖子和评论,来自每周一次的搜索和 Trendshift。它们不是 Mindket 写的,也未经核实,点开即可在原帖处阅读。

opwizardxHallmark – Anti-AI-Slop Design Skill for Claude Code, Cursor, and Codex7 分 · 9 条回复DYFictional client-site handoff: Issue: form says 'Sent' but sends nothing. Fix: POST /api/contact; show success on 2xx, an error otherwise. Hallmark checks AI-built sites: audit reports issues; redesign edits files. MIT skill; coding agent needed. github.com/Nutlope/hall...3 条回复capexThe design skill that ends AI slop4 分@hydromo.bsky.socialGitHub weekly trending Top 10 (Oct 31) 1 hallmark · 2 security-audit-skill · 3 claude-seo · 4 impeccable · 5 superpowers · 6 andrej-karpathy-skills · 7 TradingAgents · 8 jakubkrehel/skills · 9 taste-skill · 10 t3code Use cases and links are on the cards. https://github.com/trending?since=weekly1 赞 · 2 条回复@hydromo.bsky.social이번 주(10/31 기준) GitHub 트렌딩 TOP10 1 hallmark · 2 security-audit-skill · 3 claude-seo · 4 impeccable · 5 superpowers · 6 andrej-karpathy-skills · 7 TradingAgents(투자 조언 아님) · 8 jakubkrehel/skills · 9 taste-skill · 10 t3code 활용 한 줄과 링크 10개는 카드에 정리했습니다. https://github.com/trending?since=weekly1 赞 · 1 条回复GitHub Trending📈 Today's GitHub Trending: 1. https://github.com/Nutlope/hallmark - CSS, 2235 stars today 2. https://github.com/TauricResearch/TradingAgents - Python, 1376 stars today 3. https://github.com/JetBrains/thinkrail - TypeScript, 1156 stars today 4. https://github.com/makecindy/cindy - TypeScript […]1 赞 · 1 条回复GitHub Trending💎 Hidden Gem! 💎 (1000+ new stars) 📦 Nutlope / hallmark ⭐ 39,950 (+2,109) 🗒 CSS Anti-AI-slop design skill for Claude Code, Cursor, and Codex.1 条回复@ai-trend-to-know.bsky.socialNutlope/hallmark 💻 CSS #AIAgents #CSS #OpenSource #GitHub 🔗 trendtoknow.com/Nutlope/hall...1 赞Punyapal Shahgithub.com/Nutlope/hall...@repododia.bsky.socialNutlope Hallmark: 50 temas anti-IA para seu design Nutlope Hallmark é a skill de design que impede que seus projetos tenham a cara de designs gerados por IA. Com 50 temas e auditoria de URLs, ele te ajuda a criar um visual autêntico e único para suas páginas, redesenhando e mantendo a estAI без границHallmark — скилл для ИИ-редакторов кода, который делает дизайн живым Если устал от серых макетов, которые генерирует Claude или Cursor, попробуй Hallmark. Это бесплатный навык для Claude Code, Codex, Cursor и OpenCode. 💻 Внутри 48 готовых стилей, можно... https://github.com/nutlope/hallmarkデイリーGitHubトレンド今日のGitHubトレンド Nutlope/hallmark

搜索日期

Mindket 的更多商品

查看 Mindket 的全部商品

Huashu Design

alchaincyf · 技能

把你在 AI 智能体里写的一句话需求,变成一份完成的设计:发布动画、可点击的应用原型、可编辑的幻灯片、信息图,或一组小红书图片。可在多种智能体中使用。

新上架29.4k

Guizang PPT Skill

op7418 · 技能

能生成单文件 HTML 幻灯片、幻灯片配图和多平台封面的技能,有两套视觉风格,还带演讲者模式用于排练。适合使用 Claude Code 或 Codex 的演讲者。

新上架29.8k

Claude Code Skills & Plugins

alirezarezvani · 技能

为 Claude Code 和其他编程智能体提供 411 个现成技能,按角色分组,从工程、产品到营销、财务和合规。以插件方式安装。适合开发者和业务团队。

新上架29.8k

开发类的相似商品

查看开发类的全部商品

buzz

block · 工具包

可自行托管的工作空间,人和 AI 智能体在同样的房间里协作,基于 Nostr 中继,把每个动作记录为签名事件。适合想自己运行中继的团队。

新上架37.3k

plannotator

backnotprop · 工具包

把你的 AI 编程智能体的计划、规格和代码改动在浏览器里打开,让你加批注或评论,并把反馈直接发回给智能体。

新上架10.5k

open-code-review

alibaba · 工具包

用 AI 智能体审查 Git 改动:它会读取文件、搜索代码库,再写出对应到具体行的审查意见。适合想在命令行里自动做代码审查的开发者。

新上架50.7k