Implement AI image editing and modification capabilities using the z-ai-web-dev-sdk.

MITAuto-check passedMedia & Creative

Install Image Edit

skills CLI
$ npx skills add Ali-Marandi/Web-Scraper-Framework --skill image-edit -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Ali-Marandi/Web-Scraper-Framework image-edit --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Ali-Marandi/Web-Scraper-Framework.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/image-edit .claude/skills/image-edit && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
image-edit
GitHub stars
107
Token cost
~6.2k tokens
SKILL.md length
699 words
Files
3 (incl. scripts)
Skills in repo
12
Repo updated
First seen
Licence
MIT

At a glance

Implement AI image editing and modification capabilities using the z-ai-web-dev-sdk.

  • Works in 3 steps: Effective Edit Prompts → Size Selection for Different Edit Types → Error Handling with Retry
  • The user needs to edit existing images
  • SKILL.md covers Skills Path, Overview, SDK API Method and Prerequisites, plus 9 more sections
  • Runs TypeScript scripts from its folder

What it does

Image Edit is an agent skill from Ali-Marandi/Web-Scraper-Framework. Implement AI image editing and modification capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to edit existing images, create variations, modify visual content, redesign assets, or transform images based on text descriptions. Supports multiple image sizes and returns base64 encoded results. Also includes CLI tool for quick image editing.

Its SKILL.md is about 6.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including scripts (for example `scripts/image-edit.ts`).

It sits in Media & Creative, covering Image editing and Image generation. It works with Zhipu GLM. The repository describes itself as: Flexible and Scalable Web Scraping Framework. The licence is MIT.

When your agent uses it

  • The user needs to edit existing images
  • Create variations
  • Modify visual content
  • Redesign assets

Example prompts

  • “/image-edit”

Requirements

  • Node.js

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. Effective Edit Prompts
  2. Size Selection for Different Edit Types
  3. Error Handling with Retry

What it can do on your machine

Read from SKILL.md and the folder at commit f8af4cd. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 1 file in scripts/ (TypeScript), which the agent can run.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Image Edit loads about 6.2k tokens when it runs. Until then it costs about 94 tokens; SKILL.md has 699 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~94
When it runs · the whole SKILL.md, loaded when a task matches
~6.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from Ali-Marandi/Web-Scraper-Framework at commit f8af4cd, republished under its MIT licence (© Ali-Marandi). 699 words, ~6,189 tokens.

Download SKILL.mdSave it as .claude/skills/image-edit/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
image-edit
description
Implement AI image editing and modification capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to edit existing images, create variations, modify visual content, redesign assets, or transform images based on text descriptions. Supports multiple image sizes and returns base64 encoded results. Also includes CLI tool for quick image editing.
license
MIT

Image Edit Skill

This skill guides the implementation of image editing and modification functionality using the z-ai-web-dev-sdk package and CLI tool, enabling intelligent transformation and editing of images based on text descriptions.

Skills Path

Skill Location: {project_path}/skills/image-edit

this skill is located at above path in your project.

Reference Scripts: Example test scripts are available in the {Skill Location}/scripts/ directory for quick testing and reference. See {Skill Location}/scripts/image-edit.ts for a working example.

Overview

Image Edit allows you to build applications that modify, transform, and enhance existing images using AI models. Perfect for redesigning assets, creating variations, improving visual content, and transforming images based on textual descriptions.

IMPORTANT: z-ai-web-dev-sdk MUST be used in backend code only. Never use it in client-side code.

SDK API Method

The image editing functionality uses the following API method:

javascript
await zai.images.generations.edit({
  prompt: string,              // Required: Description of the edit to apply
  images: [{ url: string }],  // Required: Array with image URL or base64 data URL
  size?: string,              // Optional: Output size (default: '1024x1024')
  model?: string              // Optional: Model name
})

Important: The images parameter must be an array of objects with a url property, not a plain string.

API Endpoint: POST /images/generations/edit

Returns: ImageGenerationResponse with base64 encoded edited image

Prerequisites

The z-ai-web-dev-sdk package is already installed. Import it as shown in the examples below.

Basic Image Editing

Simple Image Transformation
javascript
import ZAI from 'z-ai-web-dev-sdk';
import fs from 'fs';

