An AI-powered image editing application skill featuring StepFun API integration, a Flask backend, and a React frontend for high-quality photo restoration, portrait retouching, landscape grading, and style transfer.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install imagecraft-editor
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install imagecraft-editor using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is ImageCraft Editor?
The ImageCraft Editor skill is designed for developers building AI-powered image editing applications. By leveraging the advanced capabilities of StepFun step-image-edit-2 API via Openclaw Skills, developers can quickly implement high-value features like scratch removal, portrait skin smoothing, landscape grading, and artistic style transfers in their web apps.
This skill automates the creation of a full-stack project, combining a robust Flask backend with a modern React (Vite) frontend. It addresses real-world development challenges by providing pre-designed prompts, built-in image preprocessing workflows, and an elegant side-by-side image comparison UI.
ImageCraft Editor Use Cases
- Building custom AI photo editors, image restoration platforms, or creative web-based styling applications.
- Integrating StepFun image editing API capabilities into existing Flask and React codebases.
- Deploying localized photo processing services (such as '图片编辑网站' or old photo restoration portals).
- Creating high-performance image optimization pipelines with secure API proxying and client-side processing.
How ImageCraft Editor Works
- User Request Processing: The user initiates a project creation request for an AI image editor.
- Template Deployment: Openclaw Skills copies the pre-configured Flask backend and React frontend template directories into the workspace.
- Environment Setup: The backend directories are initialized, and local variables (such as the StepFun API Key and base URL) are configured.
- Image Upload & Preprocessing: The Flask backend receives uploaded images, converts non-RGB formats (such as RGBA or palette-based images) to RGB, and resizes them to a maximum of 2048px to optimize API payloads.
- StepFun API Call: The backend formats a POST request to StepFun's step-image-edit-2 endpoint with a tailored, high-performance English prompt, converting the processed image to base64.
- Client-Side Rendering: The React frontend displays the returned base64-encoded result via a sleek, interactive draggable before/after comparison slider.
ImageCraft Editor Setup
Set up the ImageCraft Editor application by following these configuration steps:
1. Initialize Project Structure
Copy the template assets into your project workspace:
mkdir -p backend/uploads backend/results
2. Configure Environment Variables
Copy the example configuration file and set your StepFun credentials:
cp backend/.env.example backend/.env
Edit backend/.env with your API credentials:
STEPFUN_API_KEY=your_actual_api_key
STEPFUN_BASE_URL=https://api.stepfun.com/v1
Note: If using a Step Plan subscription, update the base URL to https://api.stepfun.com/step_plan/v1.
3. Install Dependencies
Install backend Python packages and frontend Node dependencies:
# Install Backend dependencies
cd backend && pip install -r requirements.txt
# Install Frontend dependencies
cd ../frontend && npm install
4. Run the Development Servers
Start both services concurrently in separate terminals:
# Terminal 1: Start Flask Backend (Runs on port 5050)
cd backend && python app.py
# Terminal 2: Start Vite Frontend (Runs on port 5174)
cd frontend && npx vite --host 0.0.0.0
ImageCraft Editor Data Schema & Taxonomy
Directory Structure
The ImageCraft Editor skill configures its directory structure as follows:
| Directory/File | Description |
|---|---|
backend/uploads/ |
Stores temporary uploaded user images pending processing |
backend/results/ |
Stores the final processed images returned from the StepFun API |
backend/.env |
Secure local configuration file for StepFun API keys |
frontend/src/ |
Holds the React component hierarchy, including the slider view |
API Request Schema
Payload sent to the POST https://api.stepfun.com/v1/images/edit endpoint:
| Parameter | Type | Description |
|---|---|---|
model |
string | Set to step-image-edit-2 |
image |
string | Base64-encoded string of the preprocessed image |
prompt |
string | Crafted English instructions customized by feature trigger |
response_format |
string | Configured to b64_json |
ImageCraft Editor Advanced Features
- Smart Image Preprocessing: Automatically handles alpha-channel stripping (RGBA to RGB translation) and auto-downscales oversized images to 2048px on their longest side.
- Optimized Prompt Engineering: Uses pre-tuned, high-fidelity English prompts under-the-hood to ensure optimal rendering performance from the StepFun model even with Chinese UI input.
- Smooth UI Comparison: Utilizes CSS clipPath with an interactive HTML range slider for realistic before/after transitions on the web UI.
- Vite Proxy Integration: Pre-configured Vite configuration to proxy
/api,/uploads, and/resultscalls directly to the Flask backend, bypassing CORS constraints. - Multi-Style Options: Supports 8 unique visual styles including oil painting, watercolor, sketch, anime, cyberpunk, vintage film, Chinese ink wash, and pop art via Openclaw Skills configurations.
SKILL.md
Loading
Related Openclaw Skills
Dcard Content Extractor
A stealth browser-based Dcard post scraper designed to bypass Cloudflare and extract rich textual and media content smoothly.
Ancient Chinese Wisdom Engine (apply-china-wisdom)
An AI-powered cognitive engine that translates classical Chinese philosophy and strategy into structured, modern actionable decisions.
Global Market Briefing
An automated daily financial briefing tool that aggregates A-share market data and global news RSS feeds into beautifully formatted Markdown reports.
ymailink
A highly versatile terminal email client for sending, reading, and organizing emails, complete with AI automation.
Web Search
A versatile web search skill using DuckDuckGo to query web pages, news, images, and videos with highly flexible formatting and filtering options.
Morning Briefing
An automated workflow that aggregates A-share market trends and RSS news into custom Markdown digests and WeChat push notifications.
Featured*
