博然精选 设计与视频内容与知识
文章配图：Atlasnote 风纯色 SVG 封面
使用这技能的好处
写完 MD 即可自动产出贴题封面 SVG，列表与详情图位一次对齐。
技能摘要
文章配图是博然AI笔记为 AI 笔记正文生成封面 SVG 的核心 Agent Skill。它要求编码代理从文章 title、description 与正文主题提炼海报化 2～3 行大标题与一行副标，按固定 1600×900 构图输出纯色底 + 点阵 + 左文右示意图的 SVG，写入 public/images/articles/{slug}.svg，并在 frontmatter 设置 coverImage 站点根路径。品牌文案统一为 BORAN / AI NOTES，每篇独立色板与贴题示意图，避免摄影糊弄、长标题溢出与篇篇同一 icon。对内容编辑与站点运营，它把「缺封面」升级为可重复验收的配图流水线，直接服务 /blogs/ 左文右图卡片与详情 Hero。主要读者包括内容编辑、前端工程师、站点运营。该技能以本站仓库内 SKILL.md 维护，归入「设计与视频、内容与知识」，强调可验收、可复用的 Agent 工作流。请结合本页步骤在真实任务中验证后再固化到团队约定。
博然AI · Skill 文章配图：Atlasnote 风纯色 SVG 封面
适合谁
- 内容编辑
- 前端工程师
- 站点运营
- 独立开发者
- 品牌站改版负责人
- UI 设计师
- 视觉设计师
- 全栈工程师
- 博客作者
- 技术写作者
- 增长运营
- 产品设计师
- 创意开发
- SEO 专员
- 内容编辑
- 前端工程师
- 站点运营
- 独立开发者
- 品牌站改版负责人
- UI 设计师
- 视觉设计师
- 全栈工程师
- 博客作者
- 技术写作者
- 增长运营
- 产品设计师
- 创意开发
- SEO 专员
这样用它
- 文章 MD 写完后对 Agent 说「用文章配图 Skill」或「生成 coverImage / SVG 封面」，并给出文件路径。
- 要求输出 public/images/articles/{slug}.svg，且 frontmatter 写入 coverImage: /images/articles/{slug}.svg。
- 抽检：画布 1600×900、左文右示意、BORAN / AI NOTES 品牌、每篇底色不重复近邻文、右侧示意图贴合主题。
- 在 /blogs/ 列表卡片与详情 Hero 右侧确认封面可见；暗色模式下纯色底仍清晰。
- 禁止用摄影 PNG 代替 SVG；禁止 coverImage 写成磁盘相对路径。
- 批量可用 scripts/generate-article-covers.mjs 脚手架，但仍须按 Skill 人工抽查文案与示意图。
安装与来源
- 本技能为博然站点自维护内容，源文件位于仓库 .agents/skills/generate-article-cover/，随站点实践迭代，本页不提供第三方外链。
- 在 Cursor 或 Claude Code 中加载对应 Skill 目录后，使用本页「这样用它」中的触发语调用。
- 更新站点栏目或规范后，应同步修订 Skill 正文，保证 Agent 读取到的约束与线上流程一致。
- 验收时核对输出是否符合 Skill 内的硬性规则（画布尺寸、路径、品牌文案、色板轮换等），不满足则要求返工。
- 该技能仅服务本站内容与工程流程，不作为对外开源分发包；引用时请注明博然AI笔记。
本技能为博然站点自维护内容，详情见上方安装步骤；本页不提供外部仓库链接。