30 Claude Prompts That Build Finance Dashboards

You are a treasury analyst who builds 13-week cash forecast dashboards. <context> I need a thirteen week cash forecast as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Business name: [COMPANY NAME] - Opening cash: [STARTING CASH] - Inflow types: [E.G. COLLECTIONS, NEW SALES, FINANCING] - Outflow types: [E.G. PAYROLL, VENDORS, TAX, RENT] - Large known items with week: [E.G. PAYROLL EVERY OTHER FRIDAY] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (opening cash from [STARTING CASH], lowest weekly ending balance, week of the trough, net 13-week change); a combined bar-and-line of weekly inflows, outflows, and ending cash; a scenario toggle (base versus late collections that delays 30% of receipts by two weeks); a table of the thirteen weeks with inflows, outflows, and ending cash; and a list of large known items. Ending cash must carry week to week. Flag any week that goes negative. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Scenario toggle recomputes the line, table, trough, and flags from the same constants. - Running balance links week to week; never hardcode an ending cash card. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then explain the late-collections rule and which week array to replace first. </format>

You are a startup finance lead who builds cash runway dashboards founders can poke at. <context> I need a cash runway dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Current cash: [AMOUNT] - Monthly revenue and growth: [AMOUNT AND %] - Current monthly net burn: [MONTHLY BURN] - Planned hires with month and fully loaded cost: [E.G. 1 AE IN MONTH 3 AT $10K] - Horizon: [E.G. 18 MONTHS] </inputs> <task> Build the dashboard with: a KPI row (cash, net burn from [MONTHLY BURN], runway in months, cash-out month); a line of ending cash with and without the planned hires; a hiring toggle that adds or removes those costs and recomputes runway; a table of monthly revenue, costs, net burn, and ending cash; and a callout of how many months the hires consume. Compute runway as cash divided by net burn when burn is positive, and say "not burning" when it is not. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Hiring toggle updates the line, table, runway card, and cash-out month live. - Ending cash carries month to month; cash-out month is the first month ending cash is at or below zero. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then explain the runway formula and how to edit the hire list. </format>

You are a collections analyst who builds AR aging dashboards. <context> I need a receivables aging dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Customer invoices to seed: [CUSTOMER AGING] - Aging buckets: [E.G. CURRENT, 1-30, 31-60, 61-90, 90+] - Target DSO: [E.G. 35 DAYS] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (total AR, amount 60+ days, DSO, DSO versus target); a stacked bar of AR by aging bucket; a sortable customer table built from [CUSTOMER AGING] with name, invoice date, amount, age in days, and bucket; a watchlist of invoices over 60 days; and a collections-this-week list of the five largest past-due rows. Compute age, bucket, DSO, and totals from invoice dates and amounts. Clicking a customer row highlights that invoice on the watchlist. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - DSO is computed from the constants with a commented formula, not hardcoded. - Bucket assignment uses the age in days; 90+ rows flagged red with a text label. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then explain the DSO formula and how to paste an AR export. </format>

You are an AP lead who builds payment-run dashboards. <context> I need a payables payment-run dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Vendors and bills: [VENDOR LIST] - Cash available for this run: [AMOUNT] - Due groups: [E.G. OVERDUE, THIS WEEK, NEXT WEEK, LATER] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (total AP, overdue, selected-for-payment total, cash remaining after the run); a bar of AP by due group; a bills table from [VENDOR LIST] with vendor, due date, amount, and a checkbox to include the bill in this run; a selected-bills list that updates as I check rows; and a warning when the selected total exceeds cash available. Checking a box recomputes selected total and cash remaining from the constants. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Selected total and cash remaining are computed live; do not hardcode them. - Overdue rows flagged; over-cash selection shows a clear warning. - Currency consistent; accessible contrast; keyboard-usable checkboxes. </constraints> <format> Return the full HTML as an artifact, then explain how to paste an AP export and set the cash available number. </format>

You are a treasurer who builds multi-account cash position dashboards. <context> I need a multi-account cash position as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Accounts to show: [BANK ACCOUNTS] - Starting balances: [PER ACCOUNT OR INVENT] - Next 10 business days of known inflows and outflows: [LIST OR INVENT] - Minimum cash policy: [AMOUNT] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (total cash, operating cash, lowest day in the next 10 days, gap to the minimum policy); account cards for [BANK ACCOUNTS] that I can click to focus; a 10-day stacked bar of ending cash by account; a table of known movements by day and account; and a policy line on the chart. Clicking an account card filters the table and dims the other stacks. Compute daily ending balances from starting balances plus movements. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Account click filters the table and chart focus without a reload. - Days under the minimum policy are flagged; totals equal the sum of accounts. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then explain how to replace the account list and the 10-day movement array. </format>

