15 Claude Artifacts to Build This Weekend

What's a Claude Artifact? An interactive HTML page Claude builds inside the chat. It can have buttons, forms, charts, and saves your data locally on your device. You're not building "an app" — you're getting Claude to build one for you in 30 seconds, then using it forever.

How To Use Each Prompt

Open claude.ai. Paste the prompt. Claude builds the artifact. Click "Open in browser" or interact with it inside the chat. Then publish it: hit Share, then Publish. You get a link you can open any time or pin to your phone. Publishing is also what lets your tool remember your data between visits. Before you publish, anything you type disappears when you close the tab, and Claude will not warn you. It needs a paid Claude plan, and it is the step most people miss.

Pro Move

After Claude builds the artifact, you can iterate in the same chat: "make the buttons bigger," "add a dark mode toggle," "add a column for [X]." The artifact updates live. Treat the prompt below as the starting blueprint — customize it as you go.

Build time: 5 minCheck monthly

Every airline mile, hotel point, and credit card reward in one place, with a rough cash value next to each one. No more logging into six sites to remember what you have. The real win is the expiration dates: points quietly die if you don't use them in time, and this flags the ones running out before they vanish.

Prompt — Points & Rewards Command Center

Build me a Points & Rewards Command Center as an interactive HTML artifact. Keep it to one file. Do not call any outside websites or APIs. WHAT IT TRACKS Each program is one row: - Program name - Type: airline / hotel / credit card / other - Points balance - What one point is roughly worth, in cents - Estimated cash value (calculate this for me automatically from balance and value per point) - Expiration date - Optional note THE TOP OF THE PAGE Three summary cards across the top: 1. Total cash value of everything I hold 2. How much value expires in the next 90 days 3. How many programs I'm tracking Under those, one plain sentence telling me what expires soonest and how many days I have left. THE LIST Every program underneath. Let me add rows, edit any cell by clicking it, and delete rows with a confirm step. Sort by soonest expiration by default, and let me click any column heading to sort by that instead. Add a search box that filters by name, and filter buttons for type. THE PART THAT MATTERS MOST Color the expiration date by urgency: red under 30 days, amber under 90 days, normal after that. Give any row expiring within 90 days a colored left edge so I catch it while scrolling. If nothing is expiring soon, say that in plain words instead of leaving an empty space. SAVING MY DATA Important: Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Use the artifact persistent storage API on window.storage to save and load my data, and load it once when the tool opens. Wrap every storage call so that if storage isn't available the tool still runs perfectly from memory and never crashes or shows an error. START ME OFF Preload three realistic example programs so I can see it working the second it opens, plus a clearly labeled button that wipes the examples when I'm ready to add my own. DESIGN - Warm and calm, not corporate. Accent color: red (#d02e2e). - Generous spacing, large readable text, big tap targets. - Mobile responsive. Reserve red and amber for the expiration warnings only, so they actually stand out. NICE-TO-HAVES - Export-to-CSV button so my data is never trapped - A column for each card's annual fee, so I can see which cards are earning their keep

Build time: 5 minCheck weekly

Your bills and your paydays on one calendar, with your balance running forward day by day. It's the cure for the "wait, why did I overdraft" panic: it tells you your tightest day of the month before you get there, instead of after.

Prompt — Cash-Flow Calendar