async function editImage(imageSource, editPrompt, outputPath, size = '1024x1024') {
  const zai = await ZAI.create();

  const response = await zai.images.generations.edit({
    prompt: editPrompt,
    images: [{ url: imageSource }],  // Array of objects with url property
    size: size
  });

  const imageBase64 = response.data[0].base64;
  
  // Save edited image
  const buffer = Buffer.from(imageBase64, 'base64');
  fs.writeFileSync(outputPath, buffer);
  
  console.log(`Edited image saved to ${outputPath}`);
  return outputPath;
}

// Usage - Using remote image URL
await editImage(
  'https://example.com/landscape.jpg',
  'Transform this landscape into a night scene with stars and moon',
  './landscape_night.png'
);

// Usage - Using local image converted to base64
import { readFileSync } from 'fs';
const imageBuffer = readFileSync('./photo.jpg');
const base64Image = imageBuffer.toString('base64');
const dataUrl = `data:image/jpeg;base64,${base64Image}`;

await editImage(
  dataUrl,
  'Change the cat to a dog, keep everything else the same',
  './dog_version.png'
);
Create Image Variations
javascript
import ZAI from 'z-ai-web-dev-sdk';
import fs from 'fs';

async function createVariation(imageSource, baseDescription, variation, outputPath, size = '1024x1024') {
  const zai = await ZAI.create();

  // Combine base description with variation request
  const prompt = `${baseDescription}, ${variation}`;

  const response = await zai.images.generations.edit({
    prompt: prompt,
    images: [{ url: imageSource }],
    size: size
  });

  const imageBase64 = response.data[0].base64;
  const buffer = Buffer.from(imageBase64, 'base64');
  fs.writeFileSync(outputPath, buffer);

  return {
    path: outputPath,
    prompt: prompt,
    variation: variation
  };
}

// Usage - Create variations from original image
await createVariation(
  'https://example.com/headshot.jpg',
  'Professional headshot photo',
  'with blue background instead of gray',
  './headshot_blue.png'
);

await createVariation(
  './smartphone.png',
  'Product photo of smartphone',
  'on wooden table instead of white background',
  './product_wood.png'
);
Multiple Image Sizes for Editing
javascript
import ZAI from 'z-ai-web-dev-sdk';
import fs from 'fs';

// Supported sizes
const SUPPORTED_SIZES = [
  '1024x1024',  // Square
  '768x1344',   // Portrait
  '864x1152',   // Portrait
  '1344x768',   // Landscape
  '1152x864',   // Landscape
  '1440x720',   // Wide landscape
  '720x1440'    // Tall portrait
];

async function editImageWithSize(imageSource, editPrompt, size, outputPath) {
  if (!SUPPORTED_SIZES.includes(size)) {
    throw new Error(`Unsupported size: ${size}. Use one of: ${SUPPORTED_SIZES.join(', ')}`);
  }

  const zai = await ZAI.create();

  const response = await zai.images.generations.edit({
    prompt: editPrompt,
    images: [{ url: imageSource }],
    size: size
  });

  const imageBase64 = response.data[0].base64;
  const buffer = Buffer.from(imageBase64, 'base64');
  fs.writeFileSync(outputPath, buffer);

  return {
    path: outputPath,
    size: size,
    fileSize: buffer.length
  };
}

// Usage - Edit with different aspect ratios
await editImageWithSize(
  './logo.png',
  'Redesign the logo to be more modern and minimalist',
  '1024x1024',
  './logo_redesigned.png'
);

await editImageWithSize(
  'https://example.com/portrait.jpg',
  'Transform the portrait to landscape orientation, sunset lighting',
  '1344x768',
  './portrait_landscape.png'
);

CLI Tool Usage

The z-ai CLI tool provides a convenient way to edit images directly from the command line.

Basic CLI Usage
bash
# Edit image with full options
z-ai image-edit --prompt "Change the background to sunset colors" --image "./photo.png" --output "./edited.png"

# Short form
z-ai image-edit -p "Make it darker and moodier" -i "./original.jpg" -o "./moody.png"

# Specify output size
z-ai image-edit -p "Redesign in modern style" -i "./design.png" -o "./modern.png" -s 1344x768

# Using remote image URL
z-ai image-edit -p "Convert to landscape orientation" -i "https://example.com/photo.png" -o "./landscape.png" -s 1344x768
CLI Parameters
  • --prompt, -p: Required - Description of the edit to apply
  • --image, -i: Required - Original image URL or local file path
  • --output, -o: Required - Output image file path (PNG format)
  • --size, -s: Optional - Image size, default is 1024x1024
  • --help, -h: Optional - Display help information
