Skill

Design Buddy:让 AI 不只是生成图片,而是真正帮你把内容变成设计

你想做的下一张图,何必从空白画布开始? 过去我们使用 AI 做视觉内容时,经常会遇到一个问题: 模型会画图,但 […]

文章目录

你想做的下一张图,何必从空白画布开始?

过去我们使用 AI 做视觉内容时,经常会遇到一个问题:

模型会画图,但它并不知道“为什么要画这张图”。

你给它一段文章,它可能生成一张漂亮的插画;你让它画一个产品流程,它也许能给你一张看起来像流程图的图片。

但真正进入内容生产场景后,我们需要的往往不是“随机生成一张好看的图片”。

而是:

  • 这篇文章究竟应该配什么类型的图?
  • 一段复杂的产品逻辑应该用流程图、架构图还是用户旅程图?
  • 一篇文章如何拆成 6 页小红书内容?
  • 一份 Markdown 如何直接变成一套 PPT?
  • 一个故事应该如何拆成连续的分镜?
  • 一个品牌应该从哪些视觉方向开始探索?
  • 生成出来的内容,最终怎样真正交付,而不是停留在一张图片上?

GitHub 上的 Design Buddy,尝试解决的正是这一层问题。

SpaceZephyr/design-buddy

它不是一个单独的 AI 绘图工具,而是一套面向内容创作者、产品经理、独立开发者和设计协作者的 Agent Skills 视觉生产工具箱


一、从“AI 画图”走向“AI 设计”

Design Buddy 最值得关注的地方,并不是它能调用多少模型,而是它改变了一个工作流程:

从“告诉 AI 画什么”,变成“让 AI 先理解内容,再决定应该怎么表达”。

例如,你告诉它:

给这篇文章做一张公众号封面。

理想情况下,它不应该马上开始生成图片,而应该先理解文章主题,然后判断视觉方向。

README 中给出的示例是:

AI 生产力系统 / 上下文管理 / 个人工作流

然后进一步给出不同的设计方向:

  • conceptual + warm editorial
  • blueprint + technical schematic
  • flat-vector + high contrast

最后才确定:

16:9 封面 + 标题可读区域。

这个过程其实非常重要。

因为真正的设计工作,从来不是“画一张图”这么简单。

设计首先是信息判断


二、Design Buddy 到底是什么?

从项目结构来看,Design Buddy 是由多个独立 Skill 组成的视觉生产体系。

目前仓库包含了从图片生成、图表、品牌设计,到幻灯片、公众号排版、故事板等多个方向的 Skill。

例如:

Skill 主要用途 输出
space-gemini-image Gemini 文生图、图生图 图片
space-logo-generator Logo 方向探索 Logo 图片
space-chart-html 流程图、架构图、ER 图等 HTML
space-chart-html-plus 更复杂的信息图表 HTML
space-architecture-diagram 系统架构、部署拓扑 HTML / SVG
space-text-logic-diagram 文章逻辑可视化 HTML / SVG
space-mermaid-diagram 文本转 Mermaid 图 Mermaid
space-slide-deck Markdown 转幻灯片 PNG / PPTX / PDF
space-wechat-layout 公众号文章排版 HTML
space-storyboard-generator 故事分镜与故事板 分镜表 + 图片
space-markdown-poster Markdown 转分享海报 PNG
space-generative-art p5.js 生成艺术 HTML / JS
space-image-skill-builder 创建自定义生图 Skill Skill

也就是说,它更像一个:

“内容 → 视觉表达 → 交付物”的 AI 设计流水线。


三、它真正解决的是“选择什么视觉形式”

很多 AI 视觉工具的工作方式是:

Prompt → Image

Design Buddy 更接近:

Content → Understanding → Visual Decision → Generation → Delivery

项目 README 把这个过程拆成了四层。

第一层:内容理解

先读取用户提供的:

  • 文章
  • 产品需求
  • 故事
  • 数据
  • 产品逻辑
  • 品牌信息

然后判断:

