跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
编程语言Node.jsPPT制作AI

baoyu-skills:利用 AI 自动生成技术文章配图与排版

baoyu-skills 是一套基于 AI 的技能工具集,旨在解决技术文档配图难、排版累及风格不统一的问题。通过封装 Prompt 工程,用户只需指定参数即可调用绘图模型生成封面、信息图或 PPT。支持 Claude Code、Trae 等 MCP/Skill 兼容工具,安装依赖 Node.js 环境。核心功能包括小红书风格卡片、流程图、博客封面及漫画生成,将自然语言交互转化为确定性命令行操作,提升内容生产效率。

LinuxPan发布于 2026/4/5更新于 2026/10/3199 浏览
baoyu-skills:利用 AI 自动生成技术文章配图与排版

1 让 AI 帮你搞定技术文章配图与排版

1.1 一句话结论

如果你在用 Claude Code、Trae 或者其他支持 MCP/Skill 的 AI 编程工具,baoyu-skills 绝对值得装一个。它不仅仅是一堆工具,更像是把Prompt 工程的最佳实践给包好了,能把'写文章 - 配图 - 做 PPT'这套麻烦事变成几行命令。关键是审美在线,出来的图能拿得出手。

在这里插入图片描述

1.2 背景与痛点

技术人员在撰写文档时常遇到以下问题:

  1. 配图难:代码写得飞起,但要画个架构图、流程图,或者给文章配个封面,立马抓瞎。找网图怕侵权,自己画又像小学生涂鸦。
  2. 排版累:要把一篇技术干货改成社交媒体风格、或者做成 PPT 分享,光是调整格式和精简文字就能耗掉半天。
  3. AI 生成不稳定:用 Midjourney 或 DALL-E 生图,提示词得调半天,生成的风格还经常不统一,今天赛博朋克,明天就变成了卡通简笔画。

在这里插入图片描述

开源作者开发的这套 Skills,正好解决了这些问题。它把那些让人头大的 Prompt 调试过程都封装成了标准化的参数,你只管调参数,'审美'的事交给它。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

1.3 核心观点

  • Prompt 工程的'配置化':这套 Skills 最牛的地方不在于功能多,而是它把视觉风格做成了可选项。比如生成插图,它让你直接选 Layout(布局)和 Style(风格)。这样选出来的结果,比自己瞎写提示词稳定多了。
  • 内容即数据:它直接读取你的 Markdown 文章,自动提取关键信息生成 PPT 或图表,不用你再把内容重新喂一遍。

输入 -> 调用 -> 分析内容 -> 指定参数 -> 调用绘图模型 -> 你的 Markdown 草稿 -> Claude Code / Trae -> baoyu-skills -> 自动推荐风格 & 布局 -> 强制指定 Style/Layout -> 生成 Prompt -> 最终产出 (封面图 / 信息图 / PPT / 漫画)

在这里插入图片描述

2 怎么落地:核心能力拆解

2.1 技能全景图:你手里的武器库

这套 Skills 里工具不少,整理了个速查表,方便查找:

Skill 名称适用场景核心卖点常用命令示例
baoyu-xhs-images小红书运营、知识卡片风格×布局二维选择,一键出多张图/baoyu-xhs-images post.md --style notion
baoyu-infographic技术原理讲解、流程图20 种布局 +17 种风格,专治各种复杂概念/baoyu-infographic arch.md --layout pyramid
baoyu-cover-image博客/公众号封面5 个维度定制(类型/配色/渲染/文字/氛围)/baoyu-cover-image blog.md --quick
baoyu-slide-deck技术分享、汇报自动生成大纲,直接出 PPTX/PDF/baoyu-slide-deck talk.md --style blueprint
baoyu-comic讲故事、寓教于乐知识漫画创作,还能控制分镜/baoyu-comic story.md --art manga

在这里插入图片描述

2.2 安装与配置

安装很简单,只要你有 Node.js 环境就行。

推荐方式(快速安装):

# 一行命令搞定 npx skills add jimliu/baoyu-skills 

在 Agent 中使用: 如果你在 Trae 或 Claude Code 对话框里,也可以直接跟它说:

'请帮我安装 github.com/JimLiu/baoyu-skills 中的 Skills'

3 设计理念

3.1 提示词工程的终局是'消失'

以前我们总在学'怎么写好 Prompt',比如'你是一个资深设计师,请用…风格…'。但用过 baoyu-skills 后你会发现,我们其实不需要成为 Prompt 专家。
这套 Skills 内部维护了复杂的 Prompt 模板,但给用户的只有 --style notion 或 --layout timeline 这样简单的参数。
说白了: 未来的 AI 工具,界面会越来越像传统的命令行工具(CLI),参数清晰明确,而把那些'模糊的自然语言交互'藏在后面。这也解释了为什么程序员用这套工具会觉得特别顺手——因为它符合我们对'确定性'的追求。

