Stop undercharging for your work. Enter your desired annual income, business expenses, tax rate, and billable hours to calculate exactly what you need to charge per hour, per day, and per project to meet your financial goals as a freelancer.
Build Prompt
Copy this prompt into Claude Code
Build a single-page freelance rate calculator as a static HTML/CSS/JS site. Page background #0f0f17 with a centered card (max-width 880px) using #12121a background, 1px solid #2a2a3a border, and 16px border-radius.
At the top, display "Freelance Rate Calculator" heading in white and subtitle "Know your worth. Charge accordingly." in #8888a0. Below the subtitle, add a toggle for "Simple Mode" vs "Detailed Mode" — simple mode shows just the essential fields, detailed mode shows all fields with business expense breakdown.
In the input section, create a vertical form with clearly labeled groups. Group 1 — "Income Goal": Desired Annual Income (currency input, $ prefix, default $80,000) with a help note "What you want to take home after taxes and expenses." Group 2 — "Business Expenses" (collapsible in simple mode): individual line items for Software/Subscriptions ($200/mo), Equipment ($100/mo), Office/Coworking ($300/mo), Insurance ($250/mo), Marketing ($100/mo), Accounting ($100/mo), Professional Development ($50/mo), Miscellaneous ($100/mo). Each is a currency input with a monthly label. Show a running "Annual Expenses Total" below. Group 3 — "Taxes": Estimated Tax Rate (percentage input, default 30%, with note "Self-employment tax + income tax"). Group 4 — "Availability": Billable Hours Per Week (number input, default 25, range 1-60, with note "Most freelancers bill 25-30 of 40 working hours"), Weeks of Vacation Per Year (number input, default 4, range 0-12), Weeks for Sick/Personal Days (number input, default 2).
Style all inputs with #1a1a2a background, #2a2a3a border, white text, and #3b82f6 focus ring. Use #8888a0 for labels and #6a6a80 for help notes.
Below the inputs, display the results prominently in a section with four large cards in a 2x2 grid: Hourly Rate (largest, bold 32px, #3b82f6 background with white text, rounded 14px), Day Rate (8 hours, #16161e background, #22c55e text), Weekly Rate (#16161e, #f59e0b text), and Monthly Rate (#16161e, #a855f7 text). Each card shows the rate and a small label. Below the cards, show a single "Project Rate" helper: an input for estimated project hours (default 40) and the calculated project rate next to it.
Below the results, add a "Rate Breakdown" section with a horizontal stacked bar chart using Canvas. The bar represents the gross hourly rate split into: Take-Home Pay (#3b82f6), Taxes (#ef4444), and Business Expenses (#f59e0b). Show dollar labels on each segment. Below the bar, display the math: "Gross Revenue Needed: $X / Y billable hours = $Z/hour."
Add a "Market Comparison" section at the bottom with a simple reference table showing typical freelance rates by industry: Web Development ($75-150/hr), Graphic Design ($50-100/hr), Writing/Content ($40-80/hr), Consulting ($100-250/hr), Photography ($75-200/hr), Video Production ($60-150/hr). Highlight where the user's calculated rate falls relative to their industry if they select one from a dropdown.
All calculations must update in real-time. Formula: Hourly Rate = (Desired Income + Annual Expenses) / (1 - Tax Rate) / (Billable Hours Per Week * (52 - Vacation Weeks - Sick Weeks)). Make the layout responsive with single-column stacking on mobile.
Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].
Make It Yours
Value-Based Pricing
Add a section that helps freelancers calculate value-based project prices using client revenue impact and ROI estimates.
Retainer Calculator
Add a monthly retainer pricing tool that calculates discounted rates for clients who commit to ongoing work (10-20% discount).
Rate History
Save calculated rates to localStorage with dates so freelancers can track how their rates should increase over time with experience.
Scope Creep Buffer
Add a percentage buffer input (default 20%) that automatically pads project estimates for unexpected revisions and scope changes.
Currency Selector
Support multiple currencies with appropriate formatting for international freelancers working with global clients.
Proposal Generator
Generate a printable one-page rate card with the freelancer's name, services, and calculated rates for sharing with clients.
SEO Tips
Target "freelance rate calculator" and "how much to charge as a freelancer" — combined 50K+ monthly searches with low competition and high intent.
Create industry-specific landing pages: "freelance web developer rate calculator," "freelance designer rate calculator" for targeted long-tail traffic.
Add a comprehensive FAQ section answering "How do I set my freelance rate?" and "Should I charge hourly or per project?" for snippet eligibility.
Write a companion guide "The Complete Guide to Freelance Pricing in 2026" with real data and examples linking back to the calculator.
Include testimonial-style examples: "A designer earning $80K with $14K expenses needs to charge $X/hour" to make the tool concrete and shareable.
Monetization Ideas
Add affiliate links to freelance platforms (Toptal, Upwork Pro) with "Find clients at your rate" CTA — freelance platform affiliates pay $25-100 per qualifying signup.
Offer a premium "Client Proposal Template Pack" for $9.99 with customizable Word/Google Docs templates pre-filled with the calculated rates.
Place affiliate ads for accounting software (FreshBooks, Wave, QuickBooks Self-Employed) — highly relevant to freelancers, pays $20-50 per trial.
Create a "Freelance Business Starter Kit" digital product for $19.99 including contract templates, rate card, invoice templates, and tax guides.
Offer a 1-on-1 rate consultation service for $49 where you review their calculator inputs and provide personalized pricing strategy advice.