Day 19 – 10 Claude Artifacts to Build This Weekend

What it does: Tracks 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.

Build time: 5 minutes | Use: Daily

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.

What it does: Heatmap-style habit tracker with streak counters and visual progress. GitHub-style contribution graph for your daily habits.

Build time: 5 minutes | Use: Daily check-in

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 (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.

What it does: Drop in a decision. Add 2-5 options. Weight your criteria. Score each option. Get a clear winner with the math shown.

Build time: 5 minutes | Use: Any time you're stuck

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: every decision made with this tool, the option picked, and a "revisit" button to check reasoning later.

BEHAVIOR
- Scores update the weighted total in real time.
- If two options are within 5% of each other: "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.
- 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.

What it does: Log every set mid-workout. Live progressive overload math. Last week's numbers shown next to today's. Optimized for sweaty thumbs.

Build time: 10 minutes | Use: Mid-workout on your phone

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 recommended NEXT set target based on progressive overload rules.

4. PROGRESSIVE OVERLOAD LOGIC
After each set:
- Hit reps at target RPE: same weight OR +2.5lb if it's the last set
- Exceeded reps at low RPE: +5-10 lb next session
- Missed reps OR RPE too high: repeat or back off 5-10%
Show 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.

6. SESSION SUMMARY
At end: total volume, PRs hit, exercises that progressed, exercises that stalled.

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.
- 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).

What it does: Add 3-5 goals with deadlines. Weekly check-ins. Visual progress bars. Slipping detector catches missed check-ins before they become a pattern.

Build time: 10 minutes | Use: Weekly check-in

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)

5. SLIPPING DETECTOR
If I've missed 2+ weekly check-ins OR rated myself below 5/10 for 2 weeks in a row:
- Which goal is slipping
- What I last said was getting in the way
- The smallest possible next step to recover momentum
- A draft message to an accountability partner (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.

7. QUARTERLY REVIEW
On the last day of each quarter, prompt: which goals hit, which didn't, what patterns showed up, what goals matter next quarter.

BEHAVIOR
- Be honest about progress. Don't inflate.
- If a goal hasn't been touched in 21+ days: "Is this still a real goal? Or is it time to pause or drop it?"
- Encourage smallest-possible next steps when stuck.

DATA PERSISTENCE
Save goals, check-ins, wins log to localStorage.

DESIGN
- Motivating but not cheesy. Clean dashboard feel.
- 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.