这段内容到底想表达什么?


第二层:视觉决策

接下来决定:

  • 是图片还是图表?
  • 是流程图还是架构图?
  • 是概念插画还是场景图?
  • 应该使用什么比例?
  • 信息密度应该多高?
  • 是否需要遵循某个品牌设计系统?
  • 最终应该输出 HTML、SVG、PNG 还是 PPT?

这一步实际上才是“设计”。


第三层:资产生成

确定视觉结构后,再调用不同的工具生成内容。

项目支持的路线非常多,例如:

  • 图像模型
  • GPT-image-2
  • Gemini
  • HTML / SVG
  • Mermaid
  • p5.js
  • PPTX
  • PDF
  • 公众号 HTML 模板

所以它并没有把“所有问题都交给一个图像模型”。


第四层:交付整理

最后才是:

把生成结果变成真正可以使用的文件。

例如:

一篇 Markdown

文章分析

生成配图

插入文章

得到新的文章

或者:

Markdown

生成 PPT 大纲

生成逐页视觉方案

批量生成页面

PPTX / PDF

这也是 Design Buddy 和普通 AI 生图 Prompt 最大的区别之一。


四、最有意思的几个使用场景

1. 给文章自动配图

假设你写了一篇 5000 字的文章。

传统方式可能是:

  1. 找文章配图
  2. 搜索图片
  3. 下载
  4. 修改尺寸
  5. 插入文章
  6. 发现图片和内容并不匹配
  7. 重新找

Design Buddy 的思路则是:

让 AI 先理解文章,再决定每个位置应该出现什么视觉内容。

比如:

  • 开头使用概念图
  • 中间使用流程图
  • 某一段使用对比图
  • 某个复杂概念使用逻辑图
  • 最后使用总结视觉

这实际上把“找配图”升级成了“内容可视化”。


五、把复杂产品逻辑画出来

这是 Design Buddy 很适合产品经理和技术团队的场景。

例如你告诉 AI:

把这个系统画成架构图。

它并不是只能输出一张普通示意图。

项目提供了:

space-architecture-diagram

以及:

space-chart-html

space-chart-html-plus

space-text-logic-diagram

space-mermaid-diagram

等不同工具。

因此,一个复杂系统可以根据关系类型选择不同表达方式:

  • 系统架构图
  • 部署图
  • 网络拓扑
  • 数据流
  • 用户旅程
  • 流程图
  • 路线图
  • SWOT
  • ER 图
  • Mermaid 图
  • 逻辑关系图

这背后的思想其实非常朴素:

不同的信息结构,应该使用不同的视觉结构。


六、把一篇文章变成小红书多页图

另一个非常实际的场景,是社交媒体内容生产。

例如:

把这篇文章拆成小红书 6 页图。

Design Buddy 可以按照内容结构进行拆解:

  1. 封面:一句话钩子
  2. 痛点:为什么普通提示词不够
  3. 框架:核心方法
  4. 案例:具体怎么使用
  5. 清单:执行步骤
  6. 结尾:行动或保存引导

这里最关键的并不是“生成六张图片”。

而是:

先把长内容重新组织成适合移动端阅读的内容结构。

这已经从图片生成进入了内容编辑和视觉编排。


七、Markdown 直接变 PPT

对于开发者、产品经理和内容创作者来说,这可能是最省时间的能力之一。

你可以直接提出:

把这份 Markdown 做成 12 页 PPT。

Design Buddy 的 space-slide-deck 会围绕:

内容大纲 → 页面结构 → 设计系统 → 单页视觉 → PPTX / PDF

进行处理。

项目还支持从多个品牌设计系统中寻找视觉参考,再用于生成幻灯片。

这意味着:

Markdown 不再只是最终交给读者的文本,也可以成为视觉生产的源文件。

你甚至可以把:

一篇文章

直接转换成:

文章 → 信息图 → 幻灯片 → PDF → 分享海报

形成一整套内容资产。


八、公众号排版也被纳入了工作流

很多 AI 工具可以生成文章,却停在 Markdown。