You are an FP&A analyst who builds monthly flash-versus-budget dashboards. <context> I need a company flash versus budget dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company or department: [COMPANY NAME] - Budget categories: [BUDGET CATEGORIES] - Period: [E.G. YEAR TO DATE BY MONTH] - Annual budget total: [AMOUNT] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (budget, actual, variance $, percent of budget used); a grouped bar of budget versus actual by each line in [BUDGET CATEGORIES]; a variance table with $ and % and a favorable/unfavorable flag; a cumulative spend-versus-budget line; and a flash full-year view that annualizes actuals and compares them to the annual budget. Compute variance, percent used, and the flash from labeled constants. Clicking a category row highlights that bar and scrolls the table to it. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Variance and flash are computed, not hardcoded; over-budget rows flagged in red with a text label. - Category click links the table and the bar. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then point out the biggest variance in the sample and where to paste this month's actuals. </format>

You are a finance business partner who builds department opex-versus-budget dashboards. <context> I need a department opex versus budget dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Department: [DEPARTMENT NAME] - Owner of the budget: [NAME] - Opex lines: [E.G. PAYROLL, CONTRACTORS, TOOLS, TRAVEL, VENDORS] - Period: [E.G. THIS QUARTER] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a header for [DEPARTMENT NAME] and the owner; a KPI row (opex budget, actual, variance, remaining); a grouped bar by opex line; a table with budget, actual, variance, owner note, and a timing-versus-rate tag (timing will reverse, rate is a unit-cost change, volume is more units); a remaining-budget burn chart for the rest of the period; and a callout of the one line the owner must explain. Compute remaining budget and the tags from constants. Clicking a line filters the callout and highlights the bar. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Remaining budget cannot go below a clearly labeled negative without a flag. - Line click updates the callout; tags come from a field on each row, not from vibes. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then explain the timing/rate/volume tags and how to paste that department's actuals. </format>

You are a revenue-operations analyst who builds pace-to-plan dashboards. <context> I need a revenue pace versus plan dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Revenue segments: [REVENUE SEGMENTS] - Period quota or plan: [AMOUNT] - Days elapsed and days remaining: [E.G. 47 OF 91] - Pipeline covering the remaining plan: [AMOUNT OR INVENT] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (plan, actual, gap, implied daily pace versus required pace); a grouped bar of plan versus actual by each item in [REVENUE SEGMENTS]; a pace chart of cumulative actual versus a straight-line plan; a coverage strip (pipeline / remaining gap); and a table of segments with plan, actual, gap, and on/off-pace status. Compute required daily pace from remaining gap and remaining days. Clicking a segment focuses the table and the coverage note for that slice. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Pace and coverage are computed from plan, actual, days, and pipeline constants. - Off-pace segments flagged; handle a closed period (0 days remaining) without dividing by zero. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then explain the required-pace formula and where to paste segment actuals. </format>

You are a people-finance analyst who builds headcount-versus-plan dashboards. <context> I need a headcount and payroll versus plan dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company or department: [COMPANY NAME] - Planned roles: [HEADCOUNT PLAN] - Average fully loaded cost by role family: [AMOUNTS] - Period: [E.G. THIS HALF] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (plan FTE, actual FTE, open roles, payroll $ versus plan); a bar of plan versus actual FTE by team; a table from [HEADCOUNT PLAN] with role, planned start, actual start or "open", monthly cost, and slip in weeks; a payroll $ bridge (plan, slip savings, over-hire cost, actual); and a callout of the most expensive open role. Compute FTE counts, slip, and payroll dollars from the role list. Clicking an open role highlights it on the table and the callout. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Slip savings equal months slipped times fully loaded cost; show the formula in a comment. - Open roles stay in the table; do not drop them from plan FTE. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then explain the slip-savings math and how to paste the real role list. </format>

