使用AI编程助手制作网站时，经常会出现相似的页面结构：顶部放一段大标题，中间排列三个功能卡片，下面再添加行动按钮和页脚。即使更换颜色和字体，多个项目看起来仍然像同一套模板。

Nutlope开发的Hallmark是一套面向AI编程助手的开源设计技能，主要用于限制常见的AI网页设计模式，让不同项目在页面结构、字体搭配、颜色和组件节奏上产生更明显的差异。

截至2026年7月20日，Hallmark支持Claude Code、Cursor和Codex，项目采用MIT许可证，当前技能版本为1.1.0。

Hallmark主要有什么作用？

Hallmark并不是新的网页框架，也不会替代React、Next.js、Vue或普通HTML。它更接近一套供AI编程助手读取的设计规范。

安装后，AI助手会根据Hallmark中的规则选择页面结构和设计方向，并在输出前检查常见问题。项目当前提供20种主题以及一套自定义设计流程，不同需求不会只进行简单的颜色替换。

Hallmark主要提供四种使用方式：

• 默认模式：根据需求创建新的网页或应用界面；
• hallmark audit：检查已有页面，列出设计问题，但不修改代码；
• hallmark redesign：保留原有内容、品牌和信息结构，重新设计视觉层；
• hallmark study：分析截图或网页的结构、字体和颜色特征。

study模式的目标是提取设计思路，而不是逐像素复制原页面。对于付费模板或无法正常读取的页面，项目也设置了相应限制。

Hallmark适合哪些项目？

Hallmark比较适合以下场景：

• 使用AI制作企业官网；
• 开发SaaS产品介绍页；
• 重新设计已有管理后台；
• 检查网页是否存在明显的模板化问题；
• 为多个品牌生成不同风格的落地页；
• 将设计规范保存到项目中供团队复用；
• 在Claude Code、Cursor或Codex中统一设计规则。

项目规则要求AI不得随意编造客户数量、转化率、评价、品牌Logo和其他证明材料。如果用户没有提供真实数据，Hallmark要求使用占位内容或调整页面结构，而不是生成看起来可信但实际不存在的数据。

Hallmark需要部署到云服务器吗？

Hallmark本身只是技能文件，不需要单独启动数据库、后台服务或Docker容器。个人开发者可以直接安装在自己的电脑上。

云服务器更适合以下情况：

• AI编程任务需要长时间运行；
• 希望从多台设备连接同一套开发环境；
• 代码仓库和测试网站需要保持在线；
• 团队需要共享统一的Node.js和前端环境；
• 需要通过域名展示Hallmark生成的页面；
• 不希望个人电脑关机后中断构建任务。

在这类场景中，可以将莱卡云服务器作为开发环境候选。服务器上安装Linux、Git、Node.js和对应的AI编程工具后，再安装Hallmark技能，即可通过SSH进行远程开发。

这里部署的并不是一个“Hallmark后台”，而是一套包含Hallmark、AI编程助手和网站源码的远程开发环境。

服务器配置怎么选择？

Hallmark技能文件本身资源占用较低，实际配置主要取决于正在开发的网站和运行的AI工具。

简单网页和个人测试

可以参考：

• 2核CPU；
• 2GB至4GB内存；
• 40GB以上SSD；
• Ubuntu或Debian系统。

React、Next.js或多个项目

可以参考：

• 4核CPU；
• 8GB内存；
• 80GB以上SSD；
• 配置快照或代码备份；
• 使用普通用户运行开发工具。

多个AI Agent并行开发

可以参考：

• 8核CPU；
• 16GB以上内存；
• 150GB以上SSD；
• 根据项目数量增加存储空间；
• 配置CPU、内存和磁盘监控。

这些配置属于一般开发环境参考，并不是Hallmark官方规定的最低要求。构建大型Next.js项目、安装大量依赖或同时运行多个AI编程助手时，对内存和CPU的需求会明显增加。

选择莱卡云服务器时，可以从基础配置开始测试。后续出现依赖安装缓慢、构建内存不足或并行任务增加，再升级配置会更容易控制成本。

在Linux服务器上准备环境

连接服务器：

ssh root@服务器IP

更新系统并安装基础工具：

apt update
apt install -y git curl ca-certificates

不建议长期使用root账号运行AI编程工具，可以创建一个普通用户：

adduser developer
usermod -aG sudo developer
su - developer

检查Node.js和npm：

node --version
npm --version
npx --version

如果服务器尚未安装Node.js，建议安装当前仍受支持的LTS版本。具体版本还应与正在开发的前端项目保持一致。

安装Hallmark

Hallmark官方提供的安装命令是：