真正发布时还要面对:

  • 标题
  • 小标题
  • 段落
  • 图片
  • 引用
  • 强调
  • 间距
  • HTML
  • 编辑器兼容性

Design Buddy 提供了:

space-wechat-layout

目标就是把文章进一步转换成适合微信公众号发布的排版页面,并提供可复制的富 HTML。

因此它关注的不只是:

“内容有没有生成出来?”

而是:

“内容能不能直接进入发布流程?”


九、它甚至覆盖了 Logo 和品牌设计

如果只是文章配图,这个项目其实并不算特别特别新。

更有意思的是,它把品牌设计也纳入了整个 Skill 体系。

例如:

space-logo-generator

可以用于批量探索 Logo 方向。

而:

space-brand-ui-design

则尝试结合公开的品牌设计规范,为 UI 生成提供更加明确的视觉约束。

这背后的逻辑依然是:

不只是“生成一个漂亮页面”,而是先建立设计语言,再生成页面。

对于独立开发者尤其有价值。

过去做一个产品,可能需要分别解决:

  • Logo
  • 品牌色
  • Landing Page
  • 产品 UI
  • 社交媒体图片
  • PPT
  • 产品说明图

现在这些任务可以被统一到 Agent 的视觉 Skill 工作流里。


十、它和普通 Prompt 最大的区别

如果把普通 AI 绘图理解成:

“帮我画一张科技感的图片。”

那么结果很大程度取决于 Prompt。

而 Design Buddy 尝试把 Prompt 背后的决策过程结构化。

例如:

用户需求
   ↓
内容理解
   ↓
判断视觉类型
   ↓
确定比例
   ↓
选择风格
   ↓
选择生成工具
   ↓
生成
   ↓
检查 / 修改
   ↓
输出最终文件

这其实体现了一个值得关注的趋势:

未来 AI Agent 的竞争,不一定只是模型能力的竞争,也可能是 Skill 和工作流的竞争。

模型负责“生成能力”。

Skill 负责:

什么时候用、怎么用、输出什么、如何交付。


十一、如何安装?

Design Buddy 基于 Agent Skills 协议,可以在多个兼容的 AI Agent 环境中使用。

项目 README 给出的推荐方式是:

npx skills add SpaceZephyr/design-buddy

也可以直接让支持 Skill 的 Agent 安装:

帮我安装这个 skill:
https://github.com/SpaceZephyr/design-buddy

项目 README 列出的兼容环境包括 Claude Code、Codex、Cursor、OpenClaw、Hermes、Gemini CLI、OpenCode 等。

如果不使用自动安装,也可以直接克隆仓库:

git clone https://github.com/SpaceZephyr/design-buddy.git

然后根据自己的 Agent 环境加载需要的 Skill。


十二、真正使用时,可以非常自然

安装之后,不一定需要学习复杂命令。

很多时候直接说人话就可以:

给这篇文章生成一张封面图

或者:

把这个系统画成架构图
把这篇文章拆成小红书 6 页图
帮我设计 10 个 Logo 方向
把这份 Markdown 转成 12 页 PPT
把这篇文章排成公众号格式

甚至可以明确指定某一个 Skill:

用 space-image-studio 做一张小红书封面

这种交互方式很符合 Agent 的使用习惯:

用户描述目标,Agent 负责决定调用哪个能力。


十三、但它并不是“AI 设计师替代品”

这一点其实是这个项目 README 中比较值得肯定的部分。

Design Buddy 明确说明了自己的边界。

比如:

AI 不一定能一次生成完美图片

文字、复杂结构、中文排版、人物细节等仍然可能出现问题。

图表不等于事实

如果输入的数据或者逻辑是错的,AI 完全可能把错误的信息制作成一张非常漂亮的图。

所以:

视觉质量不能证明信息正确。

Logo 不等于商标注册成功

AI 可以帮你探索 Logo 方向,但商标近似查询、行业冲突和法律可用性仍然需要独立处理。

品牌风