30 Claude Prompts That Build Working Web Apps

You are a senior front-end engineer who builds clean, practical business tools. <context> I need a working invoice generator built as one self-contained HTML file (HTML, CSS, and vanilla JavaScript inline) that runs and previews instantly as an artifact, with real state and live calculations. </context> <inputs> - Business / sender details to support: [NAME, ADDRESS, EMAIL, LOGO TEXT] - Currency and tax behavior: [E.G. USD, 8.5% TAX, OR VAT] - Line-item fields: [DESCRIPTION, QTY, UNIT PRICE] - Extras: [DISCOUNT, NOTES, PAYMENT TERMS, DUE DATE] - Visual style: [CLEAN MINIMAL / BOLD / CLASSIC] </inputs> <task> Build an invoice app with editable sender and client fields, a dynamic line-item table where I can add and remove rows, and live-calculated subtotal, tax, discount, and grand total that update on every keystroke. Add an auto-generated invoice number and date, a notes/terms field, a currency selector, and a "Print / Save as PDF" button that triggers window.print() with a print-optimized stylesheet so the on-screen controls are hidden when printing. </task> <constraints> - One self-contained HTML file, no external libraries or build step; vanilla JS only. - All math must be correct and reactive; format currency with the chosen symbol and two decimals. - Include a clean @media print stylesheet; keep state in memory (no backend). - Accessible labels on every input; sensible input types (number, date). </constraints> <format> Return the full HTML file as an artifact, then explain the data model you used for line items and how to add a logo upload. </format>

You are a front-end engineer who builds focused writing tools. <context> I need a split-pane markdown editor built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact, that parses markdown to HTML in real time. </context> <inputs> - Markdown features to support: [HEADINGS, BOLD/ITALIC, LISTS, LINKS, CODE BLOCKS, BLOCKQUOTES, IMAGES] - Extras I want: [WORD/CHAR COUNT, COPY HTML BUTTON, DARK MODE, LOCALSTORAGE AUTOSAVE] - Default sample content: [PLACEHOLDER TEXT OR "WELCOME GUIDE"] - Visual style: [NOTION-LIKE / IA WRITER / GITHUB] </inputs> <task> Build an editor with a textarea on the left and a rendered HTML preview on the right that updates live as I type. Implement a small markdown parser in vanilla JS covering the listed features (do not pull in a library). Add a toolbar with bold, italic, heading, and link buttons that wrap the current selection, a live word and character count, a "Copy HTML" button, a dark-mode toggle, and autosave to localStorage so my draft survives a reload. </task> <constraints> - One self-contained HTML file; no external libraries, no CDN — write the parser yourself. - Escape HTML in user input before rendering to avoid injection; render code blocks as escaped, monospaced text. - Responsive: stack the panes on narrow screens; accessible toolbar buttons. </constraints> <format> Return the full HTML file as an artifact, then explain how the parser handles edge cases and how to add table support. </format>

You are a front-end engineer who builds data-handling tools that run entirely in the browser. <context> I need a CSV viewer built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact, that parses pasted or uploaded CSV and renders it as an interactive table. </context> <inputs> - Input methods: [FILE UPLOAD AND/OR PASTE-INTO-TEXTAREA] - Delimiter handling: [COMMA, SEMICOLON, TAB, AUTO-DETECT] - Features I want: [COLUMN SORT, GLOBAL SEARCH, PER-COLUMN FILTER, ROW COUNT, EXPORT FILTERED CSV] - Sample data to preload: [SHORT CSV OR PLACEHOLDER] </inputs> <task> Build a tool that accepts a CSV by file upload and by pasting text, parses it (handle quoted fields containing commas and newlines), and renders a clean table with the header row pinned. Add a global search box that filters rows live, clickable column headers that toggle ascending/descending sort, a visible filtered-vs-total row count, and a "Download filtered CSV" button that re-serializes the visible rows correctly (re-quoting fields that need it). </task> <constraints> - One self-contained HTML file; no libraries — write the CSV parser and serializer yourself. - Correctly handle quoted fields, embedded commas, and escaped quotes; never break on a malformed cell. - Everything runs client-side; nothing is uploaded anywhere. Table scrolls with a sticky header. </constraints> <format> Return the full HTML file as an artifact, then explain how your parser handles quoted fields and how to add pagination for large files. </format>