Supported Sizes
  • 1024x1024, 768x1344, 864x1152, 1344x768, 1152x864, 1440x720, 720x1440
CLI Use Cases for Image Editing
bash
# Redesign existing asset
z-ai image-edit -p "Redesign the logo with gradients and modern styling" -i "./logo.png" -o "./logo_v2.png" -s 1024x1024

# Change color scheme
z-ai image-edit -p "Change color scheme to blue and white, professional style" -i "./original.png" -o "./recolored.png" -s 1440x720

# Style transformation
z-ai image-edit -p "Transform to oil painting style, vibrant colors" -i "./photo.jpg" -o "./oil_painting.png" -s 1152x864

# Background replacement
z-ai image-edit -p "Replace background with modern office setting" -i "./portrait.png" -o "./new_background.png" -s 1344x768

# Lighting adjustment
z-ai image-edit -p "Adjust to golden hour lighting, warm tones" -i "./landscape.jpg" -o "./golden_hour.png" -s 1024x1024

# Element modification
z-ai image-edit -p "Replace the red car with a blue motorcycle" -i "./scene.png" -o "./modified.png" -s 1344x768

# Mood transformation
z-ai image-edit -p "Transform to dark moody atmosphere with dramatic lighting" -i "./bright.jpg" -o "./moody.png" -s 1440x720

# Using remote image URL
z-ai image-edit -p "Add a hat to the person" -i "https://example.com/photo.png" -o "./result.png" -s 1024x1024

Advanced Use Cases

Batch Image Editing
javascript
import ZAI from 'z-ai-web-dev-sdk';
import fs from 'fs';
import path from 'path';

async function batchEditImages(editInstructions, outputDir, size = '1024x1024') {
  const zai = await ZAI.create();

  // Ensure output directory exists
  if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
  }

  const results = [];

  for (let i = 0; i < editInstructions.length; i++) {
    try {
      const instruction = editInstructions[i];
      const filename = `edited_${i + 1}.png`;
      const outputPath = path.join(outputDir, filename);

      const response = await zai.images.generations.edit({
        prompt: instruction.prompt,
        images: [{ url: instruction.imageSource }],
        size: size
      });

      const imageBase64 = response.data[0].base64;
      const buffer = Buffer.from(imageBase64, 'base64');
      fs.writeFileSync(outputPath, buffer);

      results.push({
        success: true,
        instruction: instruction.prompt,
        path: outputPath,
        size: buffer.length
      });

      console.log(`✓ Edited: ${filename}`);
    } catch (error) {
      results.push({
        success: false,
        instruction: editInstructions[i].prompt,
        error: error.message
      });

      console.error(`✗ Failed: ${editInstructions[i].prompt} - ${error.message}`);
    }
  }

  return results;
}

// Usage - Create multiple variations from the same image
const editInstructions = [
  { 
    imageSource: './original.jpg',
    prompt: 'Change background to blue gradient' 
  },
  { 
    imageSource: './original.jpg',
    prompt: 'Transform to black and white, high contrast' 
  },
  { 
    imageSource: './original.jpg',
    prompt: 'Add sunset lighting effects' 
  }
];

const results = await batchEditImages(editInstructions, './edited-images');
console.log(`Edited ${results.filter(r => r.success).length} images`);
Image Editing Service
javascript
import ZAI from 'z-ai-web-dev-sdk';
import fs from 'fs';
import path from 'path';
import crypto from 'crypto';

class ImageEditingService {
  constructor(outputDir = './edited-images') {
    this.outputDir = outputDir;
    this.zai = null;
    this.editHistory = [];
  }

  async initialize() {
    this.zai = await ZAI.create();
    
    if (!fs.existsSync(this.outputDir)) {
      fs.mkdirSync(this.outputDir, { recursive: true });
    }
  }

  generateFilename(editPrompt) {
    const hash = crypto
      .createHash('md5')
      .update(`${editPrompt}-${Date.now()}`)
      .digest('hex')
      .substring(0, 8);
    
    return `edited_${hash}.png`;
  }

