create-html-artifact 是一个以单个可移植本地 HTML 文件为最终交付物的技能，适用于报告、文档、仪表盘、落地页、演示、工具等场景。
用途与交付形态 最终产物是恰好一个 .html 文件，从磁盘打开即可正确渲染，并可被移动、邮件发送或单独分享。交付方式为文件路径：保存到用户指定位置，否则在工作目录中取一个描述性名称，并返回该路径；不上传、托管或发布页面。
制作流程 产出分两步：先撰写正文片段，再使用随附脚本构建。片段只写页面内容——标记以及其自带的 <style> 和 <script> 块；不要手写 <!doctype>、<html>、<head> 或 <body>，构建步骤会注入骨架，并拒绝包含这些标签的输入。构建命令为：python3 scripts/build.py fragment.html -o page.html [--title ...] [--lang ...]，它会将片段包裹进完整骨架，并在页面自身样式之前注入一个极简 CSS reset（设置 color-scheme: light dark；刻意单主题的页面可覆盖它）。
Mermaid 图表 每次构建都会注入 Mermaid 库（固定版本的 CDN 标签）以及主题感知初始化，因此 <pre class="mermaid"> 块会渲染为图表；当 CDN 不可达时，图表源码会以纯文本形式保持可见。
可移植性约束 交付物必须能独立存活：恰好一个 .html，本地资源内联——样式与脚本写在片段中，生成或本地图片以 data: URI 形式嵌入。禁止用相对路径引用同级文件作为替代。库、网络字体与远程图片通过 CDN URL 加载，并固定版本以避免未来版本发布导致页面变化。交付前需检查构建文件中指向本地相对路径的 src=、href=、url( 值，命中即破坏单文件可移植性，说明尚未完成。
设计处理 先阅读请求，校准的是“处理方式”而非“是否设计”。文档与落地页同样需要工艺，区别在于处理方式。许多请求（计划、备忘录、报告、演示）适合实用型处理：打磨排版层级、考量的间距与合适的配色，但不过度设计；多数页面不需要炫目 hero。部分请求（落地页、游戏、用户会保留或分享的应用或工具）适合编辑型处理。不确定时，构图良好的页面从来不会错，过度设计的视觉识别有时会错。
每个交付物的基本要求 尊重既有设计系统（如 CLAUDE.md、tokens 或主题文件、现有组件样式）并优先套用；优先级为：用户明确表述、项目既有系统、自身选择。内容要扎根具体主题、受众与页面的单一任务，使用真实内容而非占位文本。字体方面需配对字体族，从 CDN 加载并固定字重与子集，提供本地回退；正文行宽约 65 字符；大号展示文字收紧字距、行高接近 1.1，正文保持接近零字距并给足行高；用 rem/em 设定间距。中性色应带有朝向强调色的轻微色相偏差。需同时设计明暗两种主题，稳妥做法是在 :root 上用自定义属性定义调色板，仅在 @media (prefers-color-scheme: dark) 下重定义令牌，组件通过令牌样式化；若页面自带主题切换，在根元素上打 data-theme="dark" / data-theme="light" 并再次重定义令牌。布局用 flex 或 grid 与 gap 处理间距，宽内容（表格、代码、图表）置于 overflow-x: auto 的容器中，图片使用相对单位与 max-width: 100%，数字列使用 font-variant-numeric: tabular-nums。避免常见的 AI 生成设计套路，除非用户指定。代码需闭合所有非空元素、属性加双引号、为键盘焦点提供可见状态、尊重 prefers-reduced-motion；生成式或装饰性图形优先用 Canvas 或 WebGL。注意选择器特异性与层叠冲突。文案作为设计材料，从用户视角命名，使用主动语态，错误信息说明原因与修复方式。结构装置（编号、眉题、分隔线、标签）应编码真实信息而非装饰。涉及手势驱动或动画交互前，阅读 references/motion.md；静态页面可跳过。当产物是 UI 而非文档时，工艺从排版转向信息设计：先摘要后细节，用形态（pill、chip、严重度色条）与数字一同编码状态，语义色与强调色分开。
设计计划与编辑型请求 写代码前先拟定紧凑的令牌系统：颜色（4–6 个命名十六进制值）、字体（至少 2 个角色的字体族，含有个性的展示字体、互补正文字体，必要时数据用工具字体）、布局（一到两句概念）。随后据此构建。编辑型请求中立场转变：用户已拒绝模板化提案，需要鲜明观点；在服务作品的前提下做有主见的取舍并承担一次真实审美风险。构建前对照主题复核设计计划，若某部分读起来像通用默认方案则修改，并记录改动与原因后再写代码。hero 即论点：以主题世界中最具代表性的事物开场。排版承载页面个性，展示字体与正文字体需刻意配对。动效需有意图：页面加载序列、滚动触发显现、悬停微交互、环境氛围；一个有编排的时刻通常比零散效果更有力，过多动画本身就是 AI 生成的痕迹。复杂度需与愿景匹配：极繁方向需要精细执行，极简方向需要在间距、字体与细节上精确。把大胆用在一处，周围保持安静；若强调色与底色冲突，向邻近色偏移或降低饱和度。
限制与暂未提供 页面不得依赖同级本地相对路径文件；交付即文件路径，不负责上传、托管或发布。构建脚本对含 doctype/html/head/body 的片段输入会拒绝。关于该技能的具体价格、收费模式、平台支持范围、安装方式与运行环境要求等，资料中暂未提供。