在这里插入图片描述

4 案例分享:从枯燥文档到社交媒体风格

假设你写了一篇关于'AI 时代程序员如何进化'的硬核文章,想发社交媒体。

4.1 案例实操

  • 目标:把一篇 2000 字的 Markdown 文章,用 baoyu-xhs-images 转成 4 张社交媒体风格的配图。
  • 准备:
    • 文章路径:./ai-evolution.md
    • 已安装 baoyu-skills
  • 步骤:
    1. 打开终端或对话框。
    2. 等待 Agent 分析文章,提取金句和要点。
    3. Agent 会自动调用绘图工具(如 DALL-E 3 或 SVG 生成器)生成图片。
  • 产出:
    • 目录里会生成几张图片。
    • 这些图片不只是罗列文字,而是排版精美的知识卡片,一眼就能看进去。

输入命令:

/baoyu-xhs-images ./ai-evolution.md --style notion --layout dense 

这里选了 notion 风格(干净、黑白线条)和 dense 布局(适合干货知识点)。

5 可复用的 Skill 片段示例

如果你也想写一个类似的 Skill,让 AI 帮你生成特定风格的内容,可以参考下面这个简化版的 Skill 定义。这是从 baoyu-skills 的设计理念中提炼出来的精华。

name: style-generator-lite
description: 一个轻量级的风格化内容生成器示例,展示如何封装 Prompt。
input_format:|
  内容:{text}
  风格:{style} (可选:tech/hand-drawn, 默认:tech)
steps:
  - step: analyze_content
    description: 分析输入文本,提取 3 个核心关键词和 1 个主旨句。
  - step: construct_prompt
    description: >
      根据风格构建绘图 Prompt:
      - if style == 'tech': use "blueprint style, isometric view, blue and white"
      - if style == 'hand-drawn': use "pencil sketch on paper, rough lines"
  - step: generate
    description: 调用绘图工具生成图片。
output_format:|
  ![生成的图片](image_url)
  **关键词**:Keywords

6 参考资料

  • baoyu-skills GitHub 仓库 - 官方源码与详细文档

目录

  1. 1 让 AI 帮你搞定技术文章配图与排版
  2. 1.1 一句话结论
  3. 1.2 背景与痛点
  4. 1.3 核心观点
  5. 2 怎么落地:核心能力拆解
  6. 2.1 技能全景图:你手里的武器库
  7. 2.2 安装与配置
  8. 一行命令搞定 npx skills add jimliu/baoyu-skills
  9. 3 设计理念
  10. 3.1 提示词工程的终局是“消失”
  11. 4 案例分享:从枯燥文档到社交媒体风格
  12. 4.1 案例实操
  13. 5 可复用的 Skill 片段示例
  14. 6 参考资料

更多推荐文章

查看全部
  • 电科金仓发布融合数据库 KES V9,探索 AI 时代新形态
  • XGBoost 机器学习从入门到实战指南
  • 无线联邦学习:隐私保护下的 AI 协同进化
  • OpenClaw「龙虾」从 0 到 1 安装、QQ 机器人接入及运维指南
  • 使用剪映专业版 AI 对口型制作真人演唱视频
  • 实测 Gemini Pro:谷歌多模态 AI 的实际应用能力
  • ROS2+Gazebo+PX4 环境搭建与无人机起飞实战
  • AI 幻觉深度解析:成因、风险与应对策略
  • 谷歌 TurboQuant 算法:内存占用减少至少 6 倍
  • 文心一言:从入门到精通的完整指南
  • KWDB 3.1.0 在 Ubuntu 22.04 部署实战:TLS 配置与性能测试
  • WindowsCleaner v5.0:基于 Python 的桌面磁盘清理工具
  • TRAE Skills 全解析:从概念到实践
  • DVC 实战指南:像 Git 一样管理数据和模型
  • Claude Code 安装使用与配置教程
  • RISC-V开源处理器实战:从Verilog RTL设计到FPGA原型验证
  • 机器人系统 SLAM 技术详解
  • 《Agent Runtime 工程化》第五章 上下文工程
  • Nuxt 4 + WebAssembly 实战:从零搭建浏览器端图片压缩工具
  • 基于 ClaudeCode 与 Figma-MCP 的 UI 设计前端还原方案

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online

  • Markdown转HTML

    将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online