Back to the collection
baoyu-xhs-images·Design & creativity

baoyu-xhs-images: turn a tutorial into a coherent image-card sequence

On this page

Use baoyu-xhs-images to adapt an article into social image cards, knowledge lists, or step-by-step tutorials. The emphasis is the reading sequence: an opening problem, useful middle cards, and a clear ending, rather than repeating the same paragraph across several posters.

Install and invoke

Run this in your project terminal to install only this skill for Claude Code:

Command
npx skills add jimliu/baoyu-skills --skill baoyu-xhs-images -a claude-code

Node.js and npx must be available. For Codex, replace -a claude-code with -a codex. In the agent conversation, explicitly ask it to use baoyu-xhs-images and supply your material. The installation command belongs in the terminal, not in your content brief.

Request the page outline first

Supply the full source, intended audience, and what readers should be able to do afterward. Begin with a small sequence instead of forcing every paragraph into the maximum page count.

Example brief:

Prompt
Use baoyu-xhs-images to create five tutorial cards from tutorial.md.
Readers are handling a first design handoff. Prioritize clear information.
Use the hand-drawn-edu preset with one palette. Show every page's title, points, and reading order first.
Keep all steps grounded in the source and do not invent a personal success story. After outline approval, generate the first image for inspection.

The skill offers story-driven, information-dense, and visual-first strategies. A tutorial needs accurate steps and conditions, while a personal narrative needs actual experience. --preset combines style and layout; --style, --layout, and --palette allow separate adjustments.

Establish a sound first-image anchor

Initial setup handles the skill's EXTEND.md preferences. The confirmed workflow saves outline.md and a prompt for every card. Rendering requires an available backend. A separate API route can use configured baoyu-image-gen; its Google path uses GOOGLE_API_KEY. The reference chain also requires reference-image support.

Generate the cover first and inspect lettering, palette, and recurring subjects. Use the approved image to guide subsequent cards. Generating the entire set before checking the anchor can propagate an unwanted style. User references normally influence the first image, while later cards follow the common anchor rather than accumulating conflicting references.

The current output folder is image-cards/topic/, containing analysis, outlines, prompts/, and numbered PNGs; older tutorials may show another folder name. The cover introduces the subject, each middle page performs a specific information task, and the ending supplies a recap or appropriate next step. Inspect order, numbering, duplication, and missing steps, then read all small text at phone size.

When one card fails, update its prompt and regenerate that item while preserving correct files. Generating cards is separate from publishing, and neither style nor format guarantees likes or traffic. Decide whether to use the result based on factual accuracy and coherent reading, not resemblance to a popular post.

Break a tutorial into five cards that still make sense

For a guide to setting up a project's release flow, card one can state the outcome, card two the prerequisites, cards three and four the action and verification, and card five common failures plus the next step. Give each card a one-sentence point and the source wording it needs. Do not squeeze a whole procedure into tiny image text. Generate the first card to check style, title, and character continuity, then make the other four in batches. --batch-size controls generation pace; it does not guarantee information accuracy.

Swipe through the finished series in order. Check that terms are consistent between cards, no step disappears, and the last card gives readers a real next action. If card four is wrong, edit its prompt and regenerate that card alone. Use only visual material you can reuse; do not present someone else's engagement or results as your own. Generated cards are assets, so inspect crop and small text in the actual publishing interface before use.

Prompts are not finished images

For a first card set, draft the outline and per-card prompts, then render only the cover as a backend check. In one restaurant braised-ribs task, the outline and six prompts were saved, but the cover image service returned 403 before an image was produced. Prompt count is not image count. Keep the prompts, check image-provider permission and quota, and if switching APIs, render one cover to confirm access and style before processing the series. Finally inspect text, images, sequence, and visual consistency card by card.

How did your first task go?

These choices help us understand where readers get stuck through site analytics. Blocking analytics may prevent delivery; use email for a specific issue.

References

  1. baoyu-xhs-images: official workflowBaoyu (Jim Liu)
  2. Repository installation and configurationBaoyu (Jim Liu)
  3. Skills CLI: select a skill and target agentVercel Labs
  4. Configuration for the optional image backendBaoyu (Jim Liu)
  5. Gemini API credentials and environment variablesGoogle AI for Developers
  6. baoyu-xhs-images报错Chnnnne
Found outdated or incorrect information? Let us know

Keep exploring

More skills worth getting to know.