Trip Palette: the app that packs for your destination

Use the app right now 🧳

👉 cindyzhu.com.au/trip-palette

Type in a destination, your dates, and what you'll be doing. You get back:

• 🌦 The weather for your exact dates, and "typical weather for these dates" when your trip is months away (forecasts only see 16 days ahead, most versions of this app quietly break there, mine doesn't)
• 🎨 Destination photos with a four-color palette pulled straight from the landscape
• 👗 A packing list with real quantities, matched to the weather, the palette, and your activities

No sign-up, no keys, nothing to install. It runs on free, no-key APIs (Open-Meteo weather + geocoding, Wikimedia photos).

Download the full code 💾

👉 trip-palette-source.zip

The complete React project Claude built, with a README that walks you through everything. Inside:

• ⚛️ The whole app: the weather logic (including the months-ahead fix), the in-browser palette extraction, and the packing engine
• 📝 A README with run steps, deploy steps, and upgrade ideas
• 🆓 Zero API keys required, every data source is free

Run it on your machine 🛠

1. 💻 Unzip it, then open the folder in Claude Code or the Code tab in Claude Desktop (open Claude Desktop, click Code, choose Local, Select folder)
2. ▶️ Run npm install then npm run dev (no Node.js? just ask Claude: "check if Node is installed and install it if not")
3. 🌍 Want your own copy online? Run npx vercel with a free vercel.com account, Claude walks you through the login when the CLI asks

Make it yours ✨

This is the fun part, and the real lesson from the reel. Open the folder in Claude and ask for upgrades:

📷 Closet mode (my favourite).

Add a "my closet" step: I'll drop photos of clothes I own into a folder. Read them, tag each item by type and color, and rewrite the packing list to reference my actual clothes (like "your rust linen shirt works with swatch 2"), plus a short "gaps worth shopping" list.

🎫 Shareable palette card.

Add a share button that renders a boarding-pass style image: destination, dates, the four swatches with hex codes, and the top five packing items, sized for an Instagram story.

🧳 Carry-on mode.

Add a carry-on toggle that trims the list to carry-on limits and checks that every top pairs with every bottom inside the palette.

And when you restyle it, don't say "make it pretty". Find ONE design you genuinely love (editorial travel journals, vintage luggage tags, boarding passes), screenshot it, and tell Claude exactly what to take from it. Then iterate with a screenshot of every version:

Here's a screenshot of the current version.

KEEP: [what's working]
FIX: [what feels off, be visual and specific: spacing, size, color, alignment]
CUT: [anything unnecessary]

Only touch what I listed, then show me the updated version.

Anthropic's own Claude Code best practices recommend exactly this screenshot-driven loop, and Nielsen Norman Group found that visual references beat vague words like "clean" or "modern" every time. That loop is the difference between a build that looks designed and one that looks generated.

Why the app is smart, not just pretty 🧠

• 🎯 Complement, don't camouflage. The color notes suggest two neutrals plus one accent from the opposite side of the color wheel, because photographers pick outfit colors that pop against the landscape, not blend into it: see Marla Manes' outfit guide and these pairings. Literal matching makes you disappear into the background.
• 🧺 Real quantity math. The list uses the 5-4-3-2-1 method (created by Geneva Vanderzeil), roughly three tops per bottom (Anne McAlpin's ratio), and Rick Steves' cap of one week of clothes plus laundry.
• 🌦 Weather that maps to layers. Temperature bands follow the three-layer system (base for moisture, mid for warmth, shell for rain and wind). The 40% rain rule is the app's own honest house rule.
• 🦟 Real activity rules. On safari the app says earth tones and no blue or black, because tsetse flies are measurably drawn to those colors. Real constraints, not vibes.

Want to build yours from scratch? 🏗

The build order that works (each step is one prompt to Claude): sample-data version first, deploy the skeleton early, design pass on stable data, then make weather + location real, then photos + palette, then a human test. Start with this and build up:

Build a working first version of a React website called Trip Palette.

Goal: turn a trip into a packing plan.

Inputs: a destination, start and end dates, and optional activities (like hiking, safari, city walking).
Outputs: a weather summary for the dates, a four-color palette drawn from the destination's landscape, and a packing list with quantities.

First, check that Node.js 20+ is installed and install it if not. Then use realistic sample data for everything so the complete flow works end to end.

Keep it focused: no accounts, no checkout, no dashboard, nothing I didn't ask for. Run it locally and show me.

The links 🔗

🧳 The app: cindyzhu.com.au/trip-palette
💾 The code: trip-palette-source.zip
🤖 Claude: claude.com (Desktop Code tab or Claude Code, from the Pro plan)
🌦 Open-Meteo: open-meteo.com (weather + geocoding, free, no key)
🚀 Vercel: vercel.com (free hosting for your own copy)