hallmark skill 网页改版可以先用 sloplint 的 --before 记录现有链接和表单，再调整样式，最后在同一目录对同一页面运行 --kept。保留检查确认原有记录项是否还在，样式检查报告则用于继续修复设计问题。
Hallmark Skill 网页改版前怎么保存基线？
先把原始HTML备份好，再运行 sloplint --before 记录当前页面的所有链接和字段。生成的快照直接存在当前工作目录的 .hallmark/before.json 路径下。
把练习页放在独立目录
先找个空目录克隆官方仓库，再单独建一个练习用的目录。要是做正式项目，直接开个独立分支就行，改版前的所有版本都能完整留存。
git clone https://github.com/Nutlope/hallmark.git hallmark-source mkdir hallmark-lab cd hallmark-lab
记录基线前怎么检查原页面？
把下面这段示例代码存为 index.html。打开页面后点预约链接，确认它能跳到 #booking，再空着日期点提交，检查必填提示能不能正常触发。
<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的创作门槛☜☜☜
--before 命令怎么运行，快照存在哪里？
还没改任何页面文件的时候，先执行以下命令。看到终端提示写入 .hallmark/before.json，确认已经记录了 1 条链接和 1 个字段，再进入下一步。
cp index.html index.before.html node ../hallmark-source/skills/hallmark/scripts/sloplint.mjs index.html --before test -f .hallmark/before.json
怎么调整网页样式并保留原有功能？
在预约页中调整配色、留白和焦点样式，跳转锚点、日期字段及其必填属性都保留不动。
替换配色、留白和焦点样式
用下方代码替换原来的 style 标签，把元描述放在它前面就行。新代码把配色集中写在 :root 里，页面留白调整为 40px 和 48px，还给交互元素加了键盘焦点样式。
<meta name="description" content="用于验证预约表单与链接保留的本地练习。"><style>:root{--paper:#e4efe8;--surface:#fbfff8;--ink:#232821;--accent:#174c38;--white:#fff}body{margin:0;background:var(--paper);color:var(--ink);font:18px system-ui}main{max-width:620px;margin:40px auto;padding:48px;background:var(--surface)}a{color:var(--accent)}label{display:block;margin:16px 0}button{padding:12px 16px;background:var(--accent);color:var(--white);border:0}a:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:active{transform:translateY(1px)}button:disabled{opacity:.65}</style>
改完 CSS 要保留哪些链接和表单属性？
确认锚点仍是 #booking，表单仍使用 id="booking"，日期字段仍叫 visit_date 且保留 required 属性。打开浏览器刷新，核对变更范围是不是只有之前约定好的视觉部分。
怎么确认网页改版后链接和表单还能用？
回到存基线的目录运行 --kept，之后在浏览器手动检查跳转、日期校验和键盘操作是否正常。
--kept 怎么运行，找不到基线怎么办？
全程用之前的练习目录和 index.html 操作就行。如果工具找不到基线，先用 pwd 核对当前目录，再检查快照文件是否存在。基线丢失时，用原始备份重新建立就可以。
node ../hallmark-source/skills/hallmark/scripts/sloplint.mjs index.html --kept
保留结果 1/1 和设计 FAIL 怎么读？
正常跑通的话链接和字段保留率都是 1/1，设计检查部分仍有 3 项 FAIL 和 1 项 REFLEX。如果链接或字段少了，先对照 index.before.html 恢复对应标记，再复跑命令。
用键盘和窄屏验收预约表单
点预约链接，按 Tab 键依次切过日期字段和提交按钮。确认空日期提交仍会触发必填提示，选好日期后字段也能正常操作。最后把浏览器缩到手机宽度，检查按钮和日期框的显示位置。这个示例是本地表单，接入后端后还需要额外验证请求和响应逻辑。