  async edit(imageSource, editPrompt, options = {}) {
    const {
      size = '1024x1024',
      saveToHistory = true,
      filename = null
    } = options;

    const response = await this.zai.images.generations.edit({
      prompt: editPrompt,
      images: [{ url: imageSource }],
      size: size
    });

    const imageBase64 = response.data[0].base64;
    const buffer = Buffer.from(imageBase64, 'base64');

    // Determine output path
    const outputFilename = filename || this.generateFilename(editPrompt);
    const outputPath = path.join(this.outputDir, outputFilename);

    fs.writeFileSync(outputPath, buffer);

    const result = {
      path: outputPath,
      imageSource: imageSource,
      editPrompt: editPrompt,
      size: size,
      fileSize: buffer.length,
      timestamp: new Date().toISOString()
    };

    // Save to history
    if (saveToHistory) {
      this.editHistory.push(result);
    }

    return result;
  }

  async createVariations(imageSource, basePrompt, variations, options = {}) {
    const results = [];
    
    for (const variation of variations) {
      const fullPrompt = `${basePrompt}, ${variation}`;
      const result = await this.edit(imageSource, fullPrompt, options);
      result.variation = variation;
      results.push(result);
    }

    return results;
  }

  getEditHistory() {
    return this.editHistory;
  }

  clearHistory() {
    this.editHistory = [];
  }
}

// Usage
const service = new ImageEditingService();
await service.initialize();

// Single edit
const edited = await service.edit(
  './original.jpg',
  'Transform to watercolor painting style',
  { size: '1024x1024' }
);

// Multiple variations from the same image
const variations = await service.createVariations(
  'https://example.com/product.png',
  'Professional product photo',
  [
    'with blue background',
    'with wooden surface',
    'with dramatic lighting'
  ]
);

console.log('Edit history:', service.getEditHistory());
Style Transfer and Transformation
javascript
import ZAI from 'z-ai-web-dev-sdk';
import fs from 'fs';

async function applyStyleTransfer(imageSource, content, style, outputPath, size = '1024x1024') {
  const zai = await ZAI.create();

  const prompt = `${content} transformed into ${style} style, maintain composition and subject`;

  const response = await zai.images.generations.edit({
    prompt: prompt,
    images: [{ url: imageSource }],
    size: size
  });

  const imageBase64 = response.data[0].base64;
  const buffer = Buffer.from(imageBase64, 'base64');
  fs.writeFileSync(outputPath, buffer);

  return {
    path: outputPath,
    content: content,
    style: style
  };
}

// Usage - Apply different styles to the same image
await applyStyleTransfer(
  './portrait.jpg',
  'Portrait photograph',
  'oil painting',
  './portrait_oil.png'
);

await applyStyleTransfer(
  'https://example.com/city.jpg',
  'City landscape',
  'watercolor',
  './city_watercolor.png'
);

await applyStyleTransfer(
  './product.png',
  'Product photo',
  'minimalist illustration',
  './product_minimal.png'
);
Element Replacement
javascript
import ZAI from 'z-ai-web-dev-sdk';
import fs from 'fs';

async function replaceElement(imageSource, baseScene, replaceWhat, replaceWith, outputPath, size = '1024x1024') {
  const zai = await ZAI.create();

  const prompt = `${baseScene}, replace ${replaceWhat} with ${replaceWith}, keep everything else identical`;

  const response = await zai.images.generations.edit({
    prompt: prompt,
    images: [{ url: imageSource }],
    size: size
  });

  const imageBase64 = response.data[0].base64;
  const buffer = Buffer.from(imageBase64, 'base64');
  fs.writeFileSync(outputPath, buffer);

  return {
    path: outputPath,
    modification: `${replaceWhat} → ${replaceWith}`
  };
}

// Usage
await replaceElement(
  './workspace.jpg',
  'Office workspace with laptop',
  'laptop',
  'desktop computer with dual monitors',
  './workspace_desktop.png'
);

await replaceElement(
  'https://example.com/living-room.jpg',
  'Living room interior with sofa',
  'blue sofa',
  'brown leather sofa',
  './living_room_leather.png'
);

Best Practices

1. Effective Edit Prompts
javascript
function buildEditPrompt(baseDescription, modification, preserveElements = []) {
  const components = [
    baseDescription,
    modification
  ];

  if (preserveElements.length > 0) {
    components.push(`keep ${preserveElements.join(', ')} unchanged`);
  }

  components.push('maintain overall composition');

  return components.filter(Boolean).join(', ');
}