You are a capital-planning analyst who builds capex-versus-budget dashboards. <context> I need a capex project versus budget dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Projects: [CAPEX PROJECTS] - Fields per project: [BUDGET, SPENT, COMMITTED, REMAINING, END DATE] - Period: [E.G. THIS YEAR] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (total budget, spent, committed, remaining, count of overruns); a stacked bar of spent plus committed versus budget by project from [CAPEX PROJECTS]; a project table with those fields plus percent used and an overrun flag; a simple timeline bar to each end date; and a callout of the project closest to or already over budget. Remaining must equal budget minus spent minus committed. Clicking a project expands a one-line note and highlights its bar. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Overrun is computed when spent plus committed exceeds budget; remaining can be negative and must show it. - Project click links the table, bar, and callout. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then explain the spent/committed/remaining split and how to paste the project list. </format>

You are a SaaS finance analyst who builds MRR movement bridges as clickable screens. <context> I need an MRR movement bridge as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Plan tiers and prices: [PLAN TIERS] - Starting MRR: [AMOUNT OR INVENT] - Period: [E.G. LAST 12 MONTHS] - Growth shape: [E.G. STEADY, SPIKY, RECOVERING] </inputs> <task> Build the dashboard with: a KPI row (ending MRR, ARR, net new MRR, quick ratio); a month selector; a waterfall for the selected month (beginning, + new, + expansion, - contraction, - churn, = ending) that nets to ending MRR; an MRR area over time; a plan-mix stacked bar from [PLAN TIERS]; and a table of the largest expansion and churn movements. Compute ARR as MRR times 12 and quick ratio as (new + expansion) / (churn + contraction), guarding a zero denominator. Clicking a month rebuilds the waterfall from that month's movements. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Each month's waterfall must reconcile beginning to ending MRR. - Churn and contraction render as negatives; cards recompute from the selected month. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then explain the bridge math and which movement arrays to replace. </format>

You are a subscription analyst who builds NRR and GRR dashboards. <context> I need a net revenue retention screen as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Product name: [COMPANY NAME] - Churn reasons: [CHURN REASONS] - Segments: [E.G. BY PLAN OR TENURE] - Period: [E.G. LAST 12 MONTHS] - Starting customer and MRR counts: [OR INVENT] </inputs> <task> Build the dashboard with: a KPI row (GRR %, NRR %, logo churn %, customers lost); a line of GRR and NRR over time with a 100% reference; a bar of [CHURN REASONS]; a segment table (customers, MRR, GRR, NRR, logo churn); and a callout of the weakest segment. Compute GRR as (beginning MRR - churned - contraction) / beginning MRR and NRR as (beginning MRR - churned - contraction + expansion) / beginning MRR. NRR at or above 100% reads as healthy green. Clicking a segment filters the reason bar to that slice when you have reason data, otherwise it only focuses the table. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - GRR and NRR are computed from movement constants; show the formulas in comments. - Weakest segment is the lowest NRR, computed, not hardcoded. - Accessible contrast; responsive layout; 100% line labeled. </constraints> <format> Return the full HTML as an artifact, then explain GRR versus NRR and how to paste segment movements. </format>

You are a unit-economics analyst who builds LTV and CAC dashboards by channel. <context> I need a channel unit-economics dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Channels: [ACQUISITION CHANNELS] - ARPU, gross margin %, and average lifespan in months: [OR INVENT] - CAC per channel: [AMOUNTS] - Healthy LTV to CAC floor: [E.G. 3] </inputs> <task> Build the dashboard with: a KPI row (blended LTV, blended CAC, LTV:CAC, CAC payback months); a bar of LTV:CAC by each item in [ACQUISITION CHANNELS] with a line at the floor; a payback trend; a channel table (CAC, LTV, ratio, payback, spend); and a callout of any channel below the floor. Compute LTV as ARPU times lifespan times gross margin, ratio as LTV / CAC, and payback as CAC / (ARPU times gross margin) when the denominator is positive. Clicking a channel highlights its bar and table row. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Formulas live in commented functions; cards are not hardcoded. - Ratios below the floor flagged red with a text label; guard divide-by-zero. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then explain the LTV and payback formulas so I can paste real CAC by channel. </format>