You are a front-end engineer who builds developer utilities. <context> I need a JSON viewer and formatter built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact, that pretty-prints, validates, and lets me explore JSON as a collapsible tree. </context> <inputs> - Input: [PASTE-INTO-TEXTAREA, OPTIONAL FILE UPLOAD] - Views I want: [FORMATTED TEXT VIEW, COLLAPSIBLE TREE VIEW, MINIFIED OUTPUT] - Extras: [SYNTAX HIGHLIGHTING, COPY BUTTON, ERROR MESSAGE WITH LINE NUMBER, KEY/VALUE COUNT] - Theme: [LIGHT / DARK / BOTH WITH TOGGLE] </inputs> <task> Build a tool with an input pane and an output pane. On input, validate the JSON: if invalid, show a clear error with the position or line where parsing failed; if valid, render a pretty-printed, syntax-highlighted version and a collapsible tree where objects and arrays can expand and collapse. Add buttons to format, minify, copy the result, and toggle the theme, plus a small stat line showing the number of keys and the nesting depth. </task> <constraints> - One self-contained HTML file; no libraries — do parsing with JSON.parse and build the tree and highlighting yourself. - Escape all rendered values; never use innerHTML with raw user content. - Graceful, specific error messages; the UI must not break on invalid input. </constraints> <format> Return the full HTML file as an artifact, then explain how the collapsible tree is built and how to add JSONPath search. </format>

You are a front-end engineer who builds privacy-friendly, client-side media tools. <context> I need an image compressor built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact, that resizes and re-encodes images entirely in the browser using the Canvas API. </context> <inputs> - Accepted formats: [JPG, PNG, WEBP] - Controls I want: [QUALITY SLIDER, MAX WIDTH/HEIGHT, OUTPUT FORMAT SELECTOR] - Feedback to show: [ORIGINAL VS COMPRESSED SIZE, PERCENT SAVED, PREVIEW] - Style: [CLEAN UTILITY, DRAG-AND-DROP DROPZONE] </inputs> <task> Build a tool with a drag-and-drop dropzone plus file picker. When an image is added, draw it to a canvas, let me set a max dimension and a quality slider, choose the output format, and re-encode via canvas.toBlob(). Show the original size, the new size, the percentage saved, and a before/after preview. Add a "Download" button that saves the compressed file, and support compressing several images in a small queue. </task> <constraints> - One self-contained HTML file; no libraries — use Canvas and Blob APIs only. - Everything runs locally; no uploads. Revoke object URLs to avoid memory leaks. - Keep aspect ratio when resizing; handle large files without freezing the UI noticeably. </constraints> <format> Return the full HTML file as an artifact, then explain the canvas re-encode flow and how to add EXIF-orientation handling. </format>

You are a front-end engineer who builds dependable single-purpose utilities. <context> I need a QR code generator built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact, that turns any text or URL into a scannable QR code rendered on a canvas. </context> <inputs> - Content types to support: [PLAIN TEXT, URL, EMAIL, WIFI CREDENTIALS, VCARD] - Customization: [SIZE, FOREGROUND/BACKGROUND COLOR, QUIET-ZONE MARGIN, ERROR-CORRECTION LEVEL] - Download formats: [PNG, SVG] - Style: [CLEAN, LIVE PREVIEW AS I TYPE] </inputs> <task> Build a tool that generates a valid QR code from my input and updates it live. Include a content-type selector (text, URL, WiFi, vCard, email) that builds the correctly formatted payload for each type, color and size controls, an error-correction-level selector, and a download button for PNG and SVG. Implement the QR encoding yourself in vanilla JS — do not rely on an external CDN library, since the artifact must run offline. </task> <constraints> - One self-contained HTML file; no external/CDN libraries — include the QR generation logic inline. - The output must scan correctly with a real phone; render crisply at the chosen size. - Build proper payloads for WiFi (WIFI:T:...) and vCard formats; accessible form controls. </constraints> <format> Return the full HTML file as an artifact, then explain the encoding approach and how to add a logo overlay in the center. </format>

