Invoice & Billing Tool Interface Generator

What this prompt does

This prompt generates a complete invoicing and billing tool interface, covering every surface a user actually touches: the invoice list, the creator form, the PDF preview, the client directory, payment tracking, and a revenue dashboard. The template enforces a specific UX opinion — invoice creation must be a single scrollable form, not a multi-step wizard — and that constraint is baked in so the AI cannot drift into paginated flows that introduce unnecessary friction.

The color system is explicitly defined: gray base, green for paid, amber for pending, red for overdue, blue for draft. Status visibility is the core UX job of any invoice tool, and the template names it directly rather than leaving it to vague "professional" guidance. The framework code section (driven by the [framework] variable) produces working dynamic line-item logic with real-time total calculation — not a static mockup.

The anti-pattern list is the most valuable structural element. It tells the AI what NOT to generate, which eliminates common LLM tendencies like requiring a client record before an invoice can be created, hiding tax line breakdowns, or creating ambiguous draft vs. sent states.

When to use it

• You are building a SaaS invoicing product and need a design reference or starter UI before writing production code.
• You are a freelancer wanting a custom-branded invoice tool that matches your workflow, not a generic template.
• You are a fintech developer prototyping a billing module to embed inside an existing dashboard.
• You need to pitch an invoicing feature to stakeholders and want a realistic, detailed mockup fast.
• You are evaluating UI frameworks (React, Vue, Svelte) for an invoicing component and want comparable generated examples side by side.

Example output

For target_users = "freelance designers", features = "recurring invoices, partial payments, late fees", payment_integrations = "Stripe, PayPal", framework = "React":

Invoice List
- Tabs: All | Draft | Sent | Paid | Overdue — each shows count badge
- Row: Invoice #INV-0041 · Acme Studio · $1,200.00 · Due Jun 30 · [amber] Pending
- Bulk action: "Send reminder" appears on multi-select

Invoice Creator (single scroll)
- Client selector: typeahead, "+ Add new client" inline fallback (no separate screen)
- Line items: Description | Qty | Rate | Amount — drag handle, delete icon
- Footer: Subtotal $1,200 | Tax (10%) $120 | Total $1,320
- React state: useReducer for line items, useMemo for derived totals

PDF Preview
- Live right-panel preview updates as line items change
- Header: logo slot, business address, invoice number
- Follow-up prompt needed for print stylesheet (see Pro tips)

Client Management
- Contact card: name, email, billing address, default payment terms
- Invoice history table: total billed, outstanding balance, average days to pay

Dashboard
- Cards: Outstanding $4,800 · Paid This Month $9,200 · Overdue $1,350
- Placeholder aggregate logic — replace with real DB queries before production

Pro tips

• Set [framework] to match your actual stack. "React with TypeScript and Tailwind" gives typed interfaces and prop validation; "plain HTML/Alpine.js" gives a zero-build solution with no bundler dependency — useful for embedding in an existing non-React app.
• The [payment_integrations] variable directly shapes which webhook and status-sync patterns appear in the generated code. Include only integrations you will actually implement — the AI generates reconciliation logic for each one listed, and unused stubs create maintenance debt.
• Add "multi-currency support (USD, EUR, GBP)" to [features] if you need non-USD formatting. The template does not assume locale, so without this the output uses generic dollar amounts and you will need to retrofit Intl.NumberFormat yourself.
• The PDF preview output is a live UI component, not a print stylesheet. Follow up with: "Generate the invoice PDF template as a printable HTML page using the same color variables from the preview component." That second prompt produces the @media print CSS and a standalone printable layout.
• The dashboard section generates placeholder aggregate logic — readable pseudo-code or hardcoded numbers. Before wiring it to real data, follow up with: "Rewrite the dashboard queries against this schema: [paste your table definitions]." The generated UI shell stays intact; only the data layer gets replaced.