Skill

Design Buddy: Let AI not just generate pictures, but really help you turn content into design

Why start with a blank canvas for the next picture you want to make? In the past, when we used AI to make visual content, we often encountered a problem: models could draw, but [...]

article directories

Why start with a blank canvas for the next picture you want to make?

In the past, when we used AI to make visual content, we often encountered a problem:

The model can draw pictures, but it does not know "why draw this picture".

You give it a paragraph of an article, and it may generate a beautiful illustration; you ask it to draw a product process, and it may give you a picture that looks like a flowchart.

But after really entering the content production scene, what we often need is not "randomly generated a good-looking picture."

Instead:

  • What type of pictures should this article be accompanied by?
  • Should a complex product logic use a flow chart, architecture chart or user journey chart?
  • How to break an article into 6 pages of small red book content?
  • How can a Markdown directly turn into a set of PPT?
  • How should a story be broken down into continuous segments?
  • What visual directions should a brand start exploring?
  • How can the generated content be truly delivered instead of just one picture?

on GitHub Design BuddyIt is this level of problem that is trying to solve.

SpaceZephyr/design-buddy

It is not a separate AI drawing tool, but a set of tools for content creators, product managers, independent developers and design collaborators. Agent Skills Visual Production Toolkit。


1. From "AI drawing" to "AI design"

The most noteworthy thing about Design Buddy is not how many models it can call, but how it changes a workflow:

From "telling the AI what to draw" to "letting the AI understand the content first and then decide how to express it."

For example, you tell it:

Make a public account cover for this article.

Ideally, it should not start generating images immediately, but should first understand the topic of the article and then determine the visual direction.

The examples given in the README are:

AI productivity systems/context management/personal workflow

Then further give different design directions:

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

Finally, it was determined:

16:9 Cover + title readable area.

This process is actually very important.

Because real design work is never as simple as "drawing a picture".

Design is first and foremostinformation judgment。


2. What is Design Buddy?

From the perspective of project structure, Design Buddy is a visual production system composed of multiple independent skills.

Currently, the warehouse contains skills in multiple directions from image generation, charts, brand design, to slide shows, public account layout, storyboards, etc.

For example:

Skill main use output
space-gemini-image Gemini Wensheng pictures, graph pictures picture
space-logo-generator Explore the direction of Logo Logo pictures
space-chart-html Flowcharts, architecture charts, ER charts, etc. HTML
space-chart-html-plus More complex infographics HTML
space-architecture-diagram System architecture, deployment topology HTML / SVG
space-text-logic-diagram Article logical visualization HTML / SVG
space-mermaid-diagram Text to Mermaid diagram Mermaid
space-slide-deck Markdown to slide show PNG / PPTX / PDF
space-wechat-layout Public account article typesetting HTML
space-storyboard-generator Storyboard and storyboard Mirror split table + picture
space-markdown-poster Markdown to share poster PNG
space-generative-art p5.js generation art HTML / JS
space-image-skill-builder Create a custom drawing Skill Skill

In other words, it is more like a:

AI design assembly line for "content → visual expression → deliverable".


3. What it really solves is "what visual form to choose"

Many AI vision tools work like:

Prompt → Image

Design Buddy is closer:

Content → Understanding → Visual Decision → Generation → Delivery

Project README breaks down the process into four layers.

Level 1: Content understanding

First read the user provided:

  • article
  • product demand
  • story
  • data
  • product logic
  • brand information

Then judge:

What exactly does this paragraph want to express?


Level 2: Visual decision-making

The next decision was:

  • Is it a picture or a chart?
  • Is it a flowchart or an architecture diagram?
  • Is it a concept illustration or a scene diagram?
  • What ratio should be used?
  • How high should the information density be?
  • Do I need to follow a brand design system?
  • Should I ultimately output HTML, SVG, PNG or PPT?

This step is actually "design".


Level 3: Asset generation

After the visual structure is determined, different tools are called to generate content.

There are many routes supported by the project, such as:

  • image model
  • GPT-image-2
  • Gemini
  • HTML / SVG
  • Mermaid
  • p5.js
  • PPTX
  • PDF
  • Official account HTML template

So it doesn't leave "all problems to one image model."


Level 4: Delivery collation

Finally:

Turn the generated results into real usable files.

For example:

A Markdown
↓
this paper analyzes
↓
Generating drawings
↓
Insert article
↓
Get new articles

Or:

Markdown
↓
Generate PPT outline
↓
Generate page-by-page visual solutions
↓
Batch Generation Pages
↓
PPTX / PDF

This is also one of the biggest differences between Design Buddy and ordinary AI prompt.


4. The most interesting usage scenarios

1. Automatically map articles

Suppose you write a 5000-word article.

The traditional approach may be:

  1. Find articles with pictures
  2. search images
  3. download
  4. Modify the size
  5. Insert article
  6. Found that the picture and content do not match
  7. re-find

Design Buddy's idea is:

Let the AI understand the article first and then decide what visual content should appear in each position.

For example:

  • Start with concept maps
  • Intermediate use flow chart
  • Comparison chart of usage of a certain paragraph
  • A complex concept uses a logic diagram
  • Finally use summary vision