// Usage
const editPrompt = buildEditPrompt(
  'Professional headshot photo',
  'change background to modern office',
  ['lighting', 'pose', 'expression']
);

// Result: "Professional headshot photo, change background to modern office, keep lighting, pose, expression unchanged, maintain overall composition"
2. Size Selection for Different Edit Types
javascript
function selectSizeForEdit(editType) {
  const sizeMap = {
    'background-change': '1440x720',
    'style-transfer': '1024x1024',
    'color-adjustment': '1024x1024',
    'element-replacement': '1344x768',
    'composition-change': '1152x864',
    'portrait-edit': '768x1344',
    'landscape-edit': '1344x768'
  };

  return sizeMap[editType] || '1024x1024';
}

// Usage
const size = selectSizeForEdit('background-change');
await editImage('Replace background with beach scene', './beach_bg.png', size);
3. Error Handling with Retry
javascript
import ZAI from 'z-ai-web-dev-sdk';
import fs from 'fs';

async function safeEditImage(imageSource, editPrompt, size, outputPath, retries = 3) {
  let lastError;

  for (let attempt = 1; attempt <= retries; attempt++) {
    try {
      const zai = await ZAI.create();

      const response = await zai.images.generations.edit({
        prompt: editPrompt,
        images: [{ url: imageSource }],
        size: size
      });

      if (!response.data || !response.data[0] || !response.data[0].base64) {
        throw new Error('Invalid response from image editing API');
      }

      const imageBase64 = response.data[0].base64;
      const buffer = Buffer.from(imageBase64, 'base64');
      fs.writeFileSync(outputPath, buffer);

      return {
        success: true,
        path: outputPath,
        attempts: attempt
      };
    } catch (error) {
      lastError = error;
      console.error(`Attempt ${attempt} failed:`, error.message);

      if (attempt < retries) {
        // Wait before retry (exponential backoff)
        await new Promise(resolve => setTimeout(resolve, 1000 * attempt));
      }
    }
  }

  return {
    success: false,
    error: lastError.message,
    attempts: retries
  };
}

Common Image Editing Use Cases

  1. Background Replacement: Change or remove backgrounds in photos
  2. Style Transformation: Convert photos to paintings, illustrations, etc.
  3. Color Adjustment: Change color schemes, saturation, mood
  4. Element Modification: Replace or modify specific elements
  5. Composition Changes: Adjust framing, orientation, layout
  6. Lighting Adjustments: Modify lighting, shadows, highlights
  7. Asset Redesign: Modernize or rebrand existing designs
  8. Quality Enhancement: Improve overall visual quality
  9. Variation Creation: Generate multiple versions of an image
  10. Format Conversion: Transform between different styles or formats

Integration Examples

Express.js API Endpoint
javascript
import express from 'express';
import ZAI from 'z-ai-web-dev-sdk';
import fs from 'fs';
import path from 'path';

const app = express();
app.use(express.json());
app.use('/edited-images', express.static('edited-images'));

let zaiInstance;
const outputDir = './edited-images';

async function initZAI() {
  zaiInstance = await ZAI.create();
  if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
  }
}

app.post('/api/edit-image', async (req, res) => {
  try {
    const { 
      imageSource,           // URL or base64 data URL
      editPrompt, 
      size = '1024x1024', 
      baseDescription = '' 
    } = req.body;

    if (!imageSource || !editPrompt) {
      return res.status(400).json({ 
        error: 'imageSource and editPrompt are required' 
      });
    }

    // Combine base description with edit instruction
    const fullPrompt = baseDescription 
      ? `${baseDescription}, ${editPrompt}`
      : editPrompt;

    const response = await zaiInstance.images.generations.edit({
      prompt: fullPrompt,
      images: [{ url: imageSource }],
      size: size
    });

    const imageBase64 = response.data[0].base64;
    const buffer = Buffer.from(imageBase64, 'base64');
    
    const filename = `edited_${Date.now()}.png`;
    const filepath = path.join(outputDir, filename);
    fs.writeFileSync(filepath, buffer);

    res.json({
      success: true,
      imageUrl: `/edited-images/${filename}`,
      editPrompt: fullPrompt,
      size: size
    });
  } catch (error) {
    res.status(500).json({
      success: false,
      error: error.message
    });
  }
});

