中文说明

AiClip turns a UI screenshot into a structured asset workflow: it can automatically annotate visual assets, slice them into an asset sheet, and redraw selected assets on a clean chroma background for transparent PNG export.

Current model support: this project currently targets gpt-5.5 for screenshot analysis and gpt-image-2 for image redraw / chroma asset generation.

• Automatic annotation for icons, illustrations, decorations, logos, avatars, and other pictorial UI assets.
• Automatic asset slicing from the uploaded screenshot into a generated asset sheet.
• Automatic redraw for ai-chroma assets, producing clean green-screen results that are post-processed into transparent PNG files.
• Manual review and adjustment for detected boxes, names, prompts, and asset processing mode.
• Two asset processing modes:
  • ai-chroma: default mode for icons, illustrations, decorations, and uncertain assets.
  • crop: direct crop for assets that should preserve original pixels, such as product images, banners, photos, avatars, logos, and screenshots.

Install Node and Python dependencies, configure .env.sample or .env.local, then run the dev server:

npm install
python3 -m pip install -r requirements.txt
npm run dev

AiClip uses the local Python script scripts/process_chroma_icons.py during asset generation to remove the green chroma background and export transparent PNG files, so python3 and Pillow must be available on the machine running the Next.js server.

You can either edit .env.sample directly for local testing or copy it to .env.local for private local secrets:

cp .env.sample .env.local

.env.local is ignored by Git. .env.sample is safe to commit as long as it only contains placeholder values.

Required variables:

BASEURL=https://your-api-host.example/v1
APIKEY=replace-with-your-api-key
AI_MODEL=gpt-5.5

IMAGE_BASEURL=https://your-image-api-host.example/v1
IMAGE_APIKEY=replace-with-your-image-api-key
IMAGE_MODEL=gpt-image-2

1. Upload a UI screenshot.
2. The app analyzes the screenshot and creates editable asset annotations.
3. Review or adjust boxes, asset names, prompts, and processing modes.
4. Generate assets.
5. Download the transparent PNG assets and manifest.

The downloaded zip includes:

• source.png / source.jpg: the original UI reference image.
• assets/: transparent PNG assets generated by AiClip.
• assets.json: asset metadata.
• prompt.md: a ready-to-use reconstruction prompt.

You can attach the package to your coding agent and reference prompt.md directly. The prompt says:

Use `source.png` as the original UI reference image and reconstruct the UI with this asset package.

Requirements:
- Recreate the overall layout, hierarchy, spacing, colors, typography, and visual proportions.
- For icons, illustrations, decorations, avatars, logos, product images, and other visual assets, prefer the files in the `assets/` directory.
- Do not replace packaged assets with an icon library or redraw them unless the package does not include the needed asset.
- Preserve each asset's transparent background, original proportions, and visual details.