pw-image-generation

Original：🇨🇳 Chinese
Translated
6 scripts

AI Image Generation and Processing Workflow. Generate images via prompts, supporting text-to-image, image-to-image, batch generation, image hosting management, long image merging, and PPT packaging. The core feature is generating images with one-by-one confirmation to avoid wasting API credits.

11installs
Sourceplugins-world/pw-skills
Added on

NPX Install

npx skill4agent add plugins-world/pw-skills pw-image-generation

Tags

Translated version includes tags in frontmatter
ai-image-generationprompt-designimage-processingimage-hostingworkflow-automation

SKILL.md Content (Chinese)

View Translation Comparison →

Image-Generation - AI Image Generation Workflow

Core Concept: Analyze Style → Design Prompts → User Confirmation → Generate Images, Avoid Credit Wastage

Core Features

Image Generation:
  • Text-to-Image: Generate images based on text descriptions
  • Image-to-Image: Generate images with similar styles based on reference images
  • Batch Generation: Generate multiple images in batches using prompt templates
  • Consistent Style: Maintain unified visual style for a series of images
Image Processing:
  • Long Image Merging: Vertically stitch a series of images into a single long image
  • PPT Packaging: Package a series of images into a PPT file (one image per page)
  • Image Hosting Management: Upload images to hosting services and manage deletion links

Usage Scenarios

Applicable Scenarios:
  • Users explicitly request "generate images", "create illustrations", "make artwork"
  • Users provide text descriptions and need visual representation
  • Users provide reference images and request images with similar styles
  • Users need to create illustrations for articles, PPTs, or social media
  • Users need to batch generate a series of images with consistent style
  • Users need to merge multiple images into a long image or PPT
Inapplicable Scenarios:
  • Users only ask how to generate images (provide advice only)
  • Users need to edit existing images (use image editing tools)
  • Users need image recognition or analysis (use visual analysis tools)
  • Users need screenshots or screen recording (use system tools)

Workflow

Analyze Style → Design Prompts → Install Dependencies → Configure API → Confirm Generation → Save Images
    ↓          ↓           ↓         ↓         ↓         ↓
  Style Files  Prompt Files   node-fetch  secrets.md  One-by-One Confirmation  images/

Script Directory

All scripts are located in the 
~/.claude/skills/pw-image-generation/scripts/
directory.
Agent Execution Instructions:
  1. Determine the directory path of this SKILL.md file as 
    SKILL_DIR
  2. Script path = 
    ${SKILL_DIR}/scripts/<script-name>.ts
  3. Replace all 
    ${SKILL_DIR}
    in this document with the actual path
Available Scripts:
ScriptFunctionParameters
generate-image.ts
Generate images (with one-by-one confirmation)
[output directory]
upload-image.ts
Upload images to hosting service
<image path>
delete-image.ts
Manage hosted images
list|delete <index>|delete-all
merge-to-long-image.ts
Merge into long image
<image directory> <output file>
merge-to-pptx.ts
Package into PPT
<image directory> <output file>
analyze-image.ts
Analyze image style
<image URL or path>

Quick Start

Step 1: Create Project Directory

bash
mkdir my-image-project && cd my-image-project

Step 2: Copy Configuration Template (Optional)

bash
cp -r ~/.claude/skills/pw-image-generation/config.example ./config
cp ~/.claude/skills/pw-image-generation/references/.gitignore.template ./.gitignore
# Edit config/secrets.md to customize API keys (optional)

Step 3: Create Prompts

bash
mkdir -p prompts
cp ~/.claude/skills/pw-image-generation/references/prompt-templates/提示词模板.md ./prompts/我的提示词.md
vim ./prompts/我的提示词.md
Refer to 
references/style-library.md
to select appropriate styles.

Step 4: Generate Images

bash
npx -y bun ~/.claude/skills/pw-image-generation/scripts/generate-image.ts
The script will ask for confirmation for each image to avoid credit waste.

Tool Script Details

