html

HTML

构建一个独立的 HTML 文件，让主题更清晰、更易使用或更易理解。标准是始终用心，而不是始终采用相同的外观。不要复刻以往运行中使用的固定配色、字体组合、卡片系统或布局。

先为请求确定方向

针对主要评审问题，选择最合适的技能：

• 如果配色、字体、构图、主题风格或整体视觉基调尚未确定，请阅读并结合 design-artifact 与选定的工作流。它负责提供创意方向；但不能取代负责保真度、结构或行为的专门技能。
• 如果结构、信息层级、导航或任务流程尚未确定，请阅读并遵循 html-wireframe。它应保持明显的低保真状态，并可比较两到三种布局方向。
• 如果用户需要精致的模型稿或可交互的工作流程，请阅读并遵循 html-prototype。模型稿是该技能中的静态保真模式。
• 如果产物主要是计划、路线图、实施顺序或推出文档，且需要便于核实来源中的承诺，请阅读并遵循 html-plan。
• 如果关系、顺序、拓扑、状态、层级或系统行为是主要内容，请阅读并遵循 html-diagram。
• 对于报告、说明文、演示文稿、落地页、数据故事、工具，以及没有更明确归属的混合型产物，请继续使用 html。

如果这些技能所在的集合一并安装，上述同级链接就是嵌套机制。如果无法使用某项专门技能，请继续使用此处的技能，并加载最接近的参考资料。完成请求前，不要要求用户安装其他技能。

设计前先了解情况

检查用户的请求和提供的材料。如果在代码库中工作，请从 AGENTS.md、CLAUDE.md、设计系统文档、设计令牌、现有组件和相邻产物中了解其设计语言。

按以下顺序确定优先级：

1. 用户明确提出的视觉和功能要求。
2. 项目既有的设计系统和惯例。
3. 产物的主题、受众和用途。
4. 你自己的设计判断。

编码前，在工作笔记中确定以下五项：

• 受众和目标： 谁会使用它？他们应该理解什么或采取什么行动？
• 形式： 文档、演示文稿、界面、图表还是数据可视化。
• 风格基调： 沉静务实、精致且具编辑感，还是刻意鲜明。
• 保真度： 是保留用户的结构和措辞，还是更自由地综合创作。
• 交互： 是否需要通过探索、排序、筛选或动态效果来提升体验？

如果项目已对视觉问题作出规定，请遵循这些规定。否则，如果 design-artifact 可用，请阅读并结合使用。如果安装的集合中没有该同级技能，请先阅读 references/creative-direction.md，再选择配色、字体、构图或动态效果。

只加载产物所需的指导

• 对于报告、简报、计划、说明文和演示文稿，请阅读 references/documents-and-presentations.md。
• 对于界面、计算器及此通用技能涵盖的其他工具，请阅读 references/interfaces.md。
• 对于架构、流程、顺序、状态、层级或概念图表，请阅读 references/diagrams.md。
• 对于定量图表、表格、指标或数据故事，请阅读 references/charts-and-data.md。

请求可能涉及多种形式。阅读所有实质相关的参考资料，然后为产物确定统一的方向。

构建要求

• 生成一个 .html 文件，并将必要的 CSS 和 JavaScript 内嵌其中。文件应可直接打开，无需构建步骤。除非用户允许使用外部依赖，否则不要要求联网。
• 使用真实内容。不要用占位文案、装饰性统计数据或不起作用的控件填充显眼区域。
• 根据内容决定结构。序列应按顺序呈现；比较应便于浏览差异；界面应展示状态和操作；图表应清晰呈现关系。
• 使用语义化 HTML、响应式布局、无障碍对比度、清晰可见的键盘焦点，并支持减少动态效果设置。交互元素应支持键盘操作。
• 避免页面主体出现意外的水平溢出。将有意设置为宽幅的内容放入带有滚动或平移功能的容器中。
• 为选定的设计方向定义一小组 CSS 令牌，并保持一致使用。令牌是实现工具，不是预设的配色方案。
• 将动态效果用于解释或反馈。如果移除动画不会损失任何含义或实用反馈，就移除它。
• 遵循用户或项目的主题策略。如果没有相关策略，且有助于使用，请考虑为耐用实用型作品提供浅色和深色主题。有意采用单一主题也可以。

完成工作

将文件写入指定位置，或在当前工作区中选择一个明确的文件名。如果有浏览器工具，请打开文件并检查宽、窄视口。操作各项控件，检查控制台，并修复裁切、重叠、文字难以辨认、状态异常和意外溢出等问题。

交付前进行一次原创性检查：如果将主题替换为相近主题，同样的视觉概念是否依然恰如其分？如果是，说明设计方向过于通用；请调整构图、字体、颜色、图像或交互方式，使其更贴合当前主题。

返回绝对路径，并简要描述作品的视觉设计和交互选择。