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

Nutlope 为 Claude Code、Codex、Cursor 和 OpenCode 做的设计技能。它用 50 种主题或一个自定义方向来做页面,再到浏览器里检查,找出让 AI 做的页面一看就像机器生成的那些套路。
Hallmark 设计技能 是一款 GitHub 上的开源项目,属于开发类,由 Mindket 上架。可免费获取。当前为第 2 版,最近更新于 。按它的 README 从 GitHub 安装。Mindket 的设置说明可在你的 Mindket 账户获取,以 zip 压缩包下载。
npx skills add nutlope/hallmark -g
Hallmark 是给编程智能体用的设计技能,用它做出来的网页看不出是机器做的。它的 README 注明制作方是 Together AI,Claude Code 插件则把 Nutlope 列为作者。每次构建都从 50 种主题里选一种开始;你要求 custom(自定义)时,就只按你的提示词来做。它围绕访客来这里要完成的事规划页面,然后在真实浏览器里检查,最后由一个上下文全新的审查者拍板。
用 AI 编程智能体做网页、做出来却总是同一副千篇一律模样的人。自由职业者和小型工作室获益最多,因为它的主题和图库能顶替他们请不起的设计师。
| 行业 | 谁在用 | 怎么用 | 例子 |
|---|---|---|---|
| 网页设计与代理公司 | 自由职业者和小型工作室 | 用主题给客户做页面,或者给旧页面换风格,同时保住它的链接、表单和处理函数 | 自由职业者给客户的旧页面换风格,只要丢了一个链接或表单字段,这次运行就过不了它自己的检查。 |
| 咖啡馆、商店和本地服务 | 周末写代码的店主 | 围绕访客来这里要完成的事,做菜单页、预约页或网店页面 | 一位咖啡馆老板做了一个以点单按钮收尾的菜单页面。 |
| 软件创业公司 | 有应用要上线的创始人 | 把它指向应用或开发服务器,让落地页展示产品本身 | 创始人的落地页放的是正在运行的应用截图,而不是空框。 |
| 有设计系统的产品团队 | 团队负责人和前端开发者 | 在项目根目录放一份 design.md 守住自家风格,或者上线前审查一个页面 | 团队负责人审查一个发布页,拿到一份要改掉的 AI 痕迹清单,全程不改动任何文件。 |
如果你只要一个粗略的样稿,可以不用它:不带上下文的首屏审查和子智能体那一轮,都要多花模型回合,一次性的页面用不着。
README 列出了四个智能体,安装器还接受第五个作为安装目标。
| 任务 | 你给它什么 | 你拿回什么 |
|---|---|---|
| 新页面 | 一段提示词,加上真实的照片和数字 | 一个按贴合提示词抽出的主题做成的页面;说 custom 就只按你的提示词来做 |
| 完整重新设计 | 一个已有的页面或应用文件夹 | 新的设计系统和布局,内容和交互逻辑保持不变 |
| 换风格或打磨 | 一个页面,加上 keep the layout 或 polish | 布局不变、换一种样子,或者只修掉 AI 痕迹 |
| 审查 | 一个页面文件 | 一份要改的清单,不改动任何文件 |
把它指向一个 URL、开发服务器或应用,它就会截取你真实产品的画面放进页面。
点“获取”会把一个装有 Mindket 安装说明的 zip 压缩包存进你的下载文件夹,里面按 Nutlope 的 README 列出了每个智能体的步骤。主要途径是 skills 安装器。
| 需要 | 说明 |
|---|---|
| Node.js | README 要求 18 或更高版本,npm 上的 skills 包写的是 22.20 或更高版本 |
| 一个编程智能体 | Claude Code、Codex CLI、Cursor、OpenCode 或 GitHub Copilot |
| puppeteer-core 和 Chrome | 可选,用于浏览器检查和截图。没有它们时,只运行静态检查 |
| TOGETHER_API_KEY | 可选,用于通过 Together AI 的 API 生成图片的步骤 |
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 给你的编程智能体一个主题,再加一道能抓出这些习惯的浏览器检查。先挑一样你很熟悉的东西做个单页网站,并给它真实的照片和数字。
专家:能不能上线,由三类关卡决定。
| 关卡 | 检查什么 | 构建能推翻它吗? |
|---|---|---|
| Floor(底线) | 对比度、焦点和减少动效,编造的事实,以及坏掉的手机布局 | 不能,有 Floor 问题的页面绝不放行 |
| Reflex(反射) | 模型的默认套路 | 能,但要记下理由 |
| Finish(收尾) | 小细节 | 只报告,从不拦截 |
每种主题是一个最多 8 KB 的文件,提供的是材质而不是布局,所以同一主题下的两个提示词会做出两个不同的页面。重新设计时,sloplint --before 会记下每个链接、字段、处理函数和标题,只要少了一个,sloplint --kept 就会让这次运行失败。不带上下文的首屏审查和子智能体那一轮,都要多花模型回合。
它做的事大多留在你的电脑上,只有两个可选步骤会连到外面。
# 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
Updated by Mindket to the current version of this kit.
Hacker News、Bluesky、X、Reddit、Facebook 和 YouTube 上提到这个项目的帖子和评论,来自每周一次的搜索和 Trendshift。它们不是 Mindket 写的,也未经核实,点开即可在原帖处阅读。
alchaincyf · 技能
把你在 AI 智能体里写的一句话需求,变成一份完成的设计:发布动画、可点击的应用原型、可编辑的幻灯片、信息图,或一组小红书图片。可在多种智能体中使用。
op7418 · 技能
能生成单文件 HTML 幻灯片、幻灯片配图和多平台封面的技能,有两套视觉风格,还带演讲者模式用于排练。适合使用 Claude Code 或 Codex 的演讲者。
alirezarezvani · 技能
为 Claude Code 和其他编程智能体提供 411 个现成技能,按角色分组,从工程、产品到营销、财务和合规。以插件方式安装。适合开发者和业务团队。
block · 工具包
可自行托管的工作空间,人和 AI 智能体在同样的房间里协作,基于 Nostr 中继,把每个动作记录为签名事件。适合想自己运行中继的团队。
backnotprop · 工具包
把你的 AI 编程智能体的计划、规格和代码改动在浏览器里打开,让你加批注或评论,并把反馈直接发回给智能体。
alibaba · 工具包
用 AI 智能体审查 Git 改动:它会读取文件、搜索代码库,再写出对应到具体行的审查意见。适合想在命令行里自动做代码审查的开发者。