shouzi23333-rgb/aiclip

AiClip is a web application that takes a screenshot of a user interface design and automatically extracts the individual visual assets, such as icons, illustrations, logos, and decorative elements, as separate transparent PNG image files ready for use in development. The workflow starts when you upload a UI screenshot. The app analyzes it using AI and draws labeled bounding boxes around each detected visual asset. You can review these detections, adjust the box positions, rename assets, and choose how each one should be processed before generating the final output. There are two processing modes: one that redraws the asset on a green screen background and then removes that background to produce a clean transparent PNG, useful for icons and illustrations that blend into the original design, and one that simply crops the original pixels directly, better for photographs, product images, and logos that should stay pixel perfect. After generating, you download a zip package that contains the original screenshot, all the extracted transparent PNG assets, a metadata file, and a ready made prompt you can hand to a coding AI assistant. That prompt instructs the assistant to reconstruct the UI using the provided assets, so the coding agent knows to use the actual extracted files rather than substituting generic icon libraries. You would use this when you receive a UI design screenshot, from a client, a design tool export, or somewhere online, and want to quickly extract its visual components for use in a coding project. The application is built with TypeScript and uses Python for the image processing step.