Personal Projects / 2026
AI Image Slicer
Reduced a repetitive design-production task from hours to minutes by detecting and extracting assets from composite mockups with 95%+ accuracy.
Design Highlights
Overview
AI Image Slicer is a web application that streamlines the designer workflow of extracting individual images and logos from composite mockup screenshots. Using AI-powered image analysis, it automatically detects boundaries, crops embedded images, and generates downloadable zip files, all in a few clicks.
Challenge
Designers frequently receive mockups containing multiple images, logos, and graphics embedded within a single screenshot. Manually identifying boundaries, cropping each element, and exporting individual files is tedious and time-consuming, often taking hours for complex mockups. This workflow bottleneck slows down design handoff and asset preparation.
Approach
Built a React-based web application using Cursor that uses AI to analyze uploaded mockup images. The system automatically detects visual boundaries between embedded elements, identifies individual images and logos, and crops them cleanly. The flow is three steps: upload a mockup, review the detected images, download everything as a zip.
Solution
Created a streamlined three-step workflow: upload mockup → AI scans and detects embedded images → download zip of cropped assets. The AI analyzes the composition, identifies distinct visual elements, and generates clean, properly cropped individual images. Users can review detected elements before downloading, ensuring accuracy and control over the final output.
Impact
Designers can turn a composite mockup into usable individual assets in minutes instead of spending hours identifying boundaries and cropping by hand. Detection accuracy above 95% and a review step keep corrections manageable while reducing manual effort by more than 90%. For design teams, the utility shifts time from asset preparation back to creative and product work and makes handoff preparation more predictable.
Key Learnings
AI can dramatically accelerate repetitive design tasks when properly scoped to specific workflows. Focusing on a narrow, well-defined problem (extracting images from mockups) rather than trying to solve all image processing needs was the right scoping decision. Simple, focused tools that save significant time have high adoption even without complex features. Providing visual feedback and user control over AI outputs builds trust and ensures quality.