1. Generate Images

Command:
bash
npx -y bun ~/.claude/skills/pw-image-generation/scripts/generate-image.ts [output directory]
Parameter Explanation:
  • [output directory]
    : Optional, specify the image save directory, default is 
    ./images
Workflow:
  1. Read all prompt files in the 
    prompts/
    directory
  2. Display each prompt content one by one
  3. Ask whether to generate the image (y/n/q)
  4. Generate and save the image to the output directory
  5. Support interruption and resumption
Confirmation Options:
  • y
    (yes): Generate current image
  • n
    (no): Skip current image and continue to the next
  • q
    (quit): Exit the generation process
Examples:
bash
# Use default output directory
npx -y bun ~/.claude/skills/pw-image-generation/scripts/generate-image.ts

# Specify output directory
npx -y bun ~/.claude/skills/pw-image-generation/scripts/generate-image.ts ./my-images

2. Upload Images to Hosting Service

Command:
bash
npx -y bun ~/.claude/skills/pw-image-generation/scripts/upload-image.ts <image path>
Parameter Explanation:
  • <image path>
    : Required, path to the local image file to upload
Features:
  • Automatically upload to freeimage.host (permanent storage)
  • Return usable image URL
  • Automatically save deletion link to 
    .upload-history.json
  • Used for reference image upload in image-to-image generation
Example:
bash
# Upload single image
npx -y bun ~/.claude/skills/pw-image-generation/scripts/upload-image.ts ./template/参考图.png

# After upload, you will get:
# - Image URL (used for image_url in prompts)
# - Deletion link (saved in history)
Output Example:
Upload successful!
Image URL: https://iili.io/xxx.png
Deletion link saved to .upload-history.json

3. Manage Hosted Images

Command:
bash
# List all uploaded images
npx -y bun ~/.claude/skills/pw-image-generation/scripts/delete-image.ts list

# Delete image with specified index
npx -y bun ~/.claude/skills/pw-image-generation/scripts/delete-image.ts delete <index>

# Delete all images
npx -y bun ~/.claude/skills/pw-image-generation/scripts/delete-image.ts delete-all
Parameter Explanation:
  • list
    : List all upload records
  • delete <index>
    : Delete image with specified index (index starts from 0)
  • delete-all
    : Delete all images
Features:
  • View upload history and deletion links
  • Delete single or batch images
  • Automatically update history file
Example:
bash
# View upload history
npx -y bun ~/.claude/skills/pw-image-generation/scripts/delete-image.ts list
# Output:
# 0: 参考图.png - https://iili.io/xxx.png (2024-01-15)
# 1: 配图1.png - https://iili.io/yyy.png (2024-01-16)

# Delete image with index 0
npx -y bun ~/.claude/skills/pw-image-generation/scripts/delete-image.ts delete 0

# Delete all images (requires confirmation)
npx -y bun ~/.claude/skills/pw-image-generation/scripts/delete-image.ts delete-all
For detailed instructions, see 
references/图床上传.md

4. Merge into Long Image

Command:
bash
npx -y bun ~/.claude/skills/pw-image-generation/scripts/merge-to-long-image.ts <image directory> <output file>
Parameter Explanation:
  • <image directory>
    : Required, directory containing images to merge
  • <output file>
    : Required, filename of the output long image
Features:
  • Vertically stitch multiple images
  • Automatically recognize jpg/png/gif/webp formats
  • Sort by filename numbers
  • Maintain original image width, automatically calculate height
Dependency Requirement: Need to install ImageMagick:
bash
brew install imagemagick
Example:
bash
# Merge all images in images directory
npx -y bun ~/.claude/skills/pw-image-generation/scripts/merge-to-long-image.ts ./images 长图.png

# Specify other directory
npx -y bun ~/.claude/skills/pw-image-generation/scripts/merge-to-long-image.ts ./my-images 合集.jpg
Usage Scenarios:
  • Create long images for Xiaohongshu/WeChat Official Accounts
  • Merge series tutorial screenshots
  • Create image collection displays

