[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80272":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":14,"forks30d":14,"starsTrendScore":13,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":14,"starSnapshotCount":14,"syncStatus":15,"lastSyncTime":26,"discoverSource":27},80272,"AiClip","shouzi23333-rgb\u002FAiClip","shouzi23333-rgb","Intelligently cut UI designs and download assets for easy page reconstruction.",null,"TypeScript",94,13,1,0,2,7,3.44,"Other",false,"main",true,[],"2026-06-12 02:04:00","# AiClip\n\n[中文说明](README.zh-CN.md)\n\n## Screenshots\n\n### Annotation Workspace\n\n\u003Cimg src=\"docs\u002Fscreenshots\u002Fannotation-workspace.png\" alt=\"Annotation workspace\" width=\"760\" \u002F>\n\n### Generated Assets\n\n\u003Cimg src=\"docs\u002Fscreenshots\u002Fgenerated-assets-zh.png\" alt=\"Generated assets\" width=\"420\" \u002F>\n\nAiClip 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.\n\n> Current model support: this project currently targets `gpt-5.5` for screenshot analysis and `gpt-image-2` for image redraw \u002F chroma asset generation.\n\n## Features\n\n- Automatic annotation for icons, illustrations, decorations, logos, avatars, and other pictorial UI assets.\n- Automatic asset slicing from the uploaded screenshot into a generated asset sheet.\n- Automatic redraw for `ai-chroma` assets, producing clean green-screen results that are post-processed into transparent PNG files.\n- Manual review and adjustment for detected boxes, names, prompts, and asset processing mode.\n- Two asset processing modes:\n  - `ai-chroma`: default mode for icons, illustrations, decorations, and uncertain assets.\n  - `crop`: direct crop for assets that should preserve original pixels, such as product images, banners, photos, avatars, logos, and screenshots.\n\n## Install\n\nInstall Node and Python dependencies, configure `.env.sample` or `.env.local`, then run the dev server:\n\n```bash\nnpm install\npython3 -m pip install -r requirements.txt\nnpm run dev\n```\n\nAiClip uses the local Python script `scripts\u002Fprocess_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.\n\n## Environment\n\nYou can either edit `.env.sample` directly for local testing or copy it to `.env.local` for private local secrets:\n\n```bash\ncp .env.sample .env.local\n```\n\n`.env.local` is ignored by Git. `.env.sample` is safe to commit as long as it only contains placeholder values.\n\nRequired variables:\n\n```env\nBASEURL=https:\u002F\u002Fyour-api-host.example\u002Fv1\nAPIKEY=replace-with-your-api-key\nAI_MODEL=gpt-5.5\n\nIMAGE_BASEURL=https:\u002F\u002Fyour-image-api-host.example\u002Fv1\nIMAGE_APIKEY=replace-with-your-image-api-key\nIMAGE_MODEL=gpt-image-2\n```\n\n## Workflow\n\n1. Upload a UI screenshot.\n2. The app analyzes the screenshot and creates editable asset annotations.\n3. Review or adjust boxes, asset names, prompts, and processing modes.\n4. Generate assets.\n5. Download the transparent PNG assets and manifest.\n\n## Using The Downloaded Asset Package\n\nThe downloaded zip includes:\n\n- `source.png` \u002F `source.jpg`: the original UI reference image.\n- `assets\u002F`: transparent PNG assets generated by AiClip.\n- `assets.json`: asset metadata.\n- `prompt.md`: a ready-to-use reconstruction prompt.\n\nYou can attach the package to your coding agent and reference `prompt.md` directly. The prompt says:\n\n```md\nUse `source.png` as the original UI reference image and reconstruct the UI with this asset package.\n\nRequirements:\n- Recreate the overall layout, hierarchy, spacing, colors, typography, and visual proportions.\n- For icons, illustrations, decorations, avatars, logos, product images, and other visual assets, prefer the files in the `assets\u002F` directory.\n- Do not replace packaged assets with an icon library or redraw them unless the package does not include the needed asset.\n- Preserve each asset's transparent background, original proportions, and visual details.\n```\n\n## Star History\n\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fsvg?repos=shouzi23333-rgb\u002FAiClip&type=Date)](https:\u002F\u002Fwww.star-history.com\u002F#shouzi23333-rgb\u002FAiClip&Date)\n","AiClip 是一个智能切割UI设计并下载资产以便于页面重构的工具。其核心功能包括自动标注图标、插图等视觉元素，将上传的截图切分为资产表，并对选定资产进行重绘以生成透明背景的PNG文件。该项目基于TypeScript开发，利用了`gpt-5.5`模型进行截图分析和`gpt-image-2`模型进行图像重绘及色键资产生成。适用于需要快速从UI设计中提取可复用资产的设计人员或开发者，特别是在构建新的界面或优化现有设计时。通过简单的上传-分析-调整-生成流程，用户可以轻松获取高质量的透明背景资产及其元数据，从而加速开发过程。","2026-06-11 04:00:06","CREATED_QUERY"]