You are a front-end engineer with a security mindset who builds trustworthy utilities. <context> I need a password generator built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact, that creates strong random passwords entirely on-device. </context> <inputs> - Options to expose: [LENGTH SLIDER, UPPERCASE, LOWERCASE, NUMBERS, SYMBOLS, EXCLUDE AMBIGUOUS CHARS] - Modes: [RANDOM STRING / MEMORABLE PASSPHRASE (WORD-BASED)] - Feedback: [LIVE STRENGTH METER, ENTROPY IN BITS, COPY BUTTON] - Style: [CLEAN, REASSURING, DARK-FRIENDLY] </inputs> <task> Build a generator that uses crypto.getRandomValues for randomness (never Math.random). Support a random-character mode with toggles for character sets, length, and excluding look-alike characters, and a memorable-passphrase mode that joins random words from a small built-in word list with separators. Show a live strength meter and the estimated entropy in bits, a one-click copy button with a "copied" confirmation, and a regenerate button. Make clear in the UI that nothing leaves the browser. </task> <constraints> - One self-contained HTML file; no libraries; randomness via crypto.getRandomValues only. - Strength/entropy must be calculated correctly from the actual character pool and length. - Fully client-side; no network calls. Accessible controls and a focus-visible copy button. </constraints> <format> Return the full HTML file as an artifact, then explain how you compute entropy and how to add a 'pwned-password' offline-safe disclaimer. </format>

You are a front-end engineer and designer who builds color tooling. <context> I need a color picker and palette tool built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact, that lets me pick a color and generates a usable palette with copyable codes. </context> <inputs> - Pickers to include: [NATIVE COLOR INPUT, HEX FIELD, RGB SLIDERS, HSL SLIDERS] - Palettes to derive: [SHADES/TINTS, COMPLEMENTARY, ANALOGOUS, TRIADIC] - Extras: [CONTRAST CHECKER (WCAG AA/AAA), COPY-ON-CLICK, SAVED SWATCHES] - Style: [CLEAN DESIGNER TOOL] </inputs> <task> Build a tool where picking a base color updates HEX, RGB, and HSL in sync (editing any one updates the others). Generate a tint/shade ramp and harmony palettes (complementary, analogous, triadic) as clickable swatches that copy their HEX on click. Add a contrast checker that takes a foreground and background color and reports the ratio plus WCAG AA/AAA pass or fail for normal and large text, and a small saved-swatches strip. </task> <constraints> - One self-contained HTML file; no libraries — implement HEX/RGB/HSL conversion and contrast math yourself. - Color math must be accurate; the contrast ratio must match the WCAG formula. - Copy-to-clipboard with confirmation; accessible, keyboard-usable swatches. </constraints> <format> Return the full HTML file as an artifact, then explain the harmony math and how to export the palette as CSS variables. </format>

You are a front-end engineer who builds realistic product UIs with simulated data. <context> I need a URL shortener dashboard built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact. There is no real backend, so simulate one with localStorage and mock analytics. </context> <inputs> - Fields per link: [LONG URL, CUSTOM SLUG (OPTIONAL), CREATED DATE, CLICK COUNT] - Features: [CREATE LINK, AUTO-GENERATE SLUG, VALIDATE URL, COPY SHORT URL, DELETE, SEARCH] - Mock analytics: [PER-LINK CLICK COUNT, A SIMPLE TOTAL-CLICKS STAT, LAST-CLICKED TIME] - Brand vibe: [CLEAN SAAS DASHBOARD] </inputs> <task> Build a dashboard that lets me paste a long URL, optionally set a custom slug, validate it, and create a short link stored in localStorage. Show a table of links with the short URL, original URL, click count, and created date, with copy, delete, and a simulated 'open' action that increments the click count. Add a header with total-links and total-clicks stat cards, a search box, and persistence so links survive a reload. Make the empty state friendly. </task> <constraints> - One self-contained HTML file; no libraries; persist with localStorage. - Validate URLs and prevent duplicate custom slugs with a clear inline error. - Make explicit in a note that this is a front-end prototype (no real redirects); accessible table and forms. </constraints> <format> Return the full HTML file as an artifact, then explain the localStorage data shape and how to swap the mock backend for a real API. </format>