5. Package into PPT

Command:
bash
npx -y bun ~/.claude/skills/pw-image-generation/scripts/merge-to-pptx.ts <image directory> <output file>
Parameter Explanation:
  • <image directory>
    : Required, directory containing images to package
  • <output file>
    : Required, filename of the output PPT
Features:
  • One image per page
  • Automatically recognize jpg/png/gif/webp formats
  • Sort by filename numbers
  • 16:9 aspect ratio, automatically adapt to page size
  • Images displayed in center
Example:
bash
# Package images in images directory into PPT
npx -y bun ~/.claude/skills/pw-image-generation/scripts/merge-to-pptx.ts ./images 配图.pptx

# Specify other directory
npx -y bun ~/.claude/skills/pw-image-generation/scripts/merge-to-pptx.ts ./my-images 展示.pptx
Usage Scenarios:
  • Quickly create image demonstration PPTs
  • Package series illustrations for sharing
  • Organize generated images into presentation documents

6. Analyze Image Style

Command:
bash
# Analyze from URL
npx -y bun ~/.claude/skills/pw-image-generation/scripts/analyze-image.ts <image URL>

# Analyze from local file
npx -y bun ~/.claude/skills/pw-image-generation/scripts/analyze-image.ts <local path>
Parameter Explanation:
  • <image URL or path>
    : Required, URL or local file path of the image to analyze
Features:
  • Analyze visual style of images
  • Generate suitable prompt suggestions
  • Recognize colors, composition, and artistic styles
  • Save analysis results to 
    analysis/
    directory
Example:
bash
# Analyze online image
npx -y bun ~/.claude/skills/pw-image-generation/scripts/analyze-image.ts https://example.com/image.jpg

# Analyze local image
npx -y bun ~/.claude/skills/pw-image-generation/scripts/analyze-image.ts ./template/参考图.png
Usage Scenarios:
  • Learn style features of reference images
  • Prepare prompts for image-to-image generation
  • Understand how to describe specific visual styles

File Structure

Project Directory Structure

my-image-project/
├── config/
│   └── secrets.md           # API configuration (optional)
├── template/                # PDF template images
├── prompts/                 # Prompt files
├── analysis/                # Style analysis (optional)
├── images/                  # Generated images
└── .gitignore

Skill Directory Structure

pw-image-generation/
├── SKILL.md                  # This file (core documentation)
├── config.example/           # Configuration templates
│   ├── README.md             # Configuration instructions
│   └── secrets.md            # API configuration template
├── references/               # Reference documents
│   ├── .gitignore.template   # Git ignore file template
│   ├── 图床上传.md           # Image hosting upload guide
│   ├── style-library.md      # Style library (9 preset styles)
│   └── prompt-templates/
│       └── 提示词模板.md     # Prompt templates
└── scripts/
    ├── analyze-image.ts      # Analyze image style
    ├── generate-image.ts     # Generate images (supports confirmation and skipping)
    ├── upload-image.ts       # Upload images to hosting service
    ├── delete-image.ts       # Manage and delete hosted images
    ├── merge-to-long-image.ts       # Merge into long image
    └── merge-to-pptx.ts        # Package into PPT

Common Issues and Error Handling

1. Image Generation Failure

Problem: Image generation fails or returns errors
Possible Causes:
  • API key not configured or invalid
  • Incorrect prompt format
  • Network connection issues
  • Insufficient API credits
Solutions:
bash
# Check configuration file
cat config/secrets.md

# Verify prompt format
cat prompts/提示词.md

# Test network connection
curl -I https://api.openai.com

# View detailed error information (automatically displayed by script)

2. Image Hosting Upload Failure

Problem: Failed to upload image to hosting service
Possible Causes:
  • Image file does not exist or incorrect path
  • Unsupported image format
  • Image file too large (exceeds 10MB)
  • Network connection issues
