Hallmark Skill使用教程-人工智能-PHP中文网

hallmark skill 可以用 sloplint 对现有 html 运行静态检查，查看文件、行号和规则。下面以本地预约页为例，先跑检查，再针对颜色、间距和焦点逐项修复。浏览器渲染检查可以在安装相关依赖后另行运行。

怎么准备 Hallmark Skill 的静态审计练习？

先从Hallmark官方仓库拿到 sloplint.mjs，再单独建一个 index.html 作为待检查的测试文件就行。

sloplint 静态审计脚本在哪里？

下面的命令要在空工作目录里执行，存放源码的目录和练习目录要设为同级，后面所有操作直接调用脚本就不用改路径。要是你本地已经有重名的目录，换个全新的空目录操作就好。

git clone https://github.com/Nutlope/hallmark.git hallmark-source
mkdir hallmark-lab
cd hallmark-lab

可复现颜色和间距问题的 HTML

把下面这段HTML存到当前工作目录，文件名设为 index.html。示例里故意把颜色值直接写在样式规则里，还留了不符合规范的间距，你后面可以对着检查报告逐条改。

<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>工作室预约练习</title><style>body{margin:0;background:#f0eee8;color:#232821;font:18px system-ui}main{max-width:620px;margin:70px auto;padding:35px;background:white}a{color:#174c38}label{display:block;margin:16px 0}button{padding:10px}</style><main><h1>预约工作室参观</h1>
<p>本地演示页面</p>
<p><a href="#booking">查看预约表单</a></p>
<form id="booking">
<label>来访日期 <input type="date" name="visit_date" required></label><button type="submit">提交预约</button>
</form></main>

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

待审计的本地预约页面

怎么运行 sloplint 并读懂静态审计报告？

用Node.js把待检查的HTML文件传给 sloplint.mjs，之后照着报告里的规则编号、对应文件和CSS选择器就能直接定位问题。

检查本地 index.html 的命令怎么写？

先确认终端当前的工作路径就在 hallmark-lab 文件夹里。如果提示找不到脚本，核对下前面克隆的源码目录位置是否正确就行。等终端输出完整的规则列表和统计汇总，就可以开始读报告，照着提示挨个处理问题。

醒蓝AI

醒蓝AI是一款用于生成职业形象照、证件照、写真照和换脸照片的 AI 照片工具。

下载

node ../hallmark-source/skills/hallmark/scripts/sloplint.mjs index.html

FAIL、REFLEX 和 WARN 怎么读？

FAIL 是必须修复的错误项，REFLEX 是提醒你检查有没有套用通用设计默认规范的提示，WARN 是可选优化的提醒。这份示例跑出来总共7项FAIL、5项REFLEX和1项WARN。其中 FAIL 48 对应的是 body 和 a 标签里三个写死的硬编码颜色值。因为示例HTML是压缩成单行的，所有代码行号都会显示为第一行，直接用报告里给的选择器定位问题就好。

预约页静态检查中的间距和元描述问题

怎么修复 sloplint 的颜色问题并验证结果？

把报告指出的硬编码颜色值提取成CSS变量，之后再对同一个文件重新跑一次检查。这个示例里我们就看 FAIL 48 有没有消失，来验证修改是否生效。

用 CSS 变量修复 FAIL 48

打开原来的 style 标签，把下面这段规则替换掉原来写的 body 和 a 样式，记得把 :root 选择器放在最前面，剩下的样式代码和页面里的表单内容都不要动。

:root { --paper: #f0eee8; --ink: #232821; --link: #174c38; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 18px system-ui; }
a { color: var(--link); }