You are a front-end engineer who builds clean productivity tools. <context> I need a Pomodoro focus timer built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact, with accurate timing and session tracking. </context> <inputs> - Intervals: [FOCUS LENGTH, SHORT BREAK, LONG BREAK, ROUNDS BEFORE LONG BREAK — ALL ADJUSTABLE] - Features: [START/PAUSE/RESET, AUTO-ADVANCE TO NEXT PHASE, SESSION COUNTER, TASK LABEL] - Feedback: [PROGRESS RING, PHASE COLOR CHANGE, SUBTLE CHIME, TAB-TITLE COUNTDOWN] - Persistence: [REMEMBER SETTINGS AND COMPLETED COUNT VIA LOCALSTORAGE] </inputs> <task> Build a timer with adjustable focus/break durations and an SVG progress ring that depletes as time passes. Implement start, pause, and reset, auto-advance from focus to break and back with a round counter, an optional task label for the current session, a count of completed focus sessions today, a soft completion chime (generated with the Web Audio API, no asset files), and a live countdown mirrored in the browser tab title. Persist settings and the completed count in localStorage. </task> <constraints> - One self-contained HTML file; no libraries; timing must use timestamps (not naive setInterval drift) so it stays accurate. - Generate the chime with the Web Audio API — no external sound files. - Accessible controls; respect prefers-reduced-motion for the ring animation. </constraints> <format> Return the full HTML file as an artifact, then explain how you kept the timer drift-free and how to add desktop notifications. </format>

You are a front-end engineer who builds accurate financial tools. <context> I need a mortgage and loan calculator built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact, that computes payments and an amortization schedule correctly. </context> <inputs> - Inputs to expose: [LOAN AMOUNT, ANNUAL INTEREST RATE, TERM IN YEARS, EXTRA OPTIONAL FIELDS] - Extras: [DOWN PAYMENT, PROPERTY TAX, INSURANCE, EXTRA MONTHLY PAYMENT] - Outputs: [MONTHLY PAYMENT, TOTAL INTEREST, TOTAL COST, PAYOFF DATE] - Visual: [SUMMARY CARDS, AMORTIZATION TABLE, OPTIONAL PRINCIPAL-VS-INTEREST CHART] </inputs> <task> Build a calculator that computes the monthly payment using the standard amortization formula and updates live as I change inputs. Show summary cards for monthly payment, total interest, and total cost, and a month-by-month amortization table with payment, principal, interest, and remaining balance. Support an optional extra monthly payment and show the interest saved and the earlier payoff date. Draw a simple principal-vs-interest breakdown using a canvas or pure CSS bars (no charting library). </task> <constraints> - One self-contained HTML file; no libraries — implement the amortization math yourself and verify it balances to zero at the final payment. - Format currency and percentages cleanly; handle edge cases (0% rate, very short term). - Reactive on every input change; accessible labels and number inputs. </constraints> <format> Return the full HTML file as an artifact, then explain the amortization formula you used and how to add a 15-vs-30-year comparison. </format>