This actually upgrades "finding and matching maps" to "content visualization".


5. Draw the logic of complex products

This is a scenario where Design Buddy is great for product managers and technical teams.

For example, you tell AI:

Draw the system into an architecture diagram.

It does not only output an ordinary schematic.

The project provides:

space-architecture-diagram

and:

space-chart-html

space-chart-html-plus

space-text-logic-diagram

space-mermaid-diagram

and other tools.

Therefore, a complex system can choose different expressions based on the type of relationship:

  • system architecture diagram
  • deployment diagram
  • network topology
  • data stream
  • user journey
  • flowchart
  • road map
  • SWOT
  • ER diagram
  • Mermaid diagram
  • logical diagram

The idea behind this is actually very simple:

Different information structures should use different visual structures.


6. Turn an article into a small red book with multiple pages

Another very practical scenario is social media content production.

For example:

Break this article down into six pages of pictures in a little red book.

Design Buddy can be disassembled according to the content structure:

  1. cover: One word hook
  2. pain points: Why are there not enough ordinary prompt words
  3. framework: Core method
  4. case: How to use it specifically
  5. list: Implementation steps
  6. end: Action or save guidance

The most critical thing here is not "generating six pictures".

Instead:

First reorganize the long content into a content structure suitable for mobile reading.

This has moved from image generation to content editing and visual choreography.


7. Markdown directly into PPT

This may be one of the most time-saving capabilities for developers, product managers and content creators.

You can directly ask:

Make this Markdown into a 12-page PPT.

Design Buddy space-slide-deck Will focus on:

Content outline → page structure → design system → single-page vision → PPTX / PDF

process it.

The project also supports finding visual references from multiple brand design systems and then using them to generate slides.

This means:

Markdown is no longer just text that is ultimately handed to readers, but can also become a source document for visual production.

You can even put:

an article

Convert directly to:

Article → Infographic → Slide → PDF → Share Poster

Form a set of content assets.


8. Public account typesetting has also been included in the workflow

Many AI tools can generate articles but stop at Markdown.

When you actually release it, you still have to face:

  • title
  • subhead
  • paragraphs
  • picture
  • reference
  • stressed
  • spacing
  • HTML
  • Editor compatibility

Design Buddy provides:

space-wechat-layout

The goal is to further convert the article into typesetting pages suitable for publishing on Weixin Official Accounts and provide replicable rich HTML.

So it focuses more than just on:

"Has the content been generated?"

Instead:

"Can content directly enter the publishing process?"


9. It even covers Logo and brand design

If it is just an article with pictures, this project is actually not particularly new.

What's even more interesting is that it incorporates brand design into the entire Skill system.

For example:

space-logo-generator

It can be used to explore Logo directions in batches.

And:

space-brand-ui-design

Try to combine public brand design specifications to provide clearer visual constraints for UI generation.

The logic behind this is still:

Instead of just "generating a beautiful page", you build a design language first and then generate a page.

It is especially valuable for independent developers.

In the past, when making a product, you might need to solve it separately:

  • Logo
  • brand color
  • Landing Page
  • product UI
  • social media pictures
  • PPT
  • Product description chart

These tasks can now be unified into the Agent's visual Skill workflow.


10. The biggest difference between it and ordinary Prompt

If ordinary AI drawing is understood as:

"Help me draw a picture with a sense of technology."

Then the result depends largely on Prompt.

Design Buddy tried to structure the decision-making process behind Prompt.

For example:

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

This actually reflects a trend worthy of attention:

The competition for AI Agents in the future is not necessarily just a competition for model capabilities, but may also be a competition for Skill and workflow.

The model is responsible for "generation capabilities".

Skill is responsible for:

When to use it, how to use it, what to export, and how to deliver it.


11. How to install it?

Design Buddy is based on the Agent Skills protocol and can be used in multiple compatible AI Agent environments.

The recommendation methods given by the project README are:

npx skills add SpaceZephyr/design-buddy

You can also directly install Agents that support Skill:

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

The compatible environments listed in the project README include Claude Code, Codex, Cursor, OpenClaw, Hermes, Gemini CLI, OpenCode, etc.

If you don't use automatic installation, you can also clone the warehouse directly:

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

Then load the required skills according to your Agent environment.


12. When actually used, it can be very natural

After installation, you don't necessarily need to learn complex commands.

Many times you can just speak the human language directly:

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

Or:

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

You can even explicitly specify a Skill:

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

This interaction method is very consistent with the usage habits of Agents:

The user describes the goal, and the Agent is responsible for deciding which capability to invoke.


13. But it is not an "AI designer substitute"

This is actually a more positive part of the README of this project.

Design Buddy clearly stated his boundaries.

For example:

AI may not be able to generate perfect pictures at once

Problems may still arise with text, complex structures, Chinese typesetting, character details, etc.

Charts are not facts

If the input data or logic is wrong, AI may make the wrong information into a very beautiful picture.

So:

Visual quality does not prove that the information is correct.

Logo does not mean successful Trademark Registering

AI can help you explore the direction of your Logo, but trademark proximity queries, industry conflicts and legal usability still need to be handled independently.

brand style