hallmark skill 的主题用于定义网页的字体、配色、表面质感和组件风格。选主题时先确定访客要做什么，再比较成品示例。比如预约页需要让用户找到日期字段和提交入口，主题应服务于这两个操作。
Hallmark Skill 的主题怎么选？
先把用户的核心操作捋清楚，再结合你现有的页面内容、品牌设计要求筛可选主题。要是做预约页，直接拿「日期选择」「提交操作」这两个核心点去对比不同候选主题就够。
围绕日期选择和提交入口筛主题
用户进到预约页，一般先扫一遍参观说明，再选日期、点提交。对比不同主题的时候，重点看这几部分内容好不好找，操作顺不顺手。
选主题前要告诉助手哪些设计约束？
提前说清楚哪部分文案已经定稿不能改、哪些颜色是品牌规定必须用的，还有旧页面的跳转链接、表单字段要不要保留。也可以先让助手给你讲清楚，候选主题怎么适配你定好的预约操作全流程。
请用 Hallmark 为参观预约页提出适合的主题。保留现有简介和日期字段，先说明标题、说明和表单怎样安排，再给出候选方向。
要是你已经把Hallmark仓库克隆到本地了，直接在仓库根目录运行主题生成脚本，就能得到适配预约页需求的主题候选。下面示例使用 editorial 作为设计方向。
node skills/hallmark/scripts/theme.mjs deal --genre editorial --prompt "Design a studio visit booking page with a date field"
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
Hallmark Skill 的 Cobalt 和 Dusk 有什么区别？
Cobalt 官方给出的参考样例是 webhook API 文档页，Dusk 的官方样例是财务对账页面。你可以直接拿这两个成品对比信息层级、页面内容密度、核心操作入口的位置差异。
Cobalt 的标题和操作入口
Cobalt 配套的 Relay 样例专门适配 webhook API 场景，你可以参考它浅色背景下标题、正文、操作按钮的区分逻辑，套用排版的时候直接保留你自己的参观说明和预约字段就好。
menu.js是一款Material Design风格的jquery下拉菜单插件。通过menu.js插件，你可以非常轻松的制作出Material Design风格的下拉菜单或下拉列表。 使用方法 在页面中引入样式文件menu.css和jquery.min.js、menu.js文件。
Dusk 的内容密度与文字对比
Dusk 配套的 Closewise 样例是对账页面，把它和 Cobalt 放在一起对照，重点看内容疏密程度、重点文字和底色的对比度、操作入口和旁边说明文字的间距，对比完很容易就能选出更适配你预约页的方向。
怎么判断 Hallmark 主题适合现有页面？
用完全相同的内容和交互逻辑生成页面，逐项检查窄屏适配、键盘焦点状态、日期必填校验这几个点就行。
选好主题后要保留哪些内容和交互？
定好主题之后，让生成工具全程用同一版文案、同一个日期字段、同一套提交交互，只调整配色、字体和组件样式。如果你们团队有固定的设计规范，明确说清楚哪些颜色、哪些组件样式必须沿用就行。
怎么用窄屏和键盘验收主题？
把浏览器窗口拖窄模拟手机端访问，确认核心操作入口还是一眼就能找到。按 Tab 键依次切换页面焦点，检查日期字段和操作按钮的焦点状态是否正常，再清空已经选好的日期，验证必填提示能不能正常弹出来。如果是按钮对比度不够、字段排布太挤这类问题，先调整对应组件的参数，再把全流程重新走一遍复查就行。
