Designing and building a SaaS product end to end

Anyone shipping work has to show it on a screen — a pitch deck, a portfolio page, a launch post, an ad. Doing that properly means opening a design tool, finding a frame, fitting the screenshot, matching the background, exporting at the right size. It is twenty minutes of work that has nothing to do with the thing being shown, and it gets repeated for every image.

The tools that exist solve one half: either a template library with no product behind it, or a design app that assumes you already know how to use one.

Build the whole loop and keep it in the browser. Paste a URL or drop an image, pick a device, and the frame, the ground and the export size are already decided — with every one of them still open if you want to change it.

The constraint I held to throughout: the core loop stays free of ceremony. Upload, frame, style, download never asks you to configure anything first, and never asks you to upgrade to finish what you started.

• 01The brand — mark, wordmark, and a cream, ink and red palette that carries from the site into the product.
• 02The marketing site, written and designed around four audiences: designers, agencies, founders and marketers.
• 03The studio — real device frames rendered procedurally, with frame, arrange, style and export as four panes rather than one long form.
• 04The backend: URL capture, rendering, accounts, Google sign-in, Stripe subscriptions and a seven-day trial.