How this is different from a template picker
Template galleries show you a finished design and ask you to like it or not. This tool goes one layer deeper: each of the six directions below is based on a real, working photographer portfolio that was actually inspected (screenshots, live layout, computed colors, computed fonts), not a palette someone made up to look nice in a swatch. The Editorial direction, for example, uses EB Garamond because that is literally the typeface a real fashion photographer's site is set in, matched by inspecting the page directly.
Two patterns showed up almost everywhere across the real sites this was built from, and they're baked into every direction here: nav hidden behind a single hamburger icon with no visible link list, even on desktop, and one large image at a time rather than a grid. UI color stays close to zero throughout: the photography supplies the color, not the interface.
What you get at the end
A single, structured prompt covering the overall direction, exact hex colors, font names and pairing, page list, navigation behavior, gallery layout and image framing, which features to include, a hosting recommendation with real cost tradeoffs, and a fixed set of build-quality requirements (accessible alt text, responsive breakpoints, no hardcoded secrets, lazy-loaded images). Paste it into your AI coding app of choice and it has everything it needs to start.
From prompt to a live site: the full walkthrough
The prompt is the design brief, not the finish line. Here's every step between copying it and having a real URL you can put on a business card, free or close to it.
Copy the prompt and open an AI coding app
Claude, Cursor, Claude Code, Windsurf, or Replit's AI agent all work, anything that can write and save files for you, not just chat. If you've never used one, a browser-based option like claude.ai or Replit needs no install: paste the prompt as your first message.
Let it build, then actually look at what it made
Ask it to build the site as static HTML/CSS/JS (or whatever the hosting section of the prompt specified) and show you a preview. Check the six things the prompt asked for (colors, fonts, gallery behavior, nav, framing, pages) before you move on. It's much cheaper to fix a wrong accent color now than after photos are wired in.
Illustrative example: the real interface depends on which AI coding app you use.
Swap in your real photos, bio, and contact details
Replace every placeholder image and line of filler text. Ask your AI app to write a real, specific alt attribute for each photo as it goes, not "image1.jpg", an actual description, since that's both an accessibility requirement and a small SEO boost. This is also the point to double-check the contact form actually points at an email address you check.
Deploy it to a free host
If you picked the "Static & free" tier, ask your AI app to walk you through connecting the project's folder or GitHub repo to one of the hosts below. All three below build and deploy automatically every time you push a change; no manual upload step once it's connected.
$ deploy complete (12.4s)
$ site is live ✓
Illustrative example of what a hosting dashboard shows once you've connected a project; exact layout varies by host.
Connect a custom domain (optional, but worth it)
A free subdomain (like yourname.netlify.app) works fine to start. When you're ready for yourname.com, it's a domain purchase plus one DNS change, covered in detail further down.
Which free host should you use?
Any of these will get a static site live at no cost, with free HTTPS and a free tier that easily covers a personal portfolio's traffic. Free-tier limits change fairly often, so treat the numbers below as a general shape rather than exact current figures, and check each provider's own pricing page before you commit.
|
Netlify
Easiest for beginners
Visit
|
Vercel
Fast, dev-friendly
Visit
|
GitHub Pages
GitHub-native
Visit
|
Cloudflare Pages
Highest free limits
Visit
|
|
|---|---|---|---|---|
| How you deploy | Drag-and-drop a folder, or connect a GitHub repo | Connect a GitHub repo | Push to a repo, GitHub Actions builds it | Connect a GitHub repo |
| Free bandwidth | ~100GB/month | ~100GB/month | No hard cap for public repos | Unlimited |
| Build allowance | ~300 build minutes/month | Generous, thousands of minutes/month | Shared GitHub Actions minutes | ~500 builds/month |
| Custom domain + HTTPS | Free, automatic | Free, automatic | Free, automatic | Free, automatic |
| Best fit | First time deploying anything | JS-framework output (Next.js, etc.) | You already keep the code on GitHub | Want the most headroom before paying |
Ask your AI coding app to do the actual deploy steps with you: "connect this project to Netlify" is a completely normal thing to ask it, and it can usually walk you through account creation and the first deploy in a couple of minutes.
Connecting a custom domain
A domain is a small yearly fee (typically $10–20/year depending on the extension), separate from hosting, which stays free. The three pieces:
Every host above has a "Custom domain" or "Domains" tab that gives you the exact record to add, copy it in, add it at your registrar, and wait. DNS changes typically take minutes to a few hours to take effect, occasionally up to 24–48 hours. Your AI coding app can talk you through your specific registrar's dashboard if you get stuck; screenshot the settings page and ask it what to click.
| Type | Name | Value |
|---|---|---|
| CNAME | www | your-portfolio.netlify.app |
| A | @ | 75.2.60.5 |
Illustrative example of a DNS records table; your host's setup page gives you the exact values to use, which will differ from these.
Pre-launch checklist
Five minutes with this list catches most of what makes a portfolio look unfinished.
- Every photo has a real, specific alt description, not empty, not "image1.jpg"
- Checked the site at phone width (375px), tablet, and a wide desktop screen
- Sent yourself a test message through the contact form and it actually arrived
- A favicon is set, even a simple monogram beats the default blank tab icon
- Custom domain connected and the browser shows a padlock, not a "not secure" warning
- No leftover placeholder or lorem-ipsum text anywhere, including page titles
- Images are compressed: a single unoptimized photo shouldn't be multiple megabytes
- If you had an old portfolio link out there, it now redirects (or at least links) to this one
Frequently asked questions
No. You make visual choices, the tool writes a detailed prompt in plain English, and your AI coding app turns that into the actual site.
Each direction is based on a real, working photographer portfolio that was directly inspected, not invented from scratch, down to matching an exact font from a real site.
Yes, completely free, no signup or account required.
8–20 of your best images exported as optimized JPG or WEBP, a short bio, and a logo if you have one. The tool reminds you of this right above the copy button.
Once the site is live, cull the shoot behind it
imagic culls, scores, and batch-edits the photos that go in your new portfolio, locally, nothing uploaded. Free 7-day trial, no card required.