You are a front-end engineer who builds practical scheduling tools. <context> I need a time-zone meeting planner built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact, that compares several time zones and finds workable meeting slots. </context> <inputs> - Time zones to support: [LET ME ADD MULTIPLE BY CITY/REGION] - Working hours per person: [DEFAULT 9-5, EDITABLE] - Date to plan for: [PICKER, DEFAULT TODAY] - Output: [SIDE-BY-SIDE HOURLY GRID, HIGHLIGHTED OVERLAP, SHAREABLE SUMMARY] </inputs> <task> Build a planner where I add several time zones (using the browser's Intl time-zone support), set each person's working hours, and pick a date. Render a 24-hour grid showing the local time in each zone for every hour, color-coding cells as within-hours, edge, or outside-hours, and clearly highlighting the hours that work for everyone. Show a 'best overlap' summary line and a copy button that produces a plain-text meeting proposal listing the chosen time in every zone. </task> <constraints> - One self-contained HTML file; no libraries — use the built-in Intl.DateTimeFormat with timeZone, not a date library. - Handle DST correctly via Intl; the grid must stay aligned across zones. - Accessible color coding (not color alone — add labels/patterns); responsive grid. </constraints> <format> Return the full HTML file as an artifact, then explain how you used Intl for zone conversion and how to add a 'paste your availability' import. </format>

You are a front-end engineer who builds tidy everyday utilities. <context> I need a tip and bill-splitting calculator built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact, that handles uneven splits and rounding cleanly. </context> <inputs> - Inputs: [BILL TOTAL, TIP PERCENT (PRESET BUTTONS + CUSTOM), NUMBER OF PEOPLE] - Modes: [EVEN SPLIT / ITEMIZED SHARES PER PERSON] - Extras: [ROUND-UP TIP TO NEAREST DOLLAR, TAX HANDLING, PER-PERSON BREAKDOWN] - Style: [FRIENDLY, MOBILE-FIRST, BIG TAP TARGETS] </inputs> <task> Build a calculator with a bill input, tip-percent preset buttons plus a custom field, and a people counter, all updating the per-person and total amounts live. Add an itemized mode where I assign line items to people and it splits tax and tip proportionally. Include a round-up option and make sure the per-person amounts always sum exactly to the total (allocate any rounding remainder to one payer rather than losing a cent). Show a clear breakdown of subtotal, tip, tax, and each person's share. </task> <constraints> - One self-contained HTML file; no libraries; mobile-first with large tap targets. - Rounding must be exact — the sum of shares must equal the grand total to the cent. - Reactive on every change; accessible inputs and steppers. </constraints> <format> Return the full HTML file as an artifact, then explain how you handled the rounding remainder and how to add a currency selector. </format>

You are a front-end engineer who builds reliable conversion tools. <context> I need a unit converter built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact, covering several measurement categories with live two-way conversion. </context> <inputs> - Categories to include: [LENGTH, WEIGHT, TEMPERATURE, VOLUME, AREA, SPEED, DATA SIZE] - Currency handling: [STATIC EDITABLE RATES TABLE — NO LIVE API SINCE OFFLINE] - Features: [CATEGORY TABS, SWAP UNITS BUTTON, COPY RESULT, PRECISION CONTROL] - Style: [CLEAN, FAST, KEYBOARD-FRIENDLY] </inputs> <task> Build a converter with category tabs. Within each category, two dropdowns and two number fields convert live and bidirectionally (editing either side updates the other). Handle temperature with proper formulas (not simple ratios), include a swap button, a precision/decimals control, and a copy button. For currency, include an editable rates table seeded with example rates and a clear note that rates are manual because the artifact runs offline. Keep the conversion factor data in one well-organized object. </task> <constraints> - One self-contained HTML file; no libraries or network calls. - Conversions must be accurate; temperature uses real formulas; avoid floating-point display noise (round sensibly). - Keyboard accessible; tabs are proper buttons with aria states. </constraints> <format> Return the full HTML file as an artifact, then explain the conversion-factor data structure and how to wire a live rates API later. </format>

You are a front-end engineer who builds clear personal-finance tools. <context> I need a savings goal planner built as one self-contained HTML file with vanilla JavaScript, runnable instantly as an artifact, that shows how long a goal takes and visualizes progress. </context> <inputs> - Inputs: [GOAL AMOUNT, CURRENT SAVINGS, MONTHLY CONTRIBUTION, ANNUAL INTEREST RATE] - Modes: [SOLVE FOR TIME-TO-GOAL / SOLVE FOR REQUIRED MONTHLY CONTRIBUTION GIVEN A DEADLINE] - Outputs: [PROJECTED DATE, TOTAL CONTRIBUTED VS INTEREST EARNED, MONTH-BY-MONTH TABLE] - Visual: [PROGRESS BAR, GROWTH CHART USING CANVAS OR CSS BARS] </inputs> <task> Build a planner that, given a goal, starting balance, monthly contribution, and interest rate, computes how many months until the goal is hit (with monthly compounding) and the projected date, plus a breakdown of total contributed versus interest earned. Add a second mode that solves for the monthly contribution needed to hit the goal by a chosen date. Show a progress bar toward the goal, a month-by-month projection table, and a simple growth chart drawn without a charting library. </task> <constraints> - One self-contained HTML file; no libraries — implement compounding and the goal-solving math yourself. - Handle 0% interest and already-reached goals gracefully; format currency cleanly. - Reactive on every input; accessible inputs and a readable table. </constraints> <format> Return the full HTML file as an artifact, then explain the compounding model and how to add inflation-adjusted projections. </format>