You are a SaaS controller who builds bookings-billings-revenue dashboards so those three numbers stop being confused. <context> I need a bookings, billings, and revenue dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Monthly bookings, billings, and recognized revenue: [BOOKINGS AND BILLINGS] - Contract mix: [E.G. MONTHLY, ANNUAL PREPAY] - Period: [E.G. LAST 12 MONTHS] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (bookings, billings, recognized revenue, deferred revenue change); a three-series line of bookings, billings, and revenue from [BOOKINGS AND BILLINGS]; a deferred-revenue rollforward table (beginning, + billings, - recognized, = ending) that must tie; a callout that names why the three series diverge this month (annual prepay, delayed go-live, or credits); and a month selector that updates the rollforward. Clicking a series in a legend toggles that line. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Deferred rollforward must reconcile; do not hardcode ending deferred. - Legend click shows and hides a series; month selector updates the table and callout. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then define bookings versus billings versus revenue in one line each and say which arrays to replace. </format>

You are a revenue-accounting analyst who builds deferred-revenue and remaining-performance dashboards. <context> I need a deferred revenue rollforward dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Opening deferred revenue: [DEFERRED REVENUE] - Contracts: [E.G. 12 CONTRACTS WITH START, TERM, TOTAL VALUE, RECOGNIZED TO DATE] - Period: [E.G. THIS QUARTER BY MONTH] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (opening deferred from [DEFERRED REVENUE], new billings, recognized, ending deferred, remaining performance obligation); a monthly rollforward table that ties opening to ending; a burn-down line of remaining unrecognized value; a contract table with start, term, total, recognized, remaining, and percent complete; and a callout of contracts that end in the next 60 days. Compute recognized this period from a straight-line rule stated in a comment, unless a contract has an explicit recognized-to-date override. Clicking a contract highlights it on the burn-down. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Company rollforward must equal the sum of contract remaining; flag a break. - Contract click focuses the table and callout. - Currency consistent; accessible contrast; responsive layout. - Label the recognition rule as a sample method, not as GAAP advice. </constraints> <format> Return the full HTML as an artifact, then explain the straight-line rule and how to paste real contract rows. </format>

You are a CFO who builds one-screen board finance snapshots. <context> I need a one-screen board snapshot as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Board date: [BOARD DATE] - Eight metrics with actual, plan, and prior: [E.G. REVENUE, GROSS MARGIN, NET BURN, RUNWAY, NRR, CASH, HEADCOUNT, NET NEW MRR] - RAG rule: [E.G. GREEN WITHIN 5% OF PLAN, AMBER WITHIN 15%, ELSE RED] - One sentence of narrative: [OR ASK CLAUDE TO DRAFT FROM THE NUMBERS] </inputs> <task> Build a single-screen pack dated [BOARD DATE] with: a header and a one-line narrative; a grid of eight KPI cards, each with name, actual, plan, versus plan %, versus prior, a red/amber/green status, and a sparkline; a count banner of how many metrics are green, amber, and red; and a click-to-expand footnote on each card that states the definition. Compute RAG from the rule constants. Clicking a card opens the footnote and dims the others. Fit the grid on a laptop screen without scrolling where you can. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - RAG is computed from actual versus plan against the threshold constants. - Status uses color plus the word green, amber, or red. - Responsive; accessible contrast; print-friendly light background. </constraints> <format> Return the full HTML as an artifact, then explain the RAG rule and which metric array to replace before the meeting. </format>

You are a CFO who builds the cash-and-runway board view. <context> I need a board cash and runway view as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Cash, monthly net burn, and runway: [CASH AND RUNWAY] - Committed versus flexible spend this quarter: [AMOUNTS] - Next milestone or raise window: [DATE OR "PATH TO PROFIT"] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row pulled from [CASH AND RUNWAY] (cash, net burn, runway months, cash-out month); a 12-month ending-cash line with a marker on the milestone or raise window; a stacked bar of committed versus flexible spend; a use-of-cash table for the next two quarters; and a short board line that states whether you are raising, cutting, or holding. Include a toggle that cuts 20% of flexible spend and recomputes runway. Clicking the cash-out month marker shows the month name and ending cash. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Runway and cash-out month recompute when the cut toggle is on. - Do not invent a raise that is not in the inputs; if the path is profit, label it that way. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then explain the cut-toggle math and which cash constants to replace. </format>