Solutions:
bash
# Check if file exists
ls -lh ./template/图片.png

# Check file size
du -h ./template/图片.png

# If file is too large, compress it
# Compress using ImageMagick
convert ./template/图片.png -quality 85 -resize 2000x2000\> ./template/图片_compressed.png

3. Long Image Merging Failure

Problem: Error "ImageMagick not found" when merging long images
Possible Causes:
  • ImageMagick not installed
  • ImageMagick not added to PATH
Solutions:
bash
# Install on macOS
brew install imagemagick

# Verify installation
convert --version

# If still failing, check PATH
which convert

4. PPT Generation Failure

Problem: Error when generating PPT or PPT cannot be opened
Possible Causes:
  • Image directory is empty or does not exist
  • Unsupported image format
  • Invalid output file path
Solutions:
bash
# Check image directory
ls -la ./images

# Check image format (supports jpg/png/gif/webp)
file ./images/*.png

# Ensure output directory exists
mkdir -p ./output
npx -y bun ~/.claude/skills/pw-image-generation/scripts/merge-to-pptx.ts ./images ./output/配图.pptx

5. Prompts Not Effective

Problem: Generated images do not match prompt descriptions
Possible Causes:
  • Prompt descriptions are not specific enough
  • Mixed Chinese and English in prompts
  • Prompts are too long or too short
  • Style descriptions are unclear
Solutions:
markdown
# Bad prompt
A picture

# Good prompt
Watercolor style, a cute kitten sitting on a windowsill, warm afternoon sunlight, soft colors, hand-painted texture

# Use style library
Refer to references/style-library.md to select appropriate style descriptions

6. Batch Generation Interruption

Problem: Unexpected interruption during batch generation
Possible Causes:
  • Unstable network
  • Manual interruption by user (Ctrl+C)
  • API rate limiting
Solutions:
  • The script will automatically skip already generated images
  • Re-run the generation command to continue
  • Already generated images will not be regenerated
  • Use 
    n
    option to skip unwanted images

7. Configuration File Issues

Problem: Configuration file not effective or not found
Possible Causes:
  • Incorrect configuration file path
  • Incorrect configuration file format
  • Configuration template not copied
Solutions:
bash
# Copy configuration template
cp -r ~/.claude/skills/pw-image-generation/config.example ./config

# Check configuration file
cat config/secrets.md

# Configuration file format example
# API_BASE_URL=https://api.openai.com/v1
# API_KEY=sk-xxx

Best Practices

Image Size Specifications

Select appropriate image sizes based on different usage scenarios:
ScenarioAspect RatioRecommended PixelsDescription
Article Illustrations16:91920×1080HD standard, suitable for large-screen reading
WeChat Official Account Cover2.35:1900×383Official WeChat recommended size
Xiaohongshu Cover/Illustrations3:41242×1660Xiaohongshu recommended, suitable for iPhone screens
X Article Cover5:21500×600Official X Articles recommended
Paper Illustrations16:91920×1080HD standard
Additional Notes:
  • Xiaohongshu also supports 1:1 (1080×1080) and 4:3 (1440×1080)
  • WeChat Official Account secondary cover can use 200×200 (1:1)
Usage Suggestions:
  • Specify size in prompts: 
    size: 1920x1080
    or 
    aspect_ratio: 16:9
  • Prioritize recommended sizes to avoid composition imbalance caused by later cropping
  • Different platforms have different size requirements, confirm target platform before generation

Prompt Design

Basic Principles:
  • Specific and clear: Detailed description of scene, style, color, and composition
  • Consistent style: Use preset style descriptions from the style library
  • Consistent language: All English or all Chinese, avoid mixing
  • Moderate length: 50-200 words is appropriate; too short lacks details, too long is confusing
Recommended Structure:
markdown
[Style] + [Subject] + [Scene] + [Atmosphere] + [Technical Details]

Example:
Watercolor style, a cute kitten sitting on a windowsill, warm afternoon sunlight, soft colors, hand-painted texture
Reference Resources:
  • references/style-library.md
    : 9 preset styles
  • references/prompt-templates/提示词模板.md
    : Prompt templates

Image Generation Process

Recommended Steps:
  1. First generate 1-2 test images to verify prompt effectiveness
  2. Adjust prompts based on test results
  3. Batch generate remaining images after confirming satisfactory results
  4. Use confirmation mechanism to avoid wasting API credits
  5. Regularly back up generated images
Avoid Wastage:
  • Carefully check prompts before each generation
  • Use 
    n
    option to skip unwanted images
  • Use 
    q
    option to exit promptly
  • Do not blindly batch generate

Image-to-Image Tips

Upload Reference Image:
bash
# 1. Upload reference image to hosting service
npx -y bun ~/.claude/skills/pw-image-generation/scripts/upload-image.ts ./template/参考图.png

# 2. Copy the returned URL

# 3. Use in prompt
# image_url: https://iili.io/xxx.png
# prompt: Scene with similar style, maintain color tone and composition
Notes:
  • Recommended reference image size is 1024x1024 or larger
  • Reference image should be high-definition
  • Prompts should clearly state which features to retain
  • Try different prompt combinations multiple times

File Management

Recommended Directory Structure:
my-image-project/
├── config/              # Configuration files (not submitted to git)
├── template/            # Reference images
├── prompts/             # Prompt files
│   ├── 01-封面.md
│   ├── 02-内容1.md
│   └── 03-内容2.md
├── images/              # Generated images
│   ├── 01-封面.png
│   ├── 02-内容1.png
│   └── 03-内容2.png
└── output/              # Final output (long images/PPTs)
Naming Conventions:
  • Prompt files: Use numeric prefixes for sorting (01-, 02-, 03-)
  • Generated images: Automatically use prompt file names
  • Facilitates batch processing and sorting

Performance Optimization

Improve Generation Speed:
  • Use smaller image sizes (1024x1024 instead of 2048x2048)
  • Avoid overly complex prompts
  • Use image-to-image appropriately (faster than text-to-image)
Save API Credits:
  • Use confirmation mechanism, do not skip confirmation
  • Test single images first, then batch generate
  • Save good prompts as templates for reuse
  • Regularly clean up unnecessary images on hosting service

Quality Control

Checklist:
  • Prompt descriptions are clear and specific
  • Style descriptions are unified and consistent
  • Test image results are satisfactory
  • Image size and format are correct
  • File naming is standardized and organized
  • Important images are backed up
Common Issues:
  • Inconsistent image style: Check style descriptions in prompts
  • Poor image quality: Add technical detail descriptions (e.g., "high definition", "rich details")
  • Image content deviation: Make prompts more specific and add constraint conditions

Important Notes

Avoid Credit Wastage

  • Asks for confirmation before each generation
  • Supports skipping already generated images
  • Generate one image at a time to avoid batch credit consumption

Configuration Management

  • Configuration file 
    config/secrets.md
    is optional
  • Uses default configuration when not configured (requires setting environment variable API_KEY)
  • Configuration files are not submitted to version control (already in .gitignore)
  • Supports custom API endpoints and models

Runtime Environment

Scripts run with Bun, no need to install dependencies locally:
bash
# Run directly, Bun will handle dependencies automatically
npx -y bun ~/.claude/skills/pw-image-generation/scripts/generate-image.ts
System Requirements:
  • Node.js or Bun runtime
  • macOS/Linux/Windows (WSL)
  • ImageMagick required for long image merging

Configuration Instructions

See 
config.example/secrets.md
for configuration options:
Configurable Items:
  • API_BASE_URL
    : API base URL (default: OpenAI API)
  • ANALYSIS_MODEL_ID
    : Image analysis model (default: gpt-4-vision-preview)
  • GENERATION_MODEL_ID
    : Image generation model (default: dall-e-3)
  • API_KEY
    : API key (required)
Configuration Example:
markdown
# config/secrets.md
API_BASE_URL=https://api.openai.com/v1
ANALYSIS_MODEL_ID=gpt-4-vision-preview
GENERATION_MODEL_ID=dall-e-3
API_KEY=sk-your-api-key-here

Style Library

The Skill provides 9 preset styles to ensure consistent image styles:
  • Watercolor (watercolor) - Soft and warm
  • Flat Design (flat-design) - Modern and concise
  • 3D Render (3d-render) - Stereoscopic and realistic
  • Oil Painting (oil-painting) - Artistic and classic
  • Cyberpunk (cyberpunk) - Sci-fi and futuristic
  • Pixel Art (pixel-art) - Retro and nostalgic
  • Hand-Drawn Illustration (hand-drawn) - Warm and personalized
  • Photorealistic (photorealistic) - Highly realistic
  • Abstract Art (abstract) - Emotional expression
See 
references/style-library.md
for detailed descriptions and usage scenarios of each style.

Usage Suggestions

Agent Usage Guide

When users request image generation:
  1. Confirm Requirements: Ask users about image usage, style preferences, and quantity
  2. Prepare Environment: Guide users to create project directories and configurations
  3. Design Prompts: Design prompts based on requirements, refer to the style library
  4. Generate Tests: First generate 1-2 test images
  5. Batch Generation: Batch generate after confirming satisfactory results
  6. Post-Processing: Merge into long images or package into PPT as needed

Typical Workflows

Scenario 1: Article Illustrations
bash
# 1. Create project
mkdir article-images && cd article-images

# 2. Prepare prompts
mkdir prompts
# Create prompts/01-封面.md, 02-配图1.md, etc.

# 3. Generate images
npx -y bun ~/.claude/skills/pw-image-generation/scripts/generate-image.ts

# 4. Merge into long image (optional)
npx -y bun ~/.claude/skills/pw-image-generation/scripts/merge-to-long-image.ts ./images 长图.png
Scenario 2: PPT Illustrations
bash
# 1. Create project
mkdir ppt-images && cd ppt-images

# 2. Prepare prompts (named in page order)
mkdir prompts
# Create prompts/01-标题页.md, 02-内容1.md, etc.

# 3. Generate images
npx -y bun ~/.claude/skills/pw-image-generation/scripts/generate-image.ts

# 4. Package into PPT
npx -y bun ~/.claude/skills/pw-image-generation/scripts/merge-to-pptx.ts ./images 配图.pptx
Scenario 3: Image-to-Image
bash
# 1. Upload reference image
npx -y bun ~/.claude/skills/pw-image-generation/scripts/upload-image.ts ./template/参考图.png

# 2. Use returned URL in prompt
# prompts/01-类似风格.md:
# image_url: https://iili.io/xxx.png
# prompt: Scene with similar style, maintain color tone and composition

# 3. Generate images
npx -y bun ~/.claude/skills/pw-image-generation/scripts/generate-image.ts

Command Cheat Sheet

bash
# Generate images
npx -y bun ~/.claude/skills/pw-image-generation/scripts/generate-image.ts [output directory]

# Upload images
npx -y bun ~/.claude/skills/pw-image-generation/scripts/upload-image.ts <image path>

# Manage hosting service
npx -y bun ~/.claude/skills/pw-image-generation/scripts/delete-image.ts list
npx -y bun ~/.claude/skills/pw-image-generation/scripts/delete-image.ts delete <index>
npx -y bun ~/.claude/skills/pw-image-generation/scripts/delete-image.ts delete-all

# Merge into long image
npx -y bun ~/.claude/skills/pw-image-generation/scripts/merge-to-long-image.ts <image directory> <output file>

# Package into PPT
npx -y bun ~/.claude/skills/pw-image-generation/scripts/merge-to-pptx.ts <image directory> <output file>

# Analyze image
npx -y bun ~/.claude/skills/pw-image-generation/scripts/analyze-image.ts <image URL or path>