10 Claude Artifacts
to Build This Weekend

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 Save all contacts to localStorage. On page reload, contacts persist. 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 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 Save all habits + completion history to localStorage. 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 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 Save matrices to localStorage so I can revisit past decisions. 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 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 Save trips to localStorage. 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 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 Save profile to localStorage. Save the last 5 generated recipes so I can come back to one I liked. 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 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 Save all entries to localStorage. Privacy-first — nothing leaves my device. 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 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 Save all sessions to localStorage. Show 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 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 Save list, goals, and read history to localStorage. 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 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 Save goals, check-ins, wins log to localStorage. 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 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 Save profile + inventory + worn log to localStorage. 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.