文章目录
- 1 让 AI 帮你搞定技术文章配图与排版
-
- 1.1. 一句话结论
- 1.2. 背景与痛点
- 1.3. 核心观点
- 2. 怎么落地：核心能力拆解
-
- 2.1. 技能全景图：你手里的武器库
- 2.2. 安装与配置
- 3. 奇葩但很真实的观点
-
- 3.1. 提示词工程的终局是“消失”
- 4. 案例分享：从枯燥文档到小红书爆款
-
- 4.1. 案例实操
- 5. 可复用的 Skill 片段示例
- 6. 参考文献
1 让 AI 帮你搞定技术文章配图与排版
1.1. 一句话结论
如果你在用 Claude Code、Trae 或者其他支持 MCP/Skill 的 AI 编程工具，baoyu-skills 绝对值得装一个。它不仅仅是一堆工具，更像是把Prompt 工程的最佳实践给包好了，能把“写文章-配图-做 PPT”这套麻烦事变成几行命令。关键是审美在线，出来的图能拿得出手。
1.2. 背景与痛点
咱们做技术的，写文章常遇到的三个坑：
宝玉（Baoyu）老师开源的这套 Skills，正好解决了这些问题。它把那些让人头大的 Prompt 调试过程都封装成了标准化的参数，你只管调参数，“审美”的事交给它。
1.3. 核心观点
- Prompt 工程的“配置化”：我觉得这套 Skills 最牛的地方不在于功能多，而是它把视觉风格做成了可选项。比如生成插图，它让你直接选 Layout（布局）和 Style（风格）。这样选出来的结果，比自己瞎写提示词稳定多了。
- 内容即数据：它直接读取你的 Markdown 文章，自动提取关键信息生成 PPT 或图表，不用你再把内容重新喂一遍。
#mermaid-svg-r8n24kGjtyqHaiNH{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-r8n24kGjtyqHaiNH .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-r8n24kGjtyqHaiNH .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-r8n24kGjtyqHaiNH .error-icon{fill:#552222;}#mermaid-svg-r8n24kGjtyqHaiNH .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-r8n24kGjtyqHaiNH .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-r8n24kGjtyqHaiNH .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-r8n24kGjtyqHaiNH .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-r8n24kGjtyqHaiNH .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-r8n24kGjtyqHaiNH .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-r8n24kGjtyqHaiNH .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-r8n24kGjtyqHaiNH .marker{fill:#333333;stroke:#333333;}#mermaid-svg-r8n24kGjtyqHaiNH .marker.cross{stroke:#333333;}#mermaid-svg-r8n24kGjtyqHaiNH svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-r8n24kGjtyqHaiNH p{margin:0;}#mermaid-svg-r8n24kGjtyqHaiNH .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-r8n24kGjtyqHaiNH .cluster-label text{fill:#333;}#mermaid-svg-r8n24kGjtyqHaiNH .cluster-label span{color:#333;}#mermaid-svg-r8n24kGjtyqHaiNH .cluster-label span p{background-color:transparent;}#mermaid-svg-r8n24kGjtyqHaiNH .label text,#mermaid-svg-r8n24kGjtyqHaiNH span{fill:#333;color:#333;}#mermaid-svg-r8n24kGjtyqHaiNH .node rect,#mermaid-svg-r8n24kGjtyqHaiNH .node circle,#mermaid-svg-r8n24kGjtyqHaiNH .node ellipse,#mermaid-svg-r8n24kGjtyqHaiNH .node polygon,#mermaid-svg-r8n24kGjtyqHaiNH .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-r8n24kGjtyqHaiNH .rough-node .label text,#mermaid-svg-r8n24kGjtyqHaiNH .node .label text,#mermaid-svg-r8n24kGjtyqHaiNH .image-shape .label,#mermaid-svg-r8n24kGjtyqHaiNH .icon-shape .label{text-anchor:middle;}#mermaid-svg-r8n24kGjtyqHaiNH .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-r8n24kGjtyqHaiNH .rough-node .label,#mermaid-svg-r8n24kGjtyqHaiNH .node .label,#mermaid-svg-r8n24kGjtyqHaiNH .image-shape .label,#mermaid-svg-r8n24kGjtyqHaiNH .icon-shape .label{text-align:center;}#mermaid-svg-r8n24kGjtyqHaiNH .node.clickable{cursor:pointer;}#mermaid-svg-r8n24kGjtyqHaiNH .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-r8n24kGjtyqHaiNH .arrowheadPath{fill:#333333;}#mermaid-svg-r8n24kGjtyqHaiNH .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-r8n24kGjtyqHaiNH .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-r8n24kGjtyqHaiNH .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-r8n24kGjtyqHaiNH .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-r8n24kGjtyqHaiNH .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-r8n24kGjtyqHaiNH .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-r8n24kGjtyqHaiNH .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-r8n24kGjtyqHaiNH .cluster text{fill:#333;}#mermaid-svg-r8n24kGjtyqHaiNH .cluster span{color:#333;}#mermaid-svg-r8n24kGjtyqHaiNH div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-r8n24kGjtyqHaiNH .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-r8n24kGjtyqHaiNH rect.text{fill:none;stroke-width:0;}#mermaid-svg-r8n24kGjtyqHaiNH .icon-shape,#mermaid-svg-r8n24kGjtyqHaiNH .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-r8n24kGjtyqHaiNH .icon-shape p,#mermaid-svg-r8n24kGjtyqHaiNH .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-r8n24kGjtyqHaiNH .icon-shape rect,#mermaid-svg-r8n24kGjtyqHaiNH .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-r8n24kGjtyqHaiNH .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-r8n24kGjtyqHaiNH .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-r8n24kGjtyqHaiNH :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}
输入
调用
分析内容
指定参数
调用绘图模型
你的 Markdown 草稿
Claude Code / Trae
baoyu-skills
自动推荐风格 & 布局
强制指定 Style/Layout
生成 Prompt
最终产出
封面图 / 信息图 / PPT / 漫画
2. 怎么落地：核心能力拆解
2.1. 技能全景图：你手里的武器库
这套 Skills 里工具不少，我整理了个速查表，方便你找：
| 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
- 步骤：
- 打开终端或对话框。
- 输入命令：/baoyu-xhs-images ./ai-evolution.md –style notion –layout dense
这里选了 notion 风格（干净、黑白线条）和 dense 布局（适合干货知识点）。 - 等待 Agent 分析文章，提取金句和要点。
- Agent 会自动调用绘图工具（如 DALL-E 3 或 SVG 生成器）生成图片。
- 产出：
- 目录里会生成几张图片。
- 这些图片不只是罗列文字，而是排版精美的知识卡片，一眼就能看进去。
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: |
**关键词**：Keywords
6. 参考文献
- baoyu-skills GitHub 仓库 – 官方源码与详细文档
- 宝玉的 X (Twitter) – 关注宝玉老师获取最新 AI 见解
