用途：在页面中复现 OpenAI 文章所使用的两种图：柱状图（单系列或分组）与流程/过程图，产物为自包含 HTML/SVG，不依赖 Vega、D3、Mermaid，也不需要构建步骤。
设计系统：使用 OpenAI 公开 CDN 上的 OpenAI Sans 字体、近黑色 #0d0d0d 与粉色强调色；完整调色板（6 色 × 5 深浅）与令牌规则见 references/design-spec.md。
柱状图：加载零依赖的 assets/openai-chart.js，调用 renderOpenAIBarChart("#chart", {...})，由数据规格绘制到 <svg>。常用字段有 categories（可用 \n 换行）、series[]（含 name、values[]，可覆盖 fill/stroke）、title、yAxisTitle、valueFormat（默认 percent，值为小数如 0.144 → 14.4%）、yMax、yTickStep/yTicks、width/height、bottomMargin、legend:false、palette。样式固定为同色系柱加深色描边、圆角矩形、黑色 Y 轴带刻度无网格线、圆点图例左对齐、柱顶数值标签、分类标签 −45°。颜色自动分配，通常只需名称与数值。assets/chart-example.html 为参考复刻。
流程图：需手工排布，技能只给原语与外观。引入 assets/openai-figure.css，外层用 <div class="oai-figure">，添加一次箭头 marker，再用 .box / .subbox / .pill / .conn 组合；可从 assets/flow-example.html 起步。细节见 references/flow-diagram.md：开放式 V 形箭头、圆角连接线走法、分栏布局等。要点为圆角框加 1.5px 黑色描边、等宽大写 pill（.pill.accent 实心粉、.pill.dotted 点状粉）、细 V 形连接线（不用实心三角）、转折圆角、负向/未发生分支用虚线轴。注意不要在 HTML 注释内写三连字符箭头，其中的 --> 会提前结束注释。
字体与离线：OpenAI Sans 从 cdn.openai.com 网络加载（CORS 开放）；需严格离线或打印时，下载四种字重并内联为 base64 @font-face，否则回退 Helvetica/Arial。pill 所用等宽字体不在公开 CDN，可用通用等宽近似。
验证：可无头渲染截图查看，注意留出字体加载时间，否则会截到回退字体。
限制：流程图不自动生成、需人工布局；缺失的收费、平台等信息资料未提供。