AI Guides › Step-by-step guides
By Nigel Guy · 7 min read
Most people who try this ask Claude Code for "an app that checks the weather for my trip in March" and get back something that confidently shows a forecast. The trouble is that no free weather forecast reaches months ahead, so the app is either quietly showing today's weather, inventing numbers, or failing in a way that looks like success. The palette half has the same weakness: a colour scheme invented from the destination's name is a mood board, not the place.
The rule: forecast only what can be forecast, use past years for everything else, and take the colours from real photos you can see and credit.
The result is a small local web page. You type a destination and dates; it shows what that week has typically been like over recent years (or the real forecast, if the trip is close), a strip of five to seven colours pulled from actual photographs of the place, and a short packing list in those colours, with quantities, where every top works with every bottom.
| You need | Notes | Cost at time of writing |
|---|---|---|
| A paid Claude plan | Claude Code needs Pro, Max, Team, Enterprise or a Console (API) account. The free plan does not include it. | Pro is listed at $20 a month on claude.com (about £15 at time of writing); the UK checkout price is shown in pounds when you upgrade, so check it there |
| Claude Code | Installed from the official setup page (Step 1) | Included in the plan |
| Open-Meteo | Weather forecast, historical weather and place-name lookup. No API key for non-commercial use. | Free for personal use, within 10,000 calls a day |
| A photo source | Unsplash (needs a free developer key) or Wikimedia Commons (no key) | Free |
| Node.js | Only if Claude Code chooses a Node setup; it will tell you | Free |
Keep this personal. Open-Meteo's free tier is for non-commercial use; if you put the app on a site with ads or subscriptions, you need their paid licence.
On macOS, Linux or WSL:
curl -fsSL https://claude.ai/install.sh | bash
On Windows PowerShell, run irm https://claude.ai/install.ps1 | iex. Open a new terminal and run claude --version; a version number means it worked. Then:
mkdir trip-packer
cd trip-packer
claude
Paste this as your first message. Fill in the style line with how you want it to look, and the photo source you picked.
You are building a small personal web app that runs on my own computer. I am not a developer, so explain anything I need to do in plain steps.
GOAL
I enter a destination and travel dates. The app shows (1) what the weather is likely to be, (2) a colour palette taken from real photographs of that place, and (3) a packing list built in that palette.
INPUTS I WILL PROVIDE IN THE APP
- Destination (city or region)
- Start date and end date
- Trip type: [CITY / BEACH / HIKING / MIXED]
- Laundry available: [YES / NO]
WEATHER RULES
- Look up coordinates with the Open-Meteo geocoding API. If more than one place matches, let me pick.
- If the whole trip is within 16 days of today, use the Open-Meteo forecast API.
- Otherwise use the Open-Meteo historical (archive) API for the same calendar dates in each of the last [NUMBER, e.g. 10] years. Show typical daytime high, night-time low, rain days and wettest year as a range.
- Label the result clearly as "forecast" or "typical for these dates, based on past years". Never present past-year data as a forecast.
PALETTE RULES
- Fetch [5-8] landscape or street photos of the destination from [UNSPLASH with my access key in a .env file / WIKIMEDIA COMMONS with a descriptive User-Agent].
- Show the photos with the photographer credit and licence the source requires.
- Extract colours with the colorthief library, merge near-duplicates, and keep 5-7 colours. Mark which are neutrals and which are accents.
PACKING RULES
- Build a capsule list: quantities per item, mostly neutrals from the palette, one or two accent pieces.
- Every top should work with every bottom. Show the outfit count this produces.
- Adjust layers and footwear to the weather result and trip type. If laundry is NO, size quantities to trip length.
STYLE
Make the interface look like [YOUR STYLE, e.g. handwritten headings, muted sand and clay tones, lots of white space], not a stock dashboard.
HOW TO WORK
1. Before writing code, list the files you plan to create and anything I must set up (keys, installs). Wait for my OK.
2. Build it in small pieces: weather first, then photos and palette, then the packing list.
3. If an input or key is missing, stop and ask me rather than guessing or inventing data.
4. Tell me the exact command to start it and the address to open.
Before you say it is finished, check: is past-year data labelled as such, are photo credits visible, and does the list's outfit count match its quantities?
Fill in: trip-type options if you want different ones, the number of past years, your photo source, and your style line.
Claude Code asks permission before creating files or running commands. Read its plan before saying yes. Two things to check:
.env file Claude Code creates. Keep it out of chat. A new Unsplash app runs in demo mode at 50 requests an hour, plenty for one person.If you chose Wikimedia Commons instead, there is no key, but Wikimedia asks scripts to send a descriptive User-Agent with contact details and may block generic ones. The brief already asks for this.
Use the start command Claude Code gives you (often npm run dev or npm start) and open the address it prints, usually something like http://localhost: plus a port number.
Test with a place and month you have actually been to. If the app disagrees with your memory, ask it to show the raw numbers per year to see whether the data or the summary is wrong.
Ask for one change per message: "make accents only one item", "add a rain layer when more than a third of days were wet", "drop any colour under 5 per cent of the photo". Five changes at once hide which one broke the page.
| Check | What you should see |
|---|---|
| Date label | A trip months out says "typical for these dates" or similar, never "forecast" |
| Range, not a single number | Highs and lows shown as a spread across years |
| Photos | Real images of the place, each with a credit |
| Palette | Colours that you can see in the photos, not generic "beach blue" |
| Packing list | Quantities, plus an outfit count that adds up (3 tops × 2 bottoms = 6) |
| A wrong place | Typing "Paris" lets you choose between France and Texas rather than guessing |
.env, out of chat and out of any file you share.