用途：在创建 HTML 作品（页面、报告、方案、落地页、演示、小工具）时提供设计原则与创意方向。核心思路是先判断需求属于哪种层级：常规型（方案、简报、演示）需完善排版层级、间距与配色，但适可而止；编辑型（落地页、游戏、应用与工具）才值得更强烈的视觉主张。
主要能力与规范：优先沿用项目已有设计系统（如 AGENTS.md、CLAUDE.md、DESIGN.md、QUALITY.md、PRODUCT.md、tokens 或主题文件），其优先级为“用户明确指令 > 项目已有系统 > 自身品味”。字体上要求两种字体形成对话，禁止使用 Google Fonts 等字体 CDN，改用 @font-face data URI 内嵌；正文行宽约 65 字符，标题用 text-wrap: balance。中性色需有意选择，可向强调色微调。明暗主题需同等对待：通过 prefers-color-scheme 与 data-theme 属性切换，约定在 :root 声明 token，在媒体查询和属性选择器内只重设 token，组件只消费 token。间距由布局负责（flex/grid + gap），宽内容用 overflow-x: auto 独立容器，数字列用 tabular-nums。还列出应避免的典型 AI 审美（如暖米色配衬线加陶土色强调、紫蓝渐变等），并强调可访问性（键盘焦点可见、尊重 prefers-reduced-motion）。
使用方式：写代码前先做简短设计计划——4 至 6 个带名称的十六进制色值、覆盖 2 个以上角色的字体组合、一两句话说明布局组织思路，然后严格按计划实现。编辑型需求需先对照主题审查计划，剔除可套用于任何类似需求的通用答案后再写代码。
发布与限制：作品完成后，仅当用户明确同意，才用 tot CLI 发布，命令为 tot path/to/artifact.html；若未安装（command -v tot 失败），提示用户并仅在获得明确同意后执行 npm install -g @plannotator/tot。未经用户明确同意不得发布或安装；发布后的页面任何持有链接者均可访问。资料未提供该技能的收费、具体适用平台与效果数据。