Skip to content
Get packs

Invoice Page Designer

Creates a printable single-page HTML invoice with line items, tax, totals and payment details.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When installed, the agent can turn a request for an invoice or bill into a finished, print-ready web page. The page includes sender and recipient details, an itemized table, a tax breakdown, totals, payment instructions and a signature line, all styled to match the project's design guidelines. The skill is a set of layout instructions and an example page; it does not send invoices or handle any money.

Great for

  • Freelancers or small studios who want a clean invoice layout they can print or save as PDF
  • Designers prototyping an invoice template for a client or design system
  • People who want a starting point they will then edit and check themselves

Skip it if

  • Legally or financially binding billing: the skill does not check tax rules, currency formats or payment details, so an accountant should review real invoices
  • Automated billing or payment collection: it only produces a static page and connects to no payment or accounting service

Try asking

  • “Create an invoice from a freelance design studio billing a client for a brand identity project with three line items and 9% sales tax”
  • “Make a printable invoice page with a 10% retainer and bank transfer payment instructions”
  • “Design a billing statement layout for my consulting business”
Step-by-step guide: how to use Invoice Page DesignerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    invoice.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip invoice.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip invoice.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide your studio name, addresses, line items, tax rate and payment details up front so the page is filled in accurately rather than with placeholders
  • Check every figure and tax calculation against your own records before sending the invoice to a client
  • Use the browser's print or save-as-PDF function, since the print stylesheet removes backgrounds for cleaner output

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.