🛠️ Day 19 – 10 Claude Artifacts to Build This Weekend

💡 What's a Claude Artifact? An interactive HTML page Claude builds inside the chat — with buttons, forms, charts, and local data storage. 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 → Interact in chat or click "Open in browser." Data saves in your browser via localStorage — private to you, no account needed.

🚀 Pro Move: After Claude builds it, iterate in the same chat: "make the buttons bigger," "add a dark mode toggle," "add a column for X." The artifact updates live.

🏆 The 5 Best Artifacts to Build First

#	Artifact	Build Time	Best For
1	Personal CRM	5 min	Daily relationship management
2	Habit Tracker	5 min	Daily check-ins + streak motivation
3	Decision Matrix	5 min	Any time you're stuck on a choice
4	Workout Logger	10 min	Mid-workout on your phone
5	Goal Accountability Dashboard	10 min	Weekly planning + progress tracking

👥 1. Personal CRM — Replace an $80/mo tool with one prompt

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

```javascript

Build me a Personal CRM as an interactive HTML artifact.

STRUCTURE

A single-page app with these sections, top to bottom:

HEADER — "My CRM" title + total contact count + count of "needs follow-up this week"

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"

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

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)

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

```</div></details>

🔥 2. Habit Tracker — The kind people pay $5/mo for

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

```javascript

Build me a habit tracker as an interactive HTML artifact.

STRUCTURE

HEADER — "My Habits" title + today's date + "X of Y habits done today" counter

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

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)

WEEKLY VIEW section

A 7-day grid showing all habits across the last 7 days. Quick-tap to toggle any cell.

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.

```</div></details>

⚖️ 3. Decision Matrix — Stop spiraling on hard choices

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

```javascript

Build me a Decision Matrix as an interactive HTML artifact.

STRUCTURE

DECISION FRAME

A field at the top: "I'm deciding..." (1-2 sentence input).

Below it: "Deadline" date picker (optional).

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

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

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"

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"

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?"

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.

```</div></details>

🏋️ 4. Workout Logger — The kind people pay $15/mo for

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

```javascript

Build me a Workout Logger as an interactive HTML artifact, designed for mid-workout use on a phone in the gym.

STRUCTURE

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)

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)

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.

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

REST TIMER

Auto-starts when I log a set. Default 90 seconds, configurable per exercise.

SESSION SUMMARY

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

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

```</div></details>

🎯 5. Goal Accountability Dashboard — Know when you're slipping before it's too late

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

```javascript

Build me a Goal Accountability Dashboard as an interactive HTML artifact.

STRUCTURE

HEADER

"My Goals" title
Today's date
Days remaining in current quarter
Overall progress score across all active goals

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)

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

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)

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)

WINS LOG

Every check-in where I made progress goes into a wins log. At quarter-end, generate a summary.

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.

```</div></details>

💡 What Makes Live Artifacts Different

Old Artifacts	Live Artifacts (Claude Cowork)
Frozen when you close the chat	Stays connected to your files + apps
Data resets each session	Pulls current data automatically on open
More like a report	A genuinely useful, persistent tool

Best live artifact setups to build today:

Sales pipeline connected to your CRM
Content calendar synced to your Drive
KPI dashboard that updates when your spreadsheet does

📌 CTA: Comment "build" below and get the setup for 3 live artifacts to configure today.