A Developer's Toolkit for Effortless Graphics

Let’s be honest: we’re developers, not graphic designers. Yet, we’re constantly judged by the visual quality of our work. Dealing with assets—creating mockups, finding placeholders, and cleaning up images—is a notorious time sink that pulls us away from writing code.

Over the years, I’ve abandoned complex design software entirely. My entire graphics workflow now runs on a handful of fast, free, and powerful websites. This isn’t just a list; it’s a system that solves specific problems at each stage of a project: Prototyping, Polishing, and Presenting.

Phase 1: Prototyping with Realistic Data — Picsum Photos

Every project starts with a layout, and every layout needs content. Using a generic gray box for an image is not only ugly, but it also fails to reveal how your design will handle real-world images of varying dimensions and colors.

Picsum Photos is the definitive solution for placeholder images. It’s an API that serves up beautiful, high-quality photos directly via a URL.

• How it Works: You simply construct a URL. https://picsum.photos/800/600 gives you a random 800x600 image. That’s it.
• Why it’s Essential: It’s perfect for testing responsive card layouts, building CMS prototypes before you have real content, and making your initial builds look polished enough for stakeholder review.

Pro-Tip: You can do more than just get random images. Add ?grayscale to the end of the URL for a black-and-white photo, or ?blur=2 to get an artfully blurred background image.

Phase 2: Polishing Assets with AI Magic — Cleanup.pictures

Someone sends you a product photo, but there’s a distracting object in the background. Or you have a great team photo, but want to remove a person who has since left the company. This used to require a Photoshop expert. Now, it takes ten seconds.

Cleanup.pictures is a tool that genuinely feels like magic. It uses a sophisticated AI model (a technique called “inpainting”) to remove any unwanted object, person, or text from your images.

• How it Works: Upload an image, brush over the object you want to remove, and the AI seamlessly reconstructs the background behind it.
• Why it’s Essential: It’s a lifesaver for cleaning up user-generated content, creating professional product shots from messy photos, or removing watermarks and distracting text.

Pro-Tip: After using Cleanup.pictures, run the resulting image through an optimization tool like Squoosh.app to ensure the file size is as small as possible before deploying to production.

Phase 3: Presenting Your Work Professionally — Shots.so

You’ve built a killer new feature. How do you share it? A raw, rectangular screenshot often looks unprofessional and fails to capture the context of your work.

Shots.so is the fastest way to make your screenshots and screen recordings look stunning. It wraps your media in a clean browser frame, adds a beautiful background, and gives you simple controls for padding and shadows.

• How it Works: Paste a screenshot or screen recording, choose a background, adjust the settings, and export.
• Why it’s Essential: Perfect for creating visuals for your landing page, blog posts, documentation, or for sharing progress on Twitter and Slack. It instantly elevates the perceived quality of your work.

Pro-Tip: Export your mockup with a transparent background. This gives you maximum flexibility to place it on any other background or marketing material later.

Bonus Phase: Composing & Sharing — OG Image Playground

When you share a link to your new project or blog post on social media, the preview image (the Open Graph or OG image) is critical. A generic or missing image looks unprofessional.

The Vercel OG Image Playground is a fantastic open-source tool for building these images. You can use HTML and CSS-like syntax to compose titles, add images, and create beautiful, on-brand social cards automatically. You can self-host it or use one of the many public instances.

• Why it’s Essential: It automates the creation of a key marketing asset and ensures your project looks great wherever it’s shared.

Your New Developer-Centric Graphics Workflow

• Need to build a layout? Prototype with realistic placeholders from Picsum.
• Need to fix a supplied image? Polish it with AI using Cleanup.pictures.
• Need to showcase your work? Present it professionally with Shots.so.
• Need to ensure links look great? Automate social cards with an OG Image Generator.

This toolkit empowers you to handle 99% of common graphics tasks without ever leaving the browser. Bookmark them and reclaim the time you used to spend fighting with design software.