Claude Artifacts Ideas and Prompts

ROLE: You are a careful front-end developer who builds single-file web apps.
CONTEXT: I am a freelancer named [YOUR_NAME] billing clients in [CURRENCY]. I have no coding skills.
TASK: Build an invoice generator. Left side: form with sender details, client name and address, invoice number, issue date, due date, up to 20 line items (description, quantity, unit price), tax rate in percent, and a notes box. Right side: live invoice preview with subtotal, tax and total. Add a Print button that shows only the invoice (use a print stylesheet, A4 and US Letter safe, 0.5 in margins). Edge cases: blank quantity counts as 0, negative prices allowed for discounts, round to 2 decimals, long descriptions wrap.
CONSTRAINTS: One self-contained file (React or HTML). No external API keys, no backend, no external network calls. Plain fonts only. Sample data clearly labeled and easy to clear.
OUTPUT: The complete file, then 3 lines on how to print or save as PDF.

ROLE: You are a front-end developer building a planning tool for creators.
CONTEXT: I post on [CHANNEL_LIST] about [TOPIC]. I plan about [POSTS_PER_WEEK] posts per week.
TASK: Build a monthly content calendar. Show a 7-column month grid with previous and next month buttons. Click a day to add a post: title, channel (dropdown from my list), format, status (idea, drafting, scheduled, published), and notes. Color-code by status and also show the status as text. Add a filter by channel and a list view for the month. Edge cases: several posts on one day show a '+N more' link, months with 5 or 6 weeks display correctly.
CONSTRAINTS: One self-contained file (React or HTML), no API keys, no backend. Export and Import as JSON. Works at 360 px width by switching to list view.
OUTPUT: The complete file and a short note on keeping a backup.

ROLE: You are a front-end developer building a study app.
CONTEXT: I am studying [SUBJECT] and want to review cards on a schedule.
TASK: Build a flashcard app. Screen 1: deck editor where I paste cards as 'front | back' lines, one per line. Screen 2: review mode that shows the front, then a Show Answer button, then 4 rating buttons: Again, Hard, Good, Easy. Use a simple spaced repetition rule: Again returns the card in the same session, Hard 1 day, Good 3 days, Easy 7 days, with intervals doubling after each Good or Easy. Show cards due today, cards remaining, and a session summary. Edge cases: no cards due shows a message with the next due date, blank lines are skipped, bad lines show which line number failed.
CONSTRAINTS: One self-contained file (React or HTML), no API keys, no backend. Add Export and Import as JSON. Be honest in the UI if progress cannot be saved.
OUTPUT: The complete file and a short note on the scheduling rule.

ROLE: You are a front-end developer building a personal finance tool.
CONTEXT: I want to track one month at a time in [CURRENCY] with categories I define.
TASK: Build a budget tracker. Setup: expected income lines and category budgets (such as Rent, Food, Transport). Main screen: add a transaction with date, amount, category, and note; a table of transactions with edit and delete; and a summary showing per category spent, budget, and remaining, with a bar that turns a warning color and shows the word 'Over' when spent exceeds budget. Show total income, total spent and net. Month selector. Edge cases: refunds as negative amounts, empty month, amounts with more than 2 decimals rounded.
CONSTRAINTS: One self-contained file (React or HTML), no API keys, no backend, no bank connections. Export to CSV and Export and Import JSON. Clearly state where data is kept and the risk of losing it.
OUTPUT: The complete file and a short note on backing up my data.

ROLE: You are a front-end developer who builds data visualization tools.
CONTEXT: I will paste or upload small CSV files of up to 1,000 rows with a header row.
TASK: Build a CSV to chart app. Input: paste text or choose a file. Parse the header, detect number and date columns, and show a preview of the first 10 rows. Controls: chart type (bar, line, pie), X column, Y column, optional group column, and aggregate (sum, average, count). Render the chart as SVG with axis labels, a title field, and a legend. Add Download as PNG or SVG if possible. Edge cases: quoted commas, blank cells, non-numeric values in a number column shown as a warning with the count skipped, more than 12 categories grouped into 'Other'.
CONSTRAINTS: One self-contained file (React or HTML), no API keys, no backend, no external chart libraries loaded from the network. Pre-fill labeled sample data.
OUTPUT: The complete file and a short note on the CSV format it expects.

ROLE: You are a front-end developer building a word game.
CONTEXT: Players guess a hidden [WORD_LENGTH]-letter word in 6 tries. I will supply my own word list.
TASK: Build a word guessing game. A text box lets me paste a word list (one per line, same length). The game picks a random word. Player types a guess and gets feedback per letter: correct place, wrong place, or not in the word, shown with a symbol and a color so it works without color vision. Show an on-screen keyboard that updates letter states. Messages for win and loss, with the answer revealed after a loss and a New Game button. Edge cases: repeated letters handled correctly (count each letter only as many times as it appears in the answer), guesses of the wrong length are rejected with a message, guesses must be in the list unless I turn that off.
CONSTRAINTS: One self-contained file (React or HTML), no API keys, no backend. Pre-fill 20 sample words. Keyboard and touch input both work.
OUTPUT: The complete file and a short note on adding a word list.