Extract articles/knowledge materials, and convert them into Xiaohongshu pictures with two keys

author：Everybody is a product manager 2024-05-03 20:43:00

Now that the power of AI has become more and more powerful, we can improve a lot of work efficiency through AI. Just a few days ago, I made a demo of the process of turning long articles into Xiaohongshu cards almost "in one go" and shared them with you.

Extract articles/knowledge materials, and convert them into Xiaohongshu pictures with two keys

I have posted two tutorials that use AI to turn long articles into picture notes in Xiaohongshu❶, and many friends have reported that "it is really easy to use, but it is not fast enough".

The first requires a third-party paid API, and the other requires an export CSV plus a third-party tool.

A few days ago, in order to demonstrate the workflow tool to the students of the action camp, I made a process demo that almost "did it in one go" and turned a long article into a Xiaohongshu card, and shared it with everyone.

First, the effect display

The overall workflow is as follows: long articles/knowledge documents are sent to AI—> AI refines the article into structured information as required—> converts the structured information into Xiaohongshu cards.

Considering the information extracted by AI, we definitely need to change it, so this workflow is split into two steps: 1) let the AI refine and summarize first, and manually correct the content refined by AI, and 2) turn the structured information into Xiaohongshu images.

The following is a demo of converting structured information into Xiaohongshu cards (the style can be adjusted according to your own aesthetics)

Let's share the specific implementation process step by step.

Second, the implementation process

The entire implementation process is done with the assistance of AI, and you can use Kimi, Conch, or Yuewen to reproduce.

If you are too lazy to do it step by step, you can get a direct way to experience the demo at the end of this article.

# Step 1: Turn the article into structured information

To ensure that the process of converting into Xiaohongshu images is more controllable, we must ask the AI to output the long articles or knowledge materials in a predetermined format when helping us refine them, so we must clearly describe them to the AI in the prompts.

The structure of the Xiaohongshu card I want to make next is "the cover contains the title and summary", "the second chapter picture is the title and knowledge summary", and "the third ~N detailed content picture is the title and 3~5 key knowledge points"

Here's what it looks like:

Little Red Book image structure

Here's what I asked Kimi to help me summarize the article, and I used JSON format to make sure the AI followed the instructions strictly:

You can ask the AI to output the corresponding structure according to your desired image structure and style, and adjust the structure in the prompt words.

Step 2: Turn the AI-refined content into Xiaohongshu cards

There's a structured content and it's easy to organize it into images.

These are all mature technologies, and I know at least two of them: 1) make a web page and turn it into an image, and 2) write the text directly to the specified position of the image.

The tool shared in this article before used method 2), and today we use method 1) to achieve it.

Let the AI write a web page to help us do it:

There is an input box on the page, and below it is a button, click it to convert the content summarized by the AI for us into a web page
Below the button is a preview area, showing the converted style, and the preview is okay to convert the web page into a picture and save it
Tell the AI where you provide each part of the text to be placed on the page
If you're interested, let AI help you beautify and beautify the page style

Here's a webpage that AI wrote for me in the first version, and it's simple but it's a perfect one-step implementation.

Initial page style

Then I asked the AI to do some beautification with Tailwind, and the style looked a little more advanced.

Beautified operation page

The specific requirements for AI to write this tool's prompt words are super long, no longer posted here, and the way to receive it is at the end of the article.

To convert a web page into an image, I used an open source project called html2canvas, and I sent the sample code used by this tool directly to the AI and it would write it.

Tell the AI how to use html2canvas

Step 3: Beautify AI-generated cards or upgrades

For the style beautification of the generated picture, this will vary from person to person, so I will not repeat it.

If you are confident enough in the prompt words you wrote, you can use the first step to let the AI refine the article or knowledge materials into a structured process called the API interface, and merge the returned content directly with the second step.

After the merger, it will look like this:

3. Let's learn AI

In the previous implementation process, I only need to provide ideas, and the rest is implemented by AI.

And all the problems encountered in the adjustment process can be solved by asking AI to help you.

Ask the AI how to underline

The AI is so powerful that it can implement almost all of your ideas!

Here are three ways to help you learn and use AI well:

1) AI Learning Action Circle

Contain:

Knowledge Planet, 365 days a year, shares AI reports, news, practical applications, and AI tools every day;
An exchange circle of 2400+ people, an exchange group of industry leaders who practice and start businesses on the front line of AI;
AIGC efficiency improvement knowledge base, precipitating dozens of commonly used AI tools, prompt word frameworks, in-depth research reports and practical articles;

2) AI practical series live open classes

Multi-scenario, multi-business, multi-position, multi-tool live demonstration, Monday to Thursday every night from 19:30-21:30.

3) AI Reshaping Workplace Competitiveness Action Camp