用途：构建高密度、自包含的静态 HTML 视觉产物，例如交互式图表、仪表盘和信息图，直接在浏览器中打开查看。
主要能力：技术栈为原生 HTML5 + CSS3（Grid/Flexbox）+ 内联 SVG，无运行时依赖、无 node_modules、无 package.json、无构建工具链。初始化脚本会生成带 CSS 自定义属性主题、Grid/Flexbox 布局工具和打印就绪 viewport 的模板。
使用方式：
- 初始化：bash scripts/init-artifact.sh <project-name>，然后 cd <project-name>。
- 开发：直接编辑生成的 index.html，每个 HTML 文件对应一页一个明确信息。可用 grid-template-areas 命名区域、fr 单位分配空间、内联嵌入 SVG 图标、用 CSS 自定义属性统一配色，并用 clip-path、border-radius、渐变和 box-shadow 增加层次。
- 校验打包：bash scripts/bundle-artifact.sh，检查无外部资源引用、确认存在内联 SVG、报告文件大小，并输出 bundle.html。
- 将校验后的 HTML 文件分享给用户查看。
设计约束：避免过度居中布局、紫色渐变、统一圆角和 Inter 字体；信息图内容与留白比不低于 70:30；每个主要概念配内联 SVG 图标；配色 3-4 个色相加中性色并编码含义；流程用带箭头的 SVG 连接线；布局用显式 Grid 行列分配，间距需有意图。
适用场景：多区块高密度信息图、带交互标签或开关的自包含仪表盘、CSS Grid 布局控制关键的页面、需 Playwright 截图的产物。不适合需要可编辑矢量 SVG 的架构图、简单概念插图、幻灯片演示。
限制：截图与渲染需浏览器运行时；纯客户端，无服务端渲染、无动态数据或 API 调用；无持久状态，交互在刷新后重置；建议文件小于 500KB，超过 1MB 可能无法作为内联产物渲染；仅系统字体或内联 base64 字体，不得引用外部字体 CDN；打印保真度因浏览器而异。