npx skills add nutlope/hallmark

以后重新执行相同命令即可更新技能。

安装完成后，应根据使用的AI编程工具检查技能文件位置。

Claude Code

默认技能目录为：

~/.claude/skills/hallmark/

Codex

个人级技能目录：

~/.codex/skills/hallmark/

项目级技能目录：

项目目录/.codex/skills/hallmark/

Cursor

Cursor可以将SKILL.md正文保存为项目规则：

项目目录/.cursor/rules/hallmark.mdc

Claude Code、Cursor和Codex对应的手动安装路径均由项目README列出。

创建网页时怎么使用？

进入准备开发的网站目录：

cd ~/projects/company-site

启动已经安装好的AI编程助手，然后描述真实需求，例如：

使用Hallmark重新设计这个企业官网首页。

保留现有文字内容和路由，不要删除原有业务组件。
页面面向工业材料采购客户，需要清晰展示产品分类、
生产能力、质量控制和联系方式。
不要编造客户数量、认证证书或销售数据。

Hallmark会根据需求选择页面结构和主题，并在输出前进行设计检查。

如果只是检查页面问题，可以在AI助手中输入：

hallmark audit ./src

希望保留内容但重新设计界面：

hallmark redesign ./src

分析一个参考页面的设计特点：

hallmark study 页面地址

这些内容是在AI编程助手的对话中输入，不是在普通Shell中执行的独立Hallmark命令。

修改已有项目时要注意什么？

Hallmark的规则明确要求，在已有项目中不能未经确认就删除生产文件、路由目录或组件。默认应修改指定文件，或者增加新的组件和设计变量。涉及批量删除时，需要先列出文件计划并获得确认。

为了避免AI误改项目，可以在操作前要求：

先列出准备创建和修改的文件，不要删除任何文件。
等我确认后再开始修改。

修改完成后检查Git差异：

git status
git diff

确认没有问题后再提交：

git add .
git commit -m "redesign homepage with Hallmark"

重要项目应先建立独立分支：

git switch -c hallmark-redesign

这样即使设计效果不符合预期，也可以随时回到原来的代码。

如何预览Hallmark项目中的示例？

Hallmark仓库内包含一个静态展示站点。项目的package.json提供了本地预览脚本，会使用Python HTTP服务器在4173端口运行site目录。

克隆仓库：

git clone https://github.com/Nutlope/hallmark.git
cd hallmark

启动预览：

npm run serve

检查监听端口：

ss -lntp | grep 4173

可以通过SSH隧道在本地浏览器查看：

ssh -L 4173:127.0.0.1:4173 developer@服务器IP

然后访问本地的4173端口。

这个静态站点主要用于展示不同主题和页面案例，并不是必须部署的Hallmark管理后台。仓库的部署配置同样将site目录作为纯静态输出，不需要单独执行构建和安装命令。

是否需要开放公网端口？

只通过SSH远程开发时，服务器安全组通常只需要开放SSH端口。

本地开发服务器、Python预览服务和前端调试端口不建议直接暴露给所有公网用户。临时查看可以使用SSH隧道，正式展示网站则应通过Nginx配置域名和HTTPS。

还应做好以下处理：

• 使用SSH密钥登录；
• 禁止直接使用root运行AI工具；
• 不将API密钥提交到Git；
• 限制环境配置文件权限；
• 重要代码定期推送到私有仓库；
• 修改前创建Git分支或服务器快照。

Hallmark能完全代替设计师吗？

Hallmark能够减少部分常见的AI模板化问题，但最终效果仍取决于需求描述、真实文案、品牌资料、图片素材和开发者的检查。

企业网站如果缺少真实产品信息、品牌颜色、应用案例和业务结构，仅依赖设计规则仍然很难得到完整结果。使用时应尽量提供：

• 企业和产品介绍；
• 准确的栏目结构；
• 品牌颜色和Logo；
• 真实产品图片；
• 联系方式；
• 可以公开使用的数据；
• 希望保留或避免的设计元素。

Hallmark适合用来约束AI编程助手的设计过程，而不是自动解决内容、品牌和业务信息不足的问题。

部署建议

个人只需要生成少量网页时，可以直接在本地安装Hallmark。需要远程开发、多个项目管理或长期运行AI编程任务时，可以在莱卡云等Linux云服务器上建立统一环境。

莱卡云主要承担代码托管、依赖安装、页面构建和远程预览等工作，Hallmark则作为Claude Code、Cursor或Codex的设计技能运行。选择配置时，应根据实际前端项目和并行任务数量判断，从基础配置开始测试，再按照CPU、内存和磁盘使用情况逐步调整。