hallmark skill 是 together ai 发布的开源网页设计技能，可供 codex、claude code 等编码助手使用。它根据页面任务提供设计方向，并用 sloplint 检查 html 和 css。新建页、检查旧页和保留功能改版，都有对应的用法。
Hallmark Skill 适合做哪些网页？
Hallmark Skill 最适合做需求明确的新网页，也能用来给已有页面做审计或者改版。处理预约类页面时，得先把访客要完成的核心动作理清楚。
先确定访客要完成的预约动作
就拿工作室参观预约页举例，用户最核心的操作就是选预约日期。你提前把参观说明、可预约日期的规则、提交入口的要求都列清楚就行，还没最终敲定的开放时段先留空，别让AI助手把占位内容直接当成正式信息输出。
新建网页、审计和改版怎么选？
从零搭新页面的话，直接让助手生成能直接在浏览器打开的完整页面就行。要是改已有页面，先到项目根目录确认好要处理的目标文件，比如 public/visit.html，同时跟助手说清你的需求：是只排查问题，还是允许它直接修改本地文件。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
怎么用 Hallmark Skill 提出网页设计需求？
在已经加载好 Hallmark 的会话里，说清访客目标、现有文案内容、允许改动的范围就行，生成完成后按对应文件类型选预览方式。
一段可直接交给助手的预约页需求
在已经加载完 Hallmark 的编码助手会话里，直接说清楚页面要实现的目标、可用的现成文案、允许修改的文件范围就可以。要是预约表单还没对接后端，一定要明确说明这只是本地演示版本。
将来自 Marvis 或微信的可信远程软件开发请求中继至用户本地的 Codex CLI，等待编码任务完成，并返回经验证的结果。当用户通过 Codex 要求 Marvis 检查、实现、修复、测试、review 或继续在明确指定的本地项目目录中开展工作时，使用此功能。
请用 Hallmark 制作参观预约页。保留我提供的参观说明，访客需要能从页面入口跳到日期字段。表单暂时只演示必填校验，不连接后端，也不显示预约成功。请告诉我改了哪些文件。
生成的 HTML 或框架页面在哪里预览？
如果生成的是独立HTML文件，直接用浏览器打开就能看。要是是框架项目，就用项目原本的启动流程，预览对应路由下的页面就行。要是助手没主动说明改了哪些文件，先让它列全所有改动的文件路径，再打开对应页面做验证。
怎么验收 Hallmark Skill 生成的预约页？
先检查预约跳转链接和日期必填校验，再用窄屏适配测试和键盘导航测试，确认整个表单都能正常操作。
怎么测试预约链接和日期必填校验？
点击预约跳转链接，确认页面能正常跳到表单所在的区域。先不填任何内容直接提交，确认页面会正常提示日期必填。再选一个日期，核对输入框显示的内容和你选的是否一致，等后续对接完后端，再验证真实提交的完整流程。
怎么检查移动端布局和键盘焦点？
把浏览器窗口缩到手机屏幕宽度，确认日期选择框和所有操作按钮都能完整显示不溢出。按Tab键依次切换访问页面上的链接、输入字段、按钮，检查每个元素的选中焦点是否清晰。要是哪一步验证没通过，直接把当前页面路径、实际出现的问题、你预期的效果一起发给助手，让它重新排查调整。