app.post('/api/create-variations', async (req, res) => {
  try {
    const { 
      imageSource,      // URL or base64 data URL
      baseDescription, 
      variations, 
      size = '1024x1024' 
    } = req.body;

    if (!imageSource || !baseDescription || !variations || !Array.isArray(variations)) {
      return res.status(400).json({ 
        error: 'imageSource, baseDescription and variations array are required' 
      });
    }

    const results = [];

    for (const variation of variations) {
      const fullPrompt = `${baseDescription}, ${variation}`;

      const response = await zaiInstance.images.generations.edit({
        prompt: fullPrompt,
        images: [{ url: imageSource }],
        size: size
      });

      const imageBase64 = response.data[0].base64;
      const buffer = Buffer.from(imageBase64, 'base64');
      
      const filename = `variation_${Date.now()}_${Math.random().toString(36).substr(2, 9)}.png`;
      const filepath = path.join(outputDir, filename);
      fs.writeFileSync(filepath, buffer);

      results.push({
        variation: variation,
        imageUrl: `/edited-images/${filename}`
      });
    }

    res.json({
      success: true,
      results: results
    });
  } catch (error) {
    res.status(500).json({
      success: false,
      error: error.message
    });
  }
});

initZAI().then(() => {
  app.listen(3000, () => {
    console.log('Image editing API running on port 3000');
  });
});

CLI Integration in Scripts

Shell Script for Batch Editing
bash
#!/bin/bash

# Batch edit images with different styles
echo "Creating style variations..."

ORIGINAL_IMAGE="./product.jpg"
BASE="Professional product photo of laptop"

z-ai image-edit -p "$BASE, modern minimalist style, white background" -i "$ORIGINAL_IMAGE" -o "./variations/minimal.png" -s 1024x1024
z-ai image-edit -p "$BASE, dramatic lighting, dark background" -i "$ORIGINAL_IMAGE" -o "./variations/dramatic.png" -s 1024x1024
z-ai image-edit -p "$BASE, on wooden desk, natural lighting" -i "$ORIGINAL_IMAGE" -o "./variations/natural.png" -s 1024x1024

echo "Variations created successfully!"
Show full SKILL.md (295 more words)Show less

Troubleshooting

Issue: "SDK must be used in backend"

  • Solution: Ensure z-ai-web-dev-sdk is only used in server-side code

Issue: Invalid size parameter

  • Solution: Use only supported sizes: 1024x1024, 768x1344, 864x1152, 1344x768, 1152x864, 1440x720, 720x1440

Issue: Edited image doesn't match intention

  • Solution: Be more specific in edit prompts. Include what to change AND what to preserve

Issue: CLI command not found

  • Solution: Ensure z-ai CLI is properly installed and in PATH

Issue: Image quality loss after editing

  • Solution: Use larger size options and include quality terms in prompts

Issue: Inconsistent results across variations

  • Solution: Include more specific base description and detailed modification instructions

Edit Prompt Engineering Tips

Good Edit Prompts
  • ✓ "Change background to modern office, keep subject and lighting identical"
  • ✓ "Transform to watercolor style, maintain composition and colors"
  • ✓ "Replace red car with blue motorcycle, keep road and scenery unchanged"
  • ✓ "Adjust to golden hour lighting, preserve all elements"
Poor Edit Prompts
  • ✗ "make it better"
  • ✗ "change something"
  • ✗ "different version"
Edit Prompt Components
  1. Base Context: What the image currently represents
  2. Modification: What specific changes to make
  3. Preservation: What elements to keep unchanged
  4. Quality: Desired output quality or style
Effective Edit Patterns

Background Changes:

"[Subject description], replace background with [new background], maintain subject lighting and pose"

Style Transfers:

"[Current description] transformed into [style name] style, preserve composition and key elements"

Element Replacement:

"[Scene description], replace [element A] with [element B], keep everything else identical"

Color Adjustments:

"[Image description], change color scheme to [colors], maintain contrast and composition"

Supported Image Sizes

  • 1024x1024 - Square (Best for general editing)
  • 768x1344 - Portrait
  • 864x1152 - Portrait
  • 1344x768 - Landscape
  • 1152x864 - Landscape
  • 1440x720 - Wide landscape
  • 720x1440 - Tall portrait

