Northform

AI product-photo studio SaaS

Description

Northform is a one-page marketing site for a made-up AI tool that turns a written prompt into product photos and ads for online shops. The hero types a prompt and builds a photo collage around a product, and every section after it is something to try: a relight demo, a dot globe, a pricing slider and an FAQ that answers like a chat.

Use it for:

a landing page for an AI image, design or content tool
a SaaS site that demos the product instead of describing it
a clean black and white starting point with one accent colour

Workflow

Open Claude Code
Install Claude Code, open a terminal in an empty folder and run claude. Pick Claude Opus 5.5 with the /model command.
Paste the prompt
Copy the prompt on this page and send it as your first message. Claude writes the HTML, CSS and JavaScript.
Add photos from Unsplash
Download product and lifestyle photos from Unsplash into an images folder. Ask Claude to convert them to WebP and place them.
Preview and fix
Ask Claude to start a local preview. Check light and dark mode on desktop and phone, then ask for one fix per message.
Publish
Upload the folder to any static host, such as GitHub Pages or Netlify, to share it.

Main prompt

Build a one-page marketing site for Northform, an AI studio that turns one written prompt into on-brand product photos and ads for online shops. Tagline: "Describe it. We'll shoot it."

Use plain HTML, CSS and JavaScript in three files, with Lenis smooth scroll. No framework.

Design: white and black with a light/dark toggle, white cards, thin dividers and Inter at weights 400 and 500 only. The only colour is a coral, pink and lilac gradient (#e5484d, #f08a8e, #c9c3f5), used only on things that are being made or are live: generate buttons, progress bars, the chosen plan and the footer wordmark.

Sections:
1. Loader: a prompt box draws itself, types the tagline and presses generate.
2. Hero: a pill navigation, then a prompt box types a prompt, presses generate and shrinks away while a floating collage of photo cards and chips builds around a product photo.
3. A logo marquee.
4. Problems: a spinning word wheel, with the prompt box typing the fix and a before and after card.
5. Product tabs: Brand kit, Relight (drag across a dot grid to relight the photo) and Every format.
6. How it works: four steps with small live previews and a progress line.
7. Work: photo tiles titled with their prompt; "Use this prompt" fills the prompt box at the bottom of the page.
8. Results: count-up numbers, quotes and photos on graph paper.
9. A dot globe with flight arcs between studio cities.
10. Pricing: an images-per-month slider that highlights the right plan, plus a monthly/yearly toggle.
11. An FAQ that works like a chat, with typing dots.
12. A final prompt box with chips and a generate button that opens a sign-up dialog, then a footer with a huge gradient "Northform".

Make it accessible, respect reduced motion, lazy-load WebP photos and only animate the sections that are on screen.