Side projects rarely fail because of code. They stall because the "small" tasks around the code, like a landing page hero, a few blog thumbnails, or an app icon, take longer than expected. AI image tools can remove that friction, but only if you treat them like any other part of your toolchain: repeatable, versioned and cheap to rerun.
Here is the workflow I now use for every side project.
1. Write a one-paragraph visual brief
Before generating anything, write down the look you want in plain language: palette, mood, lighting, and two or three reference adjectives. Example: "flat illustration, warm off-white background, teal and coral accents, soft shadows, friendly and calm." Save it in your repo as design/brief.md. Every prompt you write later starts by pasting this paragraph, which keeps images consistent across weeks.
2. Keep prompts in version control
Create a prompts/ folder with one text file per asset: hero.txt, og-image.txt, empty-state.txt. When a result works, commit the prompt next to the exported image. When you redesign later, you can diff prompts the same way you diff CSS. This sounds like overkill until the day you need "the same style, but for a new feature page."
3. Separate drafts from finals
Use a fast, inexpensive model for exploration: ten quick variations to find a composition. Only once you like a direction should you rerun it at higher quality and resolution. Before committing to a tool, check the cost per image on a page like Nano Banana 2.1 pricing so you know what a full asset set will cost. For most side projects, a few dollars covers every image you need.
4. Standardize sizes up front
Decide your output sizes once:
- Hero: 1600x900
- Open Graph: 1200x630
- Blog thumbnail: 1000x420
- Icon: 1024x1024, then downscale
Put the target aspect ratio in every prompt and note it in the filename. This avoids awkward cropping later.
5. Post-process with a script
Raw AI output is usually too large for the web. A short script using sharp or squoosh-cli can convert to WebP, resize to each breakpoint and strip metadata. Hook it into your build so every new image in assets/raw/ is optimized automatically.
npx sharp-cli -i assets/raw/*.png -o public/img/ resize 1600 --format webp
6. Review like code
Open a pull request for visual changes, even if you are the only reviewer. Look at the images in context on mobile and dark mode. Check for artifacts: warped hands, garbled text, odd edges. If something is off, adjust the prompt file, regenerate and commit again.
7. Keep a "known good" library
Over time you collect prompts that reliably produce good results. Turn them into templates with placeholders, such as {subject} in {brief}, and reuse them across projects.
Getting started
You do not need a complex setup. Open an AI image generator online, paste your brief plus a subject, and save both the prompt and the result into your repo. After two or three projects, you will have a small, reliable design system built from text files, and the images will stop being the bottleneck.
Top comments (0)