You are an FP&A lead who builds annual-plan RAG scorecards for the board. <context> I need an annual plan RAG scorecard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Annual plan lines: [ANNUAL PLAN] - Elapsed fraction of the year: [E.G. 0.58] - RAG rule: [E.G. GREEN WITHIN 5%, AMBER WITHIN 12%, ELSE RED] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (lines on plan, amber, red, full-year outlook versus plan); a table from [ANNUAL PLAN] with plan, actual, percent of year elapsed, implied full-year, variance to plan, and RAG; a bar of implied full-year versus plan; a bridge of the largest misses; and a callout of the one line that needs a decision. Implied full-year is actual divided by elapsed fraction when the line is a flow (revenue, spend), and actual when the line is a stock (cash, headcount). Clicking an amber or red row opens a one-line cause field already filled with sample text you can edit later. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Flow versus stock is a field on each line; do not annualize cash. - RAG computed from implied full-year versus plan. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then explain the flow-versus-stock rule and which plan array to replace. </format>

You are a SaaS CFO who builds a board unit-economics page with footnotes a director can audit. <context> I need a board unit-economics page as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Metrics: [UNIT ECONOMICS] - Definitions you already use: [E.G. CAC IS SALES PLUS MARKETING OVER NEW LOGO COUNT] - Targets: [LTV:CAC, PAYBACK MONTHS, GROSS MARGIN] - Period: [E.G. LAST FOUR QUARTERS] </inputs> <task> Build the dashboard with: a KPI row from [UNIT ECONOMICS] (LTV, CAC, LTV:CAC, payback months, gross margin) each versus target; a four-quarter trend for each metric; a small table that restates the definition in one line; and a footnote panel. Clicking a metric opens the footnote with the formula, what is included, and what is excluded. Compute LTV:CAC and payback from the same constants the cards use so the footnote cannot drift from the number. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Footnotes must match the formulas in comments; do not invent a second definition. - Off-target metrics flagged with color and the word off-target. - Accessible contrast; responsive; readable at board-TV distance for the KPI row. </constraints> <format> Return the full HTML as an artifact, then list which constants to replace so the footnotes still match. </format>

You are a startup CFO who builds a use-of-cash board view after a raise. <context> I need a use-of-cash dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Company name: [COMPANY NAME] - Raise amount and close date: [RAISE AMOUNT] - Planned buckets and amounts: [E.G. PRODUCT 40%, GTM 35%, RUNWAY BUFFER 25%] - Spent to date by bucket: [AMOUNTS OR INVENT] - Months since close: [NUMBER] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (raised from [RAISE AMOUNT], spent, remaining, months of announced plan left); a stacked bar of planned versus spent by bucket; a remaining-cash line since the close date; a table of buckets with plan, spent, remaining, and percent used; and a callout of the bucket that is running hottest versus the announced mix. Clicking a bucket filters the table and the callout. Remaining cash must equal raise minus spent across buckets, plus any leftover not allocated. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Totals reconcile to the raise; flag a break if spent exceeds a bucket plan. - Bucket click links bar, table, and callout. - Currency consistent; accessible contrast; responsive layout. - Do not invent a new raise or a valuation. </constraints> <format> Return the full HTML as an artifact, then explain how to replace the raise, the bucket plan, and spent-to-date. </format>

You are a household-finance designer who builds calm monthly cash dashboards. <context> I need a household monthly cash dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Household label: [HOUSEHOLD NAME] - Income sources: [E.G. PAYCHECKS, SIDE INCOME] - Bill categories: [E.G. HOUSING, FOOD, TRANSPORT, DEBT, FUN] - Upcoming bills in the next 14 days: [LIST OR INVENT] - Account balances: [CHECKING, SAVINGS] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a header for [HOUSEHOLD NAME]; a KPI row (income, bills, leftover, savings rate); a category bar of spend; a leftover-over-the-month line; a 14-day bills list I can click to mark paid (it subtracts from leftover for this session); and account cards for checking and savings. Compute leftover and savings rate from labeled constants. Marking a bill paid updates leftover and the list without a reload. Keep the look calm, not like a trading terminal. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Paid-bill clicks mutate the in-memory list and leftover; they do not invent a bank login. - Currency consistent; accessible contrast; friendly type size. - This is a tracker, not advice to buy, sell, or borrow. </constraints> <format> Return the full HTML as an artifact, then say which income, bill, and balance arrays to replace. </format>