Remember

  • Always use z-ai-web-dev-sdk in backend code only
  • The SDK is already installed - import as shown
  • CLI tool is available for quick image editing
  • Be specific about what to change AND what to preserve
  • Include base description for better context
  • Use appropriate size for the edit type
  • Implement retry logic for production applications
  • Test edit prompts iteratively for best results
  • Consider creating variations to explore options
  • Base64 images need to be decoded before saving

© Ali-Marandi, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (scripts) in skills/image-edit of Ali-Marandi/Web-Scraper-Framework.

  • SKILL.md
  • LICENSE.txt
  • scripts/image-edit.ts

Open the folder on GitHubat commit f8af4cd

Compare with similar skills

Image Edit next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Image Edit compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Image Edit this skillAli-Marandi/Web-Scraper-Framework107—~6.2kAutomated safety check: PassMIT
AI Image Generation and Editingzhayujie/CowAgent47k—~1.3kAutomated safety check: PassMIT
Generate Imageynulihao/AgentSkillOS61710 repos~1.7kAutomated safety check: NotesNone
GPT Image Generation CLIwuyoscar/GPT-Image2-Skill5.7k—~2.5kAutomated safety check: NotesMIT
Image Generationjjyaoao/HelloAgents3.2k1 repos~3.8kAutomated safety check: PassMIT
NanobananaReScienceLab/opc-skills1.8k1 repos~1.3kAutomated safety check: PassApache-2.0

Similar skills

  • Generates or edits images from text prompts through a Python script that picks an image backend based on which API keys are configured.

    47k GitHub stars~1.3k tokensUpdated today
    Media & CreativeAuto-check passed
  • Generate Image

    ynulihao/AgentSkillOS

    Generate or edit images using AI models (FLUX, Gemini). An agent skill from ynulihao/AgentSkillOS.

    617 GitHub starsUsed in 10 repos~1.7k tokens
    Media & CreativeAuto-check: notes
  • GPT Image Generation CLI

    wuyoscar/GPT-Image2-Skill

    Generates and edits images with GPT Image 2 or 2.5 through a packaged CLI and a prompt gallery, after settling which model fits the request.

    5.7k GitHub stars~2.5k tokensUpdated 8 days ago
    Media & CreativeAuto-check: notes
  • Image Generation

    jjyaoao/HelloAgents

    Implement AI image generation capabilities using the z-ai-web-dev-sdk.

    3.2k GitHub starsUsed in 1 repo~3.8k tokens
    Media & CreativeAuto-check passed
  • Nanobanana

    ReScienceLab/opc-skills

    Generate and edit images using Google Gemini 3 Pro Image (Nano Banana Pro).

    1.8k GitHub starsUsed in 1 repo~1.3k tokens
    Media & CreativeAuto-check passed
  • Native Transparent Imagegen

    ZSeven-W/craft-skills

    Generate new raster assets that must contain native pixel transparency, then verify the untouched PNG or WebP before delivery.

    223 GitHub starsUsed in 2 repos~1.1k tokens
    Media & CreativeAuto-check passed

More from Ali-Marandi/Web-Scraper-Framework