Build me a Cash-Flow Calendar as an interactive HTML artifact. Keep it to one file. Do not call any outside websites or APIs. WHAT I PUT IN First my current account balance and today's date. Then entries. Each entry has: - Name - Amount - Money coming in, or money going out - The day of the month it lands - Repeats every month, or happens once Let me add, edit, and delete entries, with a confirm step on delete. THE CALENDAR A real month grid with days of the week across the top. Each entry sits on its day. Money in is green, money out is red. If a day has several things on it, stack them and show that day's net change. Let me click any day to see everything on it. Let me move forward and back between months, with a button that jumps back to this month. THE RUNNING BALANCE This is the whole point, so get it right. Start from my current balance and walk forward day by day, adding income and subtracting bills in date order, and show what my balance will be on every single day. Draw it as a simple line under the calendar so I can see the shape of my month. THE MOMENT THAT MATTERS Find the lowest my balance drops during the month. Mark that day on both the calendar and the line, and put a plain sentence at the top like: "Your tightest day is the 26th, when you'll be down to $240." If the balance ever goes below zero, make that unmissable and tell me which day and by how much. SAVING MY DATA Important: Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Use the artifact persistent storage API on window.storage to save and load my entries, and load them once when the tool opens. Wrap every storage call so that if storage isn't available the tool still runs perfectly from memory and never crashes. START ME OFF Preload a realistic example month with two paydays and about six normal bills like rent, phone, and groceries, so I can see it working immediately. Give me a clearly labeled button to clear the examples. DESIGN - Calm and reassuring. This is money and it's stressful. Accent color: red (#d02e2e). - Big readable numbers, generous spacing, mobile responsive. - Never make me feel bad. State the facts plainly and let me plan. NICE-TO-HAVES - Let me set a cushion amount I never want to go under, and warn me on any day the projected balance falls below it - A line showing how much room I have on my tightest day, so I know exactly what to leave in the account

Build time: 5 minWeekly nudge

This is the personal one, for the people you actually love. It works out who you're overdue with and tells you who to text today. You add someone, put in the last time you talked, and realize it's been four months.

Want the work version instead? Build 6 below is the professional CRM, for contacts, companies, and follow-ups. Build this one for your people, that one for your career.

Prompt — Stay-In-Touch Tracker

Build me a Stay-In-Touch Tracker as an interactive HTML artifact. This is for my personal life, not work. Keep it to one file. Do not call any outside websites or APIs. WHO I ADD Each person has: - Name - How I know them: family / close friend / friend / mentor - The date I last actually talked to them - How often I want to be in touch: weekly / monthly / every 3 months / twice a year - Birthday - A running notes box Let me add, edit, and delete people, with a confirm step on delete. THE ONE THING I OPEN THIS FOR At the very top, before anything else, tell me who to reach out to today. Work out from the last-contact date and the rhythm I picked how overdue each person is, then show the three most overdue as cards with their name, how long it's been in plain words like "4 months ago," and a button that says I reached out. Tapping it sets today as the last contact date and moves them off the list. If I'm caught up with everyone, say something warm instead of showing an empty box. THE FULL LIST Everyone underneath, sorted by most overdue first. Show name, how I know them, when we last talked in plain words, and a small colored dot: green if we're on track, amber if they're coming due, red if overdue. Let me search by name and filter by how I know them. BIRTHDAYS A section listing every birthday in the next 30 days, soonest first, with how many days away each one is. If there are none, hide the section entirely rather than showing an empty heading. THE NOTES Each person's notes box is for what we last talked about, so I can pick up where we left off instead of starting cold. Show the most recent note right on their row so I see it before I reach out. SAVING MY DATA Important: Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Use the artifact persistent storage API on window.storage to save and load everyone, and load once when the tool opens. Wrap every storage call so that if storage isn't available the tool still runs perfectly from memory and never crashes. START ME OFF Preload four example people at different stages, including one who is badly overdue and one with a birthday coming up, so I can see exactly how it works. Give me a clearly labeled button to clear the examples. DESIGN - Warm and personal, like a notebook, not a sales tool. Accent color: red (#d02e2e). - Never use the words leads, pipeline, prospects, or contacts. These are people. - Soft colors, plenty of room, easy to read, mobile responsive. NICE-TO-HAVES - Export-to-CSV button so my list is never trapped - A place to note how they like to be reached, so I don't text someone who only ever picks up the phone

Build time: 5 minDaily during a search

Every application in one place: the company, the role, the pay range, who you talked to, and what's next. It opens with the follow-ups you've let slip, which is the thing that quietly costs people offers.

Prompt — Job Hunt Command Center

Build me a Job Hunt Command Center as an interactive HTML artifact. Keep it to one file. Do not call any outside websites or APIs. WHAT I TRACK Each application has: - Company - Role - Link to the posting - Salary range - Date I applied - Stage: saved / applied / phone screen / interviewing / final round / offer / closed - The person I've been talking to - Follow-up date - Notes box Let me add, edit, and delete applications, with a confirm step on delete. THE TOP OF THE PAGE A row of counts: how many are live right now, how many are at interview stage or beyond, how many offers, how many closed. Next to that, one plain sentence telling me what needs doing today, like "3 follow-ups are overdue." WHAT NEEDS ME TODAY Before the full list, a short section of anything slipping: applications where the follow-up date has passed, and anything sitting at "applied" for more than 14 days with no movement. Each one gets a button to mark it followed up, which pushes the follow-up date out a week. This is the section that stops things falling through the cracks, so put it where I can't miss it. THE FULL LIST Everything else underneath, grouped by stage so I can see my funnel, or as a flat list sorted by whichever column I click. Color the stages so I can scan without reading. Let me search by company or role, and filter by stage. THE NOTES Each application has a notes box for the questions I got asked, names I should remember, and what to prepare next. Keep everything about one company in one place so I'm never digging through email before a call. SAVING MY DATA Important: Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Use the artifact persistent storage API on window.storage to save and load my applications, and load once when the tool opens. Wrap every storage call so that if storage isn't available the tool still runs perfectly from memory and never crashes. START ME OFF Preload five example applications spread across different stages, including one overdue follow-up, so I can see how it works immediately. Give me a clearly labeled button to clear the examples. DESIGN - Calm and encouraging. Job hunting is stressful and this should lower the temperature, not raise it. Accent color: red (#d02e2e). - Plenty of white space, clear buttons, mobile responsive, since I'll check it everywhere. - Don't use alarming red for rejections. A closed door is just information. NICE-TO-HAVES - Export-to-CSV button so my search is never trapped - A simple count of how many applications it took to reach each stage, so I can see my real conversion rate

Build time: 5 minCheck monthly

Everything you own minus everything you owe, turned into one number. Save a snapshot each month and it charts the line. Watching that number move, even a little, is the part that keeps you doing it.

Prompt — Net Worth Tracker

Build me a Net Worth Tracker as an interactive HTML artifact. Keep it to one file. Do not call any outside websites or APIs. WHAT I PUT IN Two lists on one page. - Assets: name, category (cash / savings / investments / retirement / property / other), amount - Debts: name, category (credit card / student loan / car / mortgage / other), amount Let me add, edit, and delete items in both, with a confirm step on delete. THE NUMBER At the top, big and unmissable: my net worth, which is all assets minus all debts. Under it, two smaller numbers, total assets and total debts. Format with commas and no long decimals so it's readable at a glance. THE PART THAT KEEPS ME COMING BACK A button that saves a snapshot of today's number. Keep a list of every snapshot with its date, and draw a simple line chart of my net worth over time. Under the big number, show the change since my last snapshot as a clear plus or minus with both the amount and the percentage, green if up and red if down, plus how long it's been since I last checked. Once I have three or more snapshots, add one plain sentence about the trend, like "up $4,200 over the last 3 months." Don't show the chart until I have at least two snapshots. Show an encouraging line instead. THE BREAKDOWN A simple visual showing what my assets are made of by category, and the same for my debts, so I can see whether I'm concentrated in one place. SAVING MY DATA Important: Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Use the artifact persistent storage API on window.storage to save and load both my items and my full snapshot history, and load once when the tool opens. The snapshot history matters most, so make sure it's never lost. Wrap every storage call so that if storage isn't available the tool still runs perfectly from memory and never crashes. START ME OFF Preload a realistic example with a handful of assets and debts, plus three past snapshots a month apart so the chart has something in it and I can see the whole thing working. Give me a clearly labeled button to clear the examples. DESIGN - Calm and private. This is a sensitive number. It should feel like a quiet notebook, not a bank app shouting at me. Accent color: red (#d02e2e). - Big clear type, generous spacing, no clutter, mobile responsive. - Never judge the number or tell me whether it's good. Just show it accurately. NICE-TO-HAVES - Export my items and full snapshot history to CSV so my history is never trapped - Let me add a one-line note to each snapshot, so I remember what happened that month

Build time: 5 minDaily use

Track every important person in your life or work — last touchpoint, follow-up date, relationship strength, recent context. Nudges you when it's been too long. Replaces an $80/month CRM with one prompt.

Prompt — Personal CRM Artifact

Build me a Personal CRM as an interactive HTML artifact. STRUCTURE A single-page app with these sections, top to bottom: 1. HEADER — "My CRM" title + total contact count + count of "needs follow-up this week" 2. QUICK ACTIONS bar with buttons: - "+ Add Contact" (opens a form modal) - "Filter: All / Close / Warm / Cold / Needs Follow-up" - "Sort: Last touchpoint / Follow-up date / Name" 3. CONTACT CARDS grid (3 columns on desktop, 1 on mobile): For each contact: - Name (large, bold) - Role + Company - Relationship strength: 🟢 Close / 🟡 Warm / 🔵 Cold (color-coded card border) - Last touchpoint date + "X days ago" - Next follow-up date (highlighted red if overdue) - "How we met" (1 line) - Recent context (last 1-2 sentences I noted) - Tags (e.g., "VC, intro by Sarah, hiring engineers") - Edit / Delete buttons 4. ADD/EDIT MODAL with fields: - Name (required) - Role / Company - Email / Phone (optional) - Relationship strength dropdown - How we met (text area) - Last touchpoint (date picker, defaults to today) - Next follow-up (date picker, optional) - Notes (text area) - Tags (comma-separated) 5. "NEEDS FOLLOW-UP" SECTION at the top — auto-surfaces every contact whose follow-up date is today or overdue. Includes a "Mark Touched" button that updates last-touchpoint to today and clears the follow-up. DATA PERSISTENCE Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Save all contacts using the artifact persistent storage API on window.storage, and load them once when the tool opens. Wrap every storage call so the tool still runs from memory and never crashes if storage is unavailable. DESIGN - Clean, modern, minimal. Light background, dark text. Accent color: red (#d02e2e). - Inter or system-default font. - Cards with subtle shadow + 8px border-radius. - Mobile responsive: cards stack to one column under 768px. NICE-TO-HAVES - Search bar at top to filter contacts by name, company, or tag - Export-to-CSV button - Quick "Log Touchpoint" action that updates last-touchpoint without opening the full edit modal Build it, then ask me if I want to seed it with my first 3-5 contacts.

Build time: 5 minDaily check-in

A heatmap-style habit tracker with streak counters and visual progress. The kind people pay $5/month for — built and yours forever in 30 seconds.

Prompt — Habit Tracker Artifact

Build me a habit tracker as an interactive HTML artifact. STRUCTURE 1. HEADER — "My Habits" title + today's date + "X of Y habits done today" counter 2. HABITS LIST For each habit, show a row with: - Habit name (e.g., "Morning walk") - Today's checkbox (big, tappable, satisfies on click) - Current streak (🔥 with number) - Best streak ever - 30-day mini-heatmap to the right (5 rows × 6 cols of small squares, dark = done, light = missed) - Edit/delete icons 3. ADD HABIT button + modal - Habit name (required) - Frequency (Daily, Weekdays only, Custom days of week) - Target time of day (optional: morning / afternoon / evening / anytime) - Why this matters (optional, displayed on hover) 4. WEEKLY VIEW section A 7-day grid showing all habits across the last 7 days. Quick-tap to toggle any cell. 5. STATS PANEL at the bottom: - This week's completion rate (X out of Y possible check-ins) - Best habit this week (most consistent) - Worst habit this week (least consistent) - Total streaks active BEHAVIOR - Clicking today's checkbox should feel SATISFYING — brief animation, color change, streak counter ticks up. - If I miss a day, streak resets to 0 (don't try to be too forgiving — the streak should mean something). - Show a small celebration (confetti or color flash) when a habit hits a 7-day, 30-day, 90-day streak. DATA PERSISTENCE Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Save all habits and completion history using the artifact persistent storage API on window.storage, and load once when the tool opens. Wrap every storage call so the tool still runs from memory and never crashes if storage is unavailable. DESIGN - Clean, minimal. Dark mode default with optional light toggle. - Heatmap squares should feel like GitHub's contribution graph. - Mobile responsive: heatmap can scroll horizontally on small screens. NICE-TO-HAVES - "Mark all done" button for late-night catch-ups - Reminder for habits not done by 8pm (visual pulse on the row) - Export streaks to a shareable image Build it, then ask me what 3 habits I want to start tracking.

Build time: 5 minUse any time you're stuck

Drop in a decision. Add 2-5 options. Add the criteria you actually care about with weights. Score each option. Get a clear winner with the math shown. Stops you from spiraling.

Prompt — Decision Matrix Artifact

Build me a Decision Matrix as an interactive HTML artifact. STRUCTURE 1. DECISION FRAME A field at the top: "I'm deciding..." (1-2 sentence input). Below it: "Deadline" date picker (optional). 2. OPTIONS A row of cards (2-5 options, user can add/remove): - Option name (e.g., "Take the new job") - Quick description (1-2 lines) - Add Option / Remove Option buttons 3. CRITERIA A row of criteria the user adds (3-7 typical): - Criterion name (e.g., "Compensation," "Growth potential," "Location") - Weight slider (1-10, higher = more important) - Default to: Cost, Speed, Risk, Reversibility — user can edit/replace 4. SCORING GRID A table with options as rows and criteria as columns. Each cell: - A score from 1-10 (slider or click-to-set) - A small notes field for "why I scored this way" 5. WEIGHTED RESULT At the bottom, a live-calculated weighted score for each option: - Visual bar chart showing relative scores - Winner option highlighted in green - Show the math: "Option A: (8×9) + (6×7) + (9×5) = 159" 6. SECOND-ORDER QUESTIONS After scoring, surface 3 questions to pressure-test the result: - "What would have to change for the loser to win?" - "Is the weight on [highest-weighted criterion] right?" - "Is there a hidden criterion you haven't named?" 7. SAVE DECISION Button to save this matrix as a "completed decision" with date. Build a small history at the bottom: every decision I've made with this tool, the option I picked, and a "revisit" button to check my reasoning later. BEHAVIOR - Scores update the weighted total in real time. - If two options are within 5% of each other, surface: "These are functionally a tie — what's the tie-breaker?" DATA PERSISTENCE Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Save my matrices using the artifact persistent storage API on window.storage so I can revisit past decisions, and load once when the tool opens. Wrap every storage call so the tool still runs from memory and never crashes if storage is unavailable. DESIGN - Clean grid layout. Light background, clear typography. - Use color to signal: green for winner, red for biggest gap to winner. - Mobile responsive: criteria collapse into expandable sections under 768px. Build it. Then ask me what decision I want to run through it first.

Build time: 10 minPer-trip use

Drop in a city + dates + your preferences. Get back a day-by-day plan you can actually follow — with morning, afternoon, and evening blocks. Plus a packing list and a budget tracker.

Prompt — Travel Itinerary Artifact

Build me a Travel Itinerary Builder as an interactive HTML artifact. STRUCTURE 1. TRIP HEADER - Destination (city, country) - Dates (start + end, calculates trip length) - Travelers (solo, couple, family with kids' ages, group size) - Vibe (chill / packed / mix — affects pace) - Budget (per day or total) - Travel preferences (foodie, museums, outdoors, nightlife, shopping, history, nature, off-the-beaten-path) - Mobility constraints (lots of walking ok? need taxis? wheelchair accessible?) 2. DAY-BY-DAY PLAN For each day, generate a card with: - Day number + date + day of week - MORNING block (8am-12pm): activity + 2-3 sentences on why - AFTERNOON block (12pm-5pm): activity + lunch suggestion - EVENING block (5pm-late): activity + dinner suggestion - Estimated cost for the day - "Pace" meter: relaxed / moderate / packed - Edit button to swap any block 3. BUDGET TRACKER Sidebar showing: - Total estimated trip cost (sum of all days) - Cost per day average - Remaining vs. stated budget - Color-coded (green if under, yellow if close, red if over) 4. PACKING LIST Auto-generated based on trip length, climate, and activities. Categorized: - Clothing (with quantities based on trip length) - Toiletries - Tech (chargers, adapters for the country) - Documents (passport, copies of reservations, etc.) - Activity-specific gear Each item: checkbox to mark "packed." 5. RESERVATIONS LOG Place to paste flight numbers, hotel confirmations, restaurant bookings. Sorted by date. 6. FREE TIME / FLEX For each day, leave 1-2 hours unscheduled. Show as "Wander time" so I'm not stuck on rails. BEHAVIOR - Each activity block should be specific (named restaurant, named museum) not generic ("eat lunch") - If two activities are far apart, suggest the right way to get between them - Flag opening hours if relevant (e.g., "Closed Mondays") - If anything requires advance booking (popular restaurant, sold-out attraction), flag it on the day DATA PERSISTENCE Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Save trips using the artifact persistent storage API on window.storage, and load once when the tool opens. Wrap every storage call so the tool still runs from memory and never crashes if storage is unavailable. Show a "My Trips" sidebar with past and upcoming. DESIGN - Magazine-feel. Beautiful typography. Use a hero photo for the destination at the top. - Color palette: warm, travel-inspired (cream, sand, terracotta, navy). - Mobile responsive: day cards stack vertically on phones. Build it. Then ask me where I'm going first.

Build time: 10 minPhoto + prompt

Snap a photo of your fridge or pantry. Get back 3 dinner ideas using what you have, plus a grocery list for the 2-3 things you're missing. Stops the "what's for dinner" spiral.

Prompt — Recipe Generator Artifact

Build me a Recipe Generator as an interactive HTML artifact. I'll attach a photo of my fridge / pantry / countertop and you'll generate 3 dinner ideas + grocery list. STRUCTURE 1. SETUP (FIRST USE) Ask me before generating recipes: - Dietary restrictions (vegetarian, vegan, gluten-free, dairy-free, allergies) - Foods I refuse to eat - How many people I'm feeding - Cooking skill (5-min meals / 30-min meals / I love to cook) - Equipment I have (oven, stove, instant pot, air fryer, grill, microwave only) - Cuisines I love (Italian, Mexican, Thai, etc.) Save in a "PROFILE" section at the top of the artifact. 2. UPLOAD AREA Big drop zone: "Drop a photo of your fridge or pantry." Accepts photos. 3. INGREDIENT INVENTORY After photo analysis, list every visible ingredient with: - Item name - Estimated quantity (rough) - Approximate freshness (fresh / use soon / questionable) Let me edit the list (add things you missed, remove things you got wrong). 4. 3 RECIPE CARDS Each card: - Recipe name (specific, not "chicken stir fry") - Total time (prep + cook) - Difficulty level - What's used from my fridge (highlighted) - What I need to grab (small list) - Full ingredient list with measurements - Step-by-step instructions (numbered, concise) - Estimated cost for missing ingredients - "Why this recipe" (1 line on what makes it work tonight) 5. CONSOLIDATED GROCERY LIST If I pick a recipe, generate a clean grocery list for ONLY the missing ingredients. Sorted by store section (produce, dairy, pantry, meat). 6. USE-IT-UP MODE If anything in my fridge is "use soon" or "questionable," suggest a recipe specifically built around using those items first. BEHAVIOR - Recipes should feel real, not generic. Specific seasoning, technique, finishing touch. - If I have a half-bottle of wine, half a jar of capers, leftover rice — build a recipe that USES the half-eaten things, not pristine new ingredients. - Recipes should respect my skill level and equipment. DATA PERSISTENCE Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Save my profile and the last 5 generated recipes using the artifact persistent storage API on window.storage, and load once when the tool opens. Wrap every storage call so the tool still runs from memory and never crashes if storage is unavailable. DESIGN - Warm, kitchen-y feel. Cream background, deep red accents, clean typography. - Recipe cards feel like a polished cookbook. - Mobile responsive: works while I'm in the kitchen on my phone. Build it. Then prompt me to upload a photo of my fridge.

Build time: 5 min3 minutes a day

Type 3 lines a day. Claude tracks patterns, surfaces themes, asks better questions over time. Therapy-adjacent, not therapy. The journal that pays attention.

Prompt — Journal + Mood Tracker Artifact

Build me a Daily Journal + Mood Tracker as an interactive HTML artifact. STRUCTURE 1. TODAY'S ENTRY At the top: - Date (auto-filled with today) - Mood slider (1-10) with emoji feedback - Energy slider (1-10) - Sleep last night (hours + quality 1-10) - Stress level (1-10) - 3-line free-form text box: "What's true today?" - "Save Entry" button 2. RECENT ENTRIES Below today's entry, show the last 7 days as small cards: - Date - Mood emoji - First line of text - Click to expand the full entry 3. WEEKLY PATTERNS A panel showing: - This week's mood/energy trend (line graph) - Best day this week + what I wrote - Hardest day this week + what I wrote - One pattern detected (e.g., "Mood drops on Mondays" or "Energy is highest after gym days") 4. MONTHLY VIEW A heatmap calendar of the last 30 days, color-coded by mood. Click any day to see the entry. 5. THEMES Once I have 14+ entries, surface: - Recurring topics (work, family, health, money, specific people) - Words that appear often - Emotional patterns I might not see 6. BETTER QUESTIONS MODE If I'm stuck on what to write, give me a smart question based on my recent entries: - If I've been venting about work for 3 days: "What would have to be true for this to feel different?" - If I haven't mentioned sleep in 7 days: "How have you been sleeping?" - If something positive shows up: "Want to dig into what made today good?" BEHAVIOR - Don't perform empathy. Don't say "that sounds really hard." Just be a good listener: "I noticed [pattern]. Want to talk about it?" - Match my tone. If I'm flat, be flat. If I'm overwhelmed, be calm. - Never minimize. Never compare ("at least you have..."). Never give advice unless asked. DATA PERSISTENCE Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Save all entries using the artifact persistent storage API on window.storage, and load once when the tool opens. Wrap every storage call so the tool still runs from memory and never crashes if storage is unavailable. Privacy-first: my entries stay in my own artifact and are never sent anywhere. DESIGN - Soft, calming. Cream/off-white background. Generous white space. - One accent color (a muted blue or sage green — not bright red). - Mobile responsive: works on phone for nightly check-ins. SAFETY If I write about self-harm, suicidal thoughts, or being in crisis, surface this message at the top of the next response: "I want to make sure you have real human support. Please reach out to 988 (Suicide & Crisis Lifeline, US) by call or text. I'll still be here when you're ready — but please talk to a real person right now." Build it. Then ask me how today is going.

Build time: 10 minUse mid-workout

Log every set. Live progressive overload math. Last week's numbers shown next to today's. The kind of tool people pay $15/mo for — built and yours forever.

Prompt — Workout Logger Artifact

Build me a Workout Logger as an interactive HTML artifact, designed for mid-workout use on a phone in the gym. STRUCTURE 1. SESSION HEADER - Date - Workout name (Push / Pull / Legs / Upper / Lower / etc.) - Time started + elapsed timer - Total volume so far (sum of weight × reps across all sets) 2. EXERCISE CARDS For each exercise in today's workout: - Exercise name + planned sets × reps - Last week's actual numbers (smaller, dimmed, right side) - Today's set log (filling in as I tap) - NEXT SET TARGET (BIG, prominent — the number I read between sets) - Quick-tap buttons: - "Same as last set" - "+2.5 lbs" - "+5 lbs" - "−5 lbs" - "+1 rep" - Form cue (1 line, my own reminder from past sessions) 3. LOG SET FLOW When I tap "Log Set": - Weight (number input, defaulted to last set's weight) - Reps (number input, defaulted to target) - RPE 1-10 (slider, optional) - "Save Set" After save: show me the recommended NEXT set target based on progressive overload rules. 4. PROGRESSIVE OVERLOAD LOGIC After each set: - Hit reps at target RPE: same weight, same target next set OR +2.5lb if it's the last set of the exercise - Exceeded reps at low RPE: +5-10 lb next session - Missed reps OR RPE too high: repeat or back off 5-10% Show the reasoning in 1 line: "Last set 185x8 RPE 8. Hit reps under target RPE → +5 lb." 5. REST TIMER Auto-starts when I log a set. Default 90 seconds, configurable per exercise (compound: 2-3 min, isolation: 60-90s). 6. SESSION SUMMARY At end of workout: total volume, PRs hit, exercises that progressed, exercises that stalled. One-tap export to share or save. 7. HISTORY Past sessions list. Tap any to see the full log + numbers. BEHAVIOR - Optimized for sweaty thumbs. Big tap targets. Big numbers. - Dark mode default (gym lighting is harsh). - Auto-fill defaults so I'm not typing more than necessary. - Celebrate PRs with a quick visual flash. DATA PERSISTENCE Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Save all sessions using the artifact persistent storage API on window.storage, and load once when the tool opens. Wrap every storage call so the tool still runs from memory and never crashes if storage is unavailable. Show the last 4 weeks of history per exercise. DESIGN - Mobile-first. Phone-only optimized. - Dark background, high-contrast text. - One accent color for the NEXT TARGET callout. Build it. Then ask me my training program (split + current weights for key lifts).

Build time: 5 minWeekly use

Drop your "saved for later" pile in. Claude ranks each item by ROI to your current goals. Tells you what to read first, what to skip, what to revisit later. Stops the doom-save loop.

Prompt — Reading List Ranker Artifact

Build me a Reading List Ranker as an interactive HTML artifact. STRUCTURE 1. GOALS PANEL (top) A section where I define my current 90-day priorities (3-5 goals). These become the "filter" for ranking content. 2. ADD ITEM form: - URL or title - Type (Article / Podcast / Video / Book / Newsletter) - Source (publication / channel) - Estimated time to consume (minutes) - Manual notes (optional: why I saved it, what I expect to learn) 3. RANKED LIST Each item gets a score 1-10 against my current goals. Sort by: - ROI score (default) - Time to consume (shortest first, useful for busy weeks) - Date saved (oldest first, surface forgotten gems) - Type For each item, show: - Title + source + type icon - Time - ROI score (with reasoning on hover: "This ties to your 'sales skills' goal — specifically the negotiation framework") - Days since saved - Buttons: "Read Now" / "Skip" / "Mark Read" / "Move to Someday" 4. WHAT TO READ THIS WEEK section Surface 5-7 items based on: - Highest ROI scores - Time slots I told you I have this week - Variety (don't push 5 articles on the same topic) 5. RUTHLESS CULL MODE For items 30+ days old still unread: - "Read it now" / "File as someday-maybe" / "Let it go" Default toward "let it go." Most saved-for-later articles are not worth the guilt. 6. READ TRACKING When I mark something read, prompt: - "What's the one takeaway you want to remember?" (1 sentence) Save it tied to the item. Build a "Past Insights" panel I can search. 7. SOURCE BALANCE Once I have 30+ items: surface a panel showing % of consumption by source/topic. Flag if I'm in an echo chamber. BEHAVIOR - Be ruthless. Default to "skip" when in doubt. - If nothing in my queue is worth this slot, say so: "Nothing here is worth your 30 minutes today. Take a walk." - Don't pad recommendations to seem helpful. DATA PERSISTENCE Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Save my list, goals, and read history using the artifact persistent storage API on window.storage, and load once when the tool opens. Wrap every storage call so the tool still runs from memory and never crashes if storage is unavailable. DESIGN - Clean, library-feel. White background, serif headers, sans body. - Color-code by ROI: green (high), yellow (medium), gray (low). - Mobile responsive: list stacks vertically on phone. Build it. Then ask me to define my top 3 priorities for the next 90 days.

Build time: 10 minWeekly check-in

Add 3-5 goals with deadlines. Weekly check-ins. Visual progress bars. The artifact tells you when you're slipping — before it becomes a problem.

Prompt — Goal Dashboard Artifact

Build me a Goal Accountability Dashboard as an interactive HTML artifact. STRUCTURE 1. HEADER - "My Goals" title - Today's date - Days remaining in current quarter - Overall progress score across all active goals 2. ADD GOAL form: - Goal name (specific, not "exercise more") - Why this matters (1-2 sentences) - Deadline (date) - Success criteria (what does "done" look like, quantitatively) - Weekly milestone (what should I have done by end of each week) - Category (Career / Health / Finance / Relationships / Personal Growth) 3. GOAL CARDS grid For each active goal: - Goal name - Category icon - Progress bar (% to deadline + % to success criteria) - Days until deadline - Last check-in date + how I rated my progress - Trend arrow (gaining ground / on track / falling behind) - "Check In" button 4. WEEKLY CHECK-IN FLOW When I click "Check In" on a goal: - "What did you do this week toward [goal]?" (text) - "On a scale of 1-10, how on-track do you feel?" (slider) - "What got in the way?" (text, optional) - "What's the ONE thing to do this coming week?" (text) - Save and update the progress bar. 5. SLIPPING DETECTOR The artifact watches each goal. If I've missed 2+ weekly check-ins OR rated myself below 5/10 for 2 weeks in a row, surface a "You're slipping" panel: - Which goal - What I last said was getting in the way - The smallest possible next step to recover momentum - A draft email to a friend/accountability partner asking for support (Note: artifacts can't actually send email — this generates a draft you can copy and send manually.) 6. WINS LOG Every check-in where I made progress goes into a wins log. At quarter-end, generate a summary of every win, sorted by goal. 7. QUARTERLY REVIEW On the last day of each quarter (March 31, June 30, etc.), prompt: - Which goals hit? - Which didn't? - What patterns showed up? - What goals matter for next quarter? BEHAVIOR - Be honest about progress. Don't inflate. - If a goal hasn't been touched in 21+ days, ask: "Is this still a real goal? Or is it time to pause or drop it?" - Encourage smallest-possible next steps when I'm stuck. DATA PERSISTENCE Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Save my goals, check-ins, and wins log using the artifact persistent storage API on window.storage, and load once when the tool opens. Wrap every storage call so the tool still runs from memory and never crashes if storage is unavailable. DESIGN - Motivating but not cheesy. Clean dashboard feel. - Use color to signal status: green (on track), yellow (slipping), red (at risk). - Mobile responsive: goal cards stack on phone. Build it. Then ask me what 3 goals I want to set up.

Build time: 10 minPhoto + prompt

Photo of your closet. Get back outfit ideas for any event using only what you already own. Stops you from buying clothes you have versions of and stops the "I have nothing to wear" spiral.

Prompt — Personal Stylist Artifact

Build me a Personal Stylist as an interactive HTML artifact. I'll attach photos of my closet (or specific sections of it) and you'll catalog my clothes and generate outfits for events. STRUCTURE 1. SETUP (FIRST USE) Ask me: - Sex / typical sizing (so suggestions match my body) - Style words I'd use to describe my taste (e.g., "minimal," "preppy," "elevated casual") - Climate I live in (so I know what season we're working in) - Colors I love / avoid - Any items I'm willing to wear / never wear (e.g., "no shorts ever," "love a midi dress") - Lifestyle (mostly office, mostly casual, mix, lots of events) Save in "PROFILE." 2. UPLOAD CLOSET Drop zone: "Photo of your closet (or sections of it)." Accepts multiple photos. 3. WARDROBE INVENTORY After photo analysis, catalog every visible item with: - Type (top / bottom / dress / outerwear / shoes / accessory) - Color - Pattern (solid / stripe / floral / etc.) - Style (casual / business / formal / loungewear) - Season (year-round / cold-weather / warm-weather) Let me edit the inventory (add things you missed, remove duplicates, correct categories). 4. EVENT INPUT A field where I type the event: - "Brunch with friends on Sunday, casual" - "Client dinner Thursday, business casual, restaurant in the city" - "Long-haul flight Tuesday, want to look put-together but be comfortable" - "Beach wedding in Mexico, flexible dress code" 5. OUTFIT SUGGESTIONS Generate 3 outfit options using ONLY items in my inventory: - Top + bottom + outerwear (if needed) + shoes + accessories - Why this works for the event (1 line) - What the outfit signals (vibe) - Confidence score (how sure you are it works) If I'm missing something specific (e.g., "no formal shoes for this event"), flag it: "Missing one piece — you don't have anything that pairs with this dress for a formal event. Consider [specific item] if you want to invest." 6. WORN LOG After I wear an outfit, mark it as worn (with date + event). Avoids re-suggesting the same outfit too soon. 7. WARDROBE GAPS Once I have 30+ items cataloged, surface gaps: - "You have 12 tops and 2 bottoms — you're top-heavy. Consider 2-3 versatile bottoms." - "Nothing in your closet works for a black-tie event. Plan for that." - "Lots of black/navy. Consider one statement color piece." 8. SHOPPING NO-LIST Surface items I already have versions of so I stop accidentally buying duplicates. BEHAVIOR - Suggest, don't dictate. If I push back, adjust. - Don't make me feel bad about anything in my closet. - If something doesn't suit my body type or style, just don't suggest it — don't critique. DATA PERSISTENCE Claude artifacts cannot use localStorage or sessionStorage. Do not use them. Save my profile, inventory, and worn log using the artifact persistent storage API on window.storage, and load once when the tool opens. Wrap every storage call so the tool still runs from memory and never crashes if storage is unavailable. DESIGN - Magazine / fashion-feel. Clean grid for outfit cards. Beautiful photography aesthetic. - Soft, neutral palette. - Mobile responsive: works while I'm getting dressed. Build it. Then ask me to upload my first closet photo.

15 Claude Artifactsto Build This Weekend

15 Claude Artifacts
to Build This Weekend