You are a consumer-finance designer who builds debt-payoff dashboards people can poke at. <context> I need a debt payoff screen as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Name or household: [HOUSEHOLD NAME] - Debts: [DEBT LIST] - Extra payment I can add: [AMOUNT] - Method: [SNOWBALL SMALLEST BALANCE FIRST / AVALANCHE HIGHEST RATE FIRST] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (total balance, weighted average rate, months to debt-free, interest remaining); a method toggle between snowball and avalanche; an extra-payment slider that starts at the extra in the inputs; a payoff order table from [DEBT LIST]; and a line of remaining total balance by month under the current method and extra. Recompute order, months, and interest when I toggle or slide. Clicking a debt row shows why it is in that position. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Slider and toggle recompute the schedule from balances, rates, minimums, and extra. - Do not promise credit-score outcomes or tell me to close accounts. - Currency consistent; accessible contrast; responsive layout. - Label the math as a simple amortization sketch, not a loan quote. </constraints> <format> Return the full HTML as an artifact, then explain the snowball versus avalanche sort and which debt fields to replace. </format>

You are a personal-finance designer who builds savings-rate and goal dashboards. <context> I need a savings rate and goal tracker as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Name or household: [HOUSEHOLD NAME] - Monthly take-home and monthly spend: [AMOUNTS] - Goals: [SAVINGS GOAL] - Already saved toward each goal: [AMOUNTS] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a KPI row (take-home, spend, savings rate, months of spend in cash if you have a cash figure); goal cards from [SAVINGS GOAL] with target, saved, remaining, and a progress bar; a pace line that shows whether the current surplus hits each goal by the date on that goal; and a what-if box where I type an extra monthly amount and the cards recompute. Clicking a goal card focuses the pace line on that goal and shows the hit-or-miss date math. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Savings rate is (take-home minus spend) / take-home when take-home is positive. - What-if extra is added to surplus for pace only; it does not invent income. - Currency consistent; accessible contrast; calm layout. - This is a tracker, not investment advice. </constraints> <format> Return the full HTML as an artifact, then explain the pace math and which goal fields to replace. </format>

You are a freelancer-finance designer who builds a side-business versus paycheck dashboard. <context> I need a side-business versus paycheck dashboard as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. </context> <inputs> - Person or household: [HOUSEHOLD NAME] - Side business name: [SIDE BUSINESS] - Paycheck after tax this year by month: [OR INVENT] - Side revenue, side costs, and transfers home by month: [OR INVENT] - Hours in the side business this month: [NUMBER] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a two-column header (paycheck versus [SIDE BUSINESS]); a KPI row (paycheck YTD, side profit YTD, transfers home, side effective hourly if hours are given); a grouped bar of monthly paycheck versus side profit; a table of side revenue, costs, profit, and transfers; and a callout of months when the side business needed a transfer in from the paycheck. Clicking a column header dims the other series. Compute side profit as revenue minus costs, and effective hourly as that month's profit divided by hours when hours are positive. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Do not invent tax, LLC, or "quit your job" advice. This is a comparison screen. - Column click toggles series; effective hourly handles zero hours. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then say which paycheck and side-business arrays to replace. </format>

You are a bookkeeping-minded designer who builds an estimated-tax tracker, not a tax opinion. <context> I need a quarterly estimated tax tracker as one self-contained HTML file with inline CSS, vanilla JS, and a CDN chart library, seeded with realistic sample data so it opens as a working screen I can click in the chat. This is a calendar and a running total. It is not tax advice. </context> <inputs> - Filer label: [HOUSEHOLD NAME] - Year: [YEAR] - Profit or income I am tracking: [ESTIMATED TAX] - Safe-harbor amount if I have one: [AMOUNT OR UNKNOWN] - Payments already sent with dates: [LIST OR NONE] - Due dates I must hit: [E.G. APR 15, JUN 15, SEP 15, JAN 15] - Currency: [E.G. USD] </inputs> <task> Build the dashboard with: a banner that says this is a tracker I will confirm with a tax pro; a KPI row (YTD profit from [ESTIMATED TAX], payments sent, remaining if I use the safe-harbor split, next due date); a quarter table with due date, suggested split of the safe-harbor (or a placeholder if UNKNOWN), sent, and unpaid; a bar of sent versus remaining; and a click on a quarter that shows the due date and the unpaid amount. If safe-harbor is UNKNOWN, show the payment calendar and leave suggested amounts as blanks I must fill, rather than inventing a liability. </task> <constraints> - One self-contained HTML file; only a charting library from a CDN is allowed. - Do not invent a tax rate, a credit, or a filing status. Do not tell me what I owe. - If a due date is in the past and unpaid, flag it as late on the calendar only. - Currency consistent; accessible contrast; responsive layout. </constraints> <format> Return the full HTML as an artifact, then list the fields I must replace and repeat that a tax professional has to review the amounts. </format>