用途:artifact-css 为智能体生成的 HTML 产物提供一套一致的视觉语言。其约定是输出始终是单个 .html 文件,使用其中的类名词汇(如 .panel、.callout、.kv-strip、.timeline、.badge、.note),而非纯 Markdown 或无类名的原始 HTML。文件约 16KB 原始、约 4KB gzip 后,无 JavaScript、无构建步骤、无外部依赖。
主要能力:库内包含设计令牌(颜色、字体、间距、圆角、阴影)、基础排版(h1–h4、正文、eyebrow、lead)、分区外壳(sec-head、sec-intro、rule)、表面容器(panel、callout、note、prompt-box)、行内原子(tag、pill、badge、avatar、dot)、按钮与输入、表格、统计卡片、键值条、高亮与标签列表、时间线与里程碑、代码块、diff 以及网格与工具类。所有视觉值以 CSS 自定义属性声明在 :root,可通过覆盖重新主题化。
使用方式:两种交付模式。模式 A 链接文件:<link rel="stylesheet" href="artifact.css">。模式 B 将文件内容内联到 <head> 的 <style> 块中,适合需要单文件可移植的产物,也是多数智能体产物的默认方式。每个产物使用统一页面骨架,容器可用 .page(860px)、.page-wide(1120px)或 .page-narrow(680px)。单文件可包含多视图(如幻灯片、可点击原型、分步向导),但应始终交付一个 .html 文件。
可选交互层:基础库为纯 CSS。当需要折叠、标签页、可排序列表、拖拽、滑块、对话框、自动补全、日期选择器时,可选引入 jQuery 4.0.0 与 jQuery UI 1.14.2(固定版本并提供 SRI 哈希)。静态文档(报告、计划、评审)不应加载它。交互模板须优雅降级:jQuery 加载失败时折叠块显示为普通可见块,标签页显示为堆叠分区,可排序列表显示为普通 ul,滑块回退为原生 input type=range。关键内容不得由 JS 注入,JS 只增强既有标记。
适用场景:状态更新、复盘、说明文档、计划、评审、编辑器等常见产物原型,另配有更具体的模式技能(artifact-report、artifact-plan、artifact-review、artifact-explainer、artifact-editor)。
限制:官方资料未提供收费、价格、平台支持范围或效果数据,暂未提供。使用需遵循其输出契约与默认不加载交互库等规则。