All 12 skills in this repo
  • Aminer Deep Search

    Ali-Marandi/Web-Scraper-Framework

    Activate this skill when the user wants deep, multi-round academic paper collection for a survey or literature review.

    107 GitHub stars~1.6k tokensUpdated 1 mo ago
    Auto-check passed
  • Interview Prep

    Ali-Marandi/Web-Scraper-Framework

    帮用户准备面试。基于目标 JD、公司、岗位方向,生成"高频面试题 + 参考回答 + 行为面 / 技术面 / Case 面分类题库",并产出可打印的『面试备战手册』。当用户说"帮我准备面试""明天有面试 / 后天面试""面试题""面经""模拟面试""我要面 X 公司 Y 岗位""帮我准备 STAR 故事""怎么回答这道面试题""自我介绍 / 离职原因 / 优缺点 怎么答",必须触发本…

    107 GitHub stars~735 tokensUpdated 1 mo ago
    Auto-check passed
  • Jd Resume Tailor

    Ali-Marandi/Web-Scraper-Framework

    给定一份 JD 和一份现有简历,做"JD 拆解 + 简历定向改写"。拆 JD 抽出硬技能、软技能、加分项;对照简历做 gap 分析;产出针对该岗位重写后的简历,突出相关经验、补齐关键词缺口、并保留候选人真实经历不编造。当用户说"针对这个岗位 / 这家公司改简历""帮我对一下这个 JD""我想投这个职位你看怎么改""把这份简历针对 X 公司优化""做一份定向版简历",或同时给出 JD 文本 +…

    107 GitHub stars~714 tokensUpdated 1 mo ago
    Auto-check passed
  • Job Intent Tracker

    Ali-Marandi/Web-Scraper-Framework

    帮助用户梳理求职意向、生成目标岗位画像,并维护一份结构化的"岗位投递追踪表"。当用户说"我想换工作 / 不知道投什么岗 / 帮我看看我适合什么岗位 / 帮我管理投递进度 / 我投了好几家但记不住状态了 / 想做一个求职 OKR / 整理一下求职方向",或上传简历但没说要改简历时,应该主动触发本 skill。本 skill 也适用于实习生、应届生、转行候选人在求职启动阶段做"自我盘点 +…

    107 GitHub stars~819 tokensUpdated 1 mo ago
    Auto-check passed
  • Resume Builder

    Ali-Marandi/Web-Scraper-Framework

    从零生成或全面优化一份中文简历,并导出 docx / pdf / markdown 多种格式。用 STAR 法则改写经历、做 ATS 关键词覆盖率检查、根据行业(互联网产品 / 技术 / 金融 / 通用)选模板。当用户说"帮我写简历 / 优化简历 / 简历不会写 / 我的简历太弱了 / 简历看起来不专业 / 简历改一改 / 给我做个简历模板 / 简历导出 / 简历加点关键词",或者上传…

    107 GitHub stars~740 tokensUpdated 1 mo ago
    Auto-check passed
  • Dream Interpreter

    Ali-Marandi/Web-Scraper-Framework

    AI 解梦大师。用户描述梦境,智能追问关键细节后,从三个视角(周公解梦/心理分析/赛博神棍)生成解读,输出结构化 JSON 供前端渲染"梦境解析卡"。

    107 GitHub stars~406 tokensUpdated 1 mo ago
    Auto-check passed

Works with

Questions about Image Edit

What does Image Edit do?

Implement AI image editing and modification capabilities using the z-ai-web-dev-sdk. Image Edit is an agent skill from Ali-Marandi/Web-Scraper-Framework. Implement AI image editing and modification capabilities using the z-ai-web-dev-sdk.

When should I use Image Edit?

Image Edit fits situations like: the user needs to edit existing images; create variations; modify visual content; redesign assets.

How do I install Image Edit in Claude Code?

Run `npx skills add Ali-Marandi/Web-Scraper-Framework --skill image-edit -a claude-code`. Or copy the skill folder (skills/image-edit in Ali-Marandi/Web-Scraper-Framework) into .claude/skills/image-edit in your project. Claude Code loads it when a task matches its description.

How do I install Image Edit in Codex?

Run `npx skills add Ali-Marandi/Web-Scraper-Framework --skill image-edit -a codex`. Or copy the skill folder (skills/image-edit in Ali-Marandi/Web-Scraper-Framework) into .agents/skills/image-edit in your project. Codex loads it when a task matches its description.

Can I use Image Edit in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Ali-Marandi/Web-Scraper-Framework --skill image-edit -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/image-edit, .gemini/skills/image-edit, .github/skills/image-edit and .opencode/skills/image-edit in your project.

What does Image Edit need to run?

Going by SKILL.md and its folder, Image Edit needs TypeScript for the scripts in its folder. Our summary lists: Node.js.

Does Image Edit access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Image Edit safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Image Edit use?

Image Edit is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Image Edit use?

About 6.2k tokens (SKILL.md is roughly 25k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Image Edit?

Skills that share tags, products or a category with Image Edit: AI Image Generation and Editing (zhayujie/CowAgent, 47k stars), Generate Image (ynulihao/AgentSkillOS, 617 stars), GPT Image Generation CLI (wuyoscar/GPT-Image2-Skill, 5.7k stars) and Image Generation (jjyaoao/HelloAgents, 3.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Image Edit?

Ali-Marandi (a GitHub user) maintains it in Ali-Marandi/Web-Scraper-Framework, which has 107 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on August 31, 2026.

Source: Ali-Marandi/Web-Scraper-Framework on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.