Kalkulator B2B vs UoP 2026 - zbuduj własny z Claude AI w 30 minut

Szukasz w Google „kalkulator b2b 2026”. Pierwszy wynik - money.pl, 47 reklam, wolne ładowanie. Drugi - pit.pl, pyta Cię o wiek, województwo i zawód, zanim cokolwiek pokaże. Trzeci - strona, która wymaga zgody na cookies od 14 „partnerów reklamowych”.

Zbudujesz własny kalkulator w 30 minut. Zero reklam. Zero cookie banners. Zero zbierania Twoich danych o zarobkach.

Za pół godziny będziesz mieć kalkulator porównujący UoP, B2B ryczałt, B2B liniowy i B2B skalę. Z aktualnymi stawkami 2026, wykresem pokazującym gdzie idzie każda złotówka brutto, scenariuszami what-if, zapisywaniem porównań i eksportem PDF. Jeden plik HTML. Działa offline.

To nie jest artykuł o tym, która forma zatrudnienia jest najlepsza (to zależy od Twojej sytuacji). To jest artykuł o tym, jak zbudować narzędzie, które sam kontrolujesz - zamiast ufać porównywarce pełnej reklam.

TL;DR: 4 rzeczy, które wyniesiesz z tego artykułu:

• Działający kalkulator 4 form - UoP, B2B ryczałt, B2B liniowy, B2B skala, stawki kwiecień 2026
• 6 gotowych promptów CRISP - kopiujesz, wklejasz do Claude, dostajesz kod
• Zrozumienie, jak liczy się netto - 4 komentowane funkcje obliczeniowe z odniesieniami do przepisów
• Wzorzec logiki biznesowej w JS - progi, zaokrąglenia, konfiguracja w jednym miejscu

---

Poziom 2 (średniozaawansowany) | Seria „Zbuduj to z AI” | 6 kroków | 6 promptów CRISP | 1 plik HTML | ~30 minut

---

Co zbudujemy

Funkcja	Krok
Layout 3-panelowy w ciemnym motywie	#1
Hybrydowy panel inputów (text + slider + dropdown)	#2
Logika 4 form z konfiguracją stawek 2026	#3
Wykres Chart.js stacked (gdzie idzie każda złotówka)	#4
Breakdown wybranej formy + porównanie scenariuszy	#5
Zapis scenariuszy, eksport PDF i JSON	#6

Stack: Jeden plik HTML. Jedna biblioteka z CDN (Chart.js 4.4.1). Reszta to czyste vanilla JavaScript + localStorage + CSS Grid.

---

Uwaga: narzędzie edukacyjne, nie doradztwo podatkowe. Pełny disclaimer i zastrzeżenia - przy Kroku 3 (logika podatkowa) oraz na końcu artykułu.

---

Krok 0: Przygotowanie (1 minuta)

Nie potrzebujesz żadnego klucza API ani rejestracji. Jedyna biblioteka zewnętrzna (Chart.js) ładuje się z CDN.

Czego potrzebujesz

1. Przeglądarka - Chrome, Firefox, Edge, Safari
2. Edytor tekstu - Notatnik, VS Code, cokolwiek
3. Claude - darmowe konto na claude.ai

Utwórz plik kalkulator.html. To będzie jedyny plik.

---

Krok 1: Layout 3-panelowy + dark theme (Prompt #1)

---

Stan aplikacji: Pusty plik kalkulator.html. Zaczynamy od zera.

Czas na ten krok: ~4 minuty

---

Kalkulator porównawczy potrzebuje 3 stref na ekranie: gdzie wpisuję dane (lewa), co widzę (środek), jakie są szczegóły wybranej formy (prawa). To jest wzorzec dashboardów analitycznych. Tu celowo rezygnujemy z „jednej kolumny pytań i odpowiedzi” - chcemy, żeby użytkownik widział wszystko naraz.

Ciemny motyw - świadomy wybór. Liczby na ciemnym tle są mniej agresywne wizualnie. Ma to znaczenie, gdy przesuwasz slider i cyfry skaczą co 0,2 sekundy.

Dlaczego ten prompt działa

CRISP - ten sam format co w tutorialu generatora ofert:

Element	Co robi	W tym prompcie
Context	Kontekst projektu	Kalkulator porównawczy 4 form zatrudnienia
Role	Rola AI	Designer narzędzi finansowych
Intent	Cel	Layout 3-panelowy, placeholdery na liczby
Scope	Ograniczenia	Dark theme, Inter + JetBrains Mono, zero bibliotek
Precision	Format odpowiedzi	Pełny plik HTML

Pełne wyjaśnienie metody: Inżynieria promptów - Framework CRISP

Prompt do skopiowania

Otwórz Claude i wklej:

<context>
Buduję kalkulator porównujący formy zatrudnienia (UoP, B2B ryczałt,
B2B liniowy, B2B skala) w jednym pliku HTML, w ramach serii
"Zbuduj to z AI". Aplikacja ma działać po otwarciu pliku w przeglądarce.
Docelowo ma pokazywać miesięczne netto dla 4 form obok siebie,
pozwalać na zmianę kwoty w locie i wizualizować rozbicie na składniki.
W tym kroku tylko szkielet - bez logiki podatkowej.
</context>

<role>
Jesteś UI/UX designerem specjalizującym się w narzędziach finansowych
i dashboardach porównawczych. Projektujesz dla użytkowników,
którzy muszą szybko ocenić liczby.
</role>

<intent>
Stwórz layout kalkulatora:
1. Na górze strony: duży tytuł "Kalkulator B2B vs JDG vs UoP 2026",
   pod nim banner-disclaimer (żółte tło #fef3c7, ciemny tekst):
   "Kalkulator edukacyjny. Stawki z kwietnia 2026. Do decyzji
   finansowych skonsultuj się z księgowym."
2. Layout główny: 3 panele w układzie flex (desktop),
   stacked na mobile:
   - Lewa kolumna (25%): panel inputów (placeholder, puste kontenery
     na kwotę, formę opodatkowania, opcje ZUS)
   - Środkowa kolumna (50%): grid 2x2 z 4 kartami wyników:
     "Umowa o pracę", "B2B Ryczałt", "B2B Liniowy 19%",
     "B2B Skala". Każda karta ma duży placeholder "0 zł" (72px,
     JetBrains Mono), etykietę "Netto miesięcznie", mały opis formy.
   - Prawa kolumna (25%): panel "Szczegóły" (pusty, będzie breakdown).
3. Typografia: Inter (Google Fonts) dla tekstu, JetBrains Mono
   (Google Fonts) dla liczb.
</intent>

<scope>
- Jeden plik HTML, lang="pl", meta charset UTF-8
- Ciemny motyw: tło #0f0f23, karty #1a1a3e, akcent cyjan #22d3ee,
  tekst główny #e5e7eb, tekst secondary #9ca3af, sukces #10b981,
  błąd #ef4444
- Karty wyników: border 1px #252547, radius 12px, padding 24px,
  hover: border #22d3ee i subtelna animacja
- Responsywny: 1024px → stacked, karty full-width
- Zero bibliotek zewnętrznych w tym kroku
- Komentarze w kodzie po polsku
</scope>

<precision>
Zwróć KOMPLETNY plik HTML gotowy do zapisania jako kalkulator.html
i otwarcia w przeglądarce. Kod czytelny, z komentarzami przy każdej
sekcji CSS i przy strukturze layoutu.
</precision>

Co dostaniesz

Strona z dużym tytułem, żółtym bannerem ostrzegawczym i trzema strefami. Po lewej panel z pustymi kontenerami (puste kontenery są OK - wypełnimy je w kroku 2). W środku 4 duże karty: UoP, Ryczałt, Liniowy, Skala - każda z liczbą „0 zł” w JetBrains Mono, która wygląda jakby była gotowa do zaktualizowania. Po prawej pusty panel „Szczegóły”.

Skopiuj kod, wklej do kalkulator.html, zapisz, otwórz w przeglądarce.

Weryfikacja

• Na górze duży tytuł „Kalkulator B2B vs JDG vs UoP 2026”
• Żółty banner z ostrzeżeniem o edukacyjnym charakterze
• 3 panele: lewy (inputy, pusty), środkowy (4 karty), prawy (szczegóły)
• Liczby „0 zł” w JetBrains Mono wyglądają jak terminal
• Na mobile (zmniejsz okno) panele układają się pionowo

Co się tu uczysz

• CSS Grid dla dashboardu - grid-template-columns: 1fr 2fr 1fr to 3 panele z zachowaniem proporcji 25/50/25. Grid robi to, do czego flexbox musiałby się gimnastykować
• JetBrains Mono dla liczb - cyfry w fontach monospace mają identyczną szerokość. Kiedy „1 234 zł” zmienia się w „15 678 zł”, pozycja dziesiątek nie skacze w lewo-prawo. Ten detal czyni UX profesjonalnym
• Dark theme dla narzędzi analitycznych - kontrast cyjan #22d3ee na tle #0f0f23 wydobywa liczby. Ten sam zestaw kolorów co w terminalach programistów i GitHub Dark

---

Krok 2: Formularz inputów (Prompt #2)

---

Stan aplikacji: Layout jest, ale puste kontenery. Nie można nic wpisać, karty pokazują „0 zł”.

Czas na ten krok: ~5 minut

---

Teraz podłączymy panel inputów. Kwota brutto (main input), forma opodatkowania, koszty działalności, opcje ZUS. Hybrydowe podejście: input text (precyzyjna wartość), slider (eksploracja what-if), dropdown (dyskretne kategorie). Każdy typ pola tam, gdzie ma sens.

Jeszcze nie liczymy podatków - to następny krok. W tym kroku budujemy tylko warstwę wejściową i zapisujemy stan do localStorage.

Uwaga dla VAT-owców: Kwota brutto w tym kalkulatorze to zawsze kwota NETTO z faktury (bez VAT). Jeśli klient płaci Ci 18 450 zł (15 000 netto + 3 450 VAT 23%), wpisz 15 000. VAT jest przechodni - przepływa przez Twoje konto do urzędu skarbowego i nie jest Twoim dochodem dla PIT ani podstawą ZUS. To jest osobny temat od wyboru formy opodatkowania PIT. „Brutto UoP” i „brutto z faktury VAT-owca” to dwa różne pojęcia - kalkulator operuje na trzecim: kwocie netto przed opodatkowaniem PIT.

Prompt do skopiowania

<context>
Mam gotowy layout kalkulatora z ciemnym motywem i 4 kartami wyników
jako placeholderami. Pora dodać panel wejściowy po lewej - tu
użytkownik podaje kwotę miesięczną, wybiera stawkę ryczałtu, ustawia
koszty i rodzaj ZUS. W tym kroku jeszcze nie liczymy podatków
(to następny prompt), ale wszystkie pola muszą działać i zapisywać
wartości w localStorage.
</context>

<role>
Jesteś frontend developerem specjalizującym się w interaktywnych
formularzach finansowych. Wiesz, jak łączyć input text, slider
i dropdown w spójne UX.
</role>

<intent>
Wypełnij lewy panel inputami:
1. Pole "Kwota brutto / przychód miesięczny":
   - Input number (placeholder "np. 15 000 (netto z faktury)") połączony ze sliderem
   - Pod polem hint: "VAT-owcu: wpisz NETTO bez VAT (nie brutto z faktury)"
   - Slider: min=0, max=50000, step=500
   - Zmiana inputu aktualizuje slider i odwrotnie
   - Wyświetl aktualną wartość dużą czcionką JetBrains Mono nad polem
2. Dropdown "Stawka ryczałtu (jeśli B2B)":
   - 8.5% - usługi (standard)
   - 12% - IT, usługi programistyczne (PKWiU 62.01, 62.02)
   - 14% - medycyna, architektura, inżynieria
   - 15% - doradztwo, marketing, reklama
   Domyślnie: 12%
3. Slider "Koszty uzyskania (B2B liniowy / skala)":
   - Zakres 0-10000 PLN/mies, step 100
   - Etykieta z aktualną wartością
4. Radio group "Rodzaj ZUS":
   - Ulga na start (6 pierwszych miesięcy - tylko zdrowotna)
   - Preferencyjny (kolejne 24 miesiące, 456,19 zł społeczne w 2026)
   - Mały ZUS+ (przychód < 120k rocznie)
   - Pełny ZUS (1 926,77 zł społeczne w 2026 - domyślnie)
5. Checkbox "Mam równoległy etat UoP" (≥ minimalne wynagrodzenie)
   - Podpowiedź: "Wyłącza składki społeczne w B2B"
6. Checkbox "Składka chorobowa (dobrowolna w JDG)" - domyślnie off
7. Wszystkie zmiany zapisuj w localStorage pod kluczem
   "kalkulator_inputs" (JSON), ładuj przy starcie strony.
   Na razie bez przeliczeń - tylko zapis stanu.
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- Każdy input ma event listener 'input', wywołuje funkcję
  zapiszInputy() i placeholder function przeliczWyniki()
  (zostanie wypełniona w kolejnym prompcie)
- Sliders: styl ciemny, track #252547, thumb akcent #22d3ee
- Radio i checkbox: custom styling zgodny z dark theme
- Podpowiedzi przy polach: małe ikonki "?" z title tooltipem
- Zachowaj istniejący layout i style
</scope>

<precision>
Zwróć KOMPLETNY, zaktualizowany plik HTML. Zachowaj istniejącą
kolorystykę i strukturę. Dodaj komentarze po polsku przy każdej
grupie inputów wyjaśniające, do czego służy w kalkulacji podatkowej.
</precision>

Co się zmieni

Lewy panel wypełnia się polami. Slider kwoty z cyjanowym thumb. Dropdown stawki ryczałtu z 4 branżami. Radio ZUS z 4 opcjami. Checkbox dla równoległego etatu. Każda zmiana - zapis do localStorage. Odświeżasz stronę - Twoje wartości są tam, gdzie je zostawiłeś.

Weryfikacja

• Zmiana inputu kwoty aktualizuje slider i odwrotnie
• Dropdown stawki ryczałtu ma 4 opcje z etykietami branż
• Slider kosztów pokazuje aktualną wartość w PLN
• Radio ZUS ma 4 opcje, domyślnie zaznaczony „Pełny ZUS”
• Odświeżenie strony zachowuje wszystkie wartości

Co się tu uczysz

• Input-slider sync - dwa pola wpisujące tę samą wartość, synchronizowane przez event listener. Ten sam wzorzec w każdym „kalkulatorze z suwakami” (od porównywarek kredytów po narzędzia HR)
• Custom-styled form controls - domyślne style formularzy są brzydkie. appearance: none + własne style daje kontrolę nad każdym pikselem
• Progressive enhancement - przeliczWyniki() to jeszcze pusta funkcja, ale już jest podłączona do eventów. W kolejnym kroku wystarczy ją wypełnić - cała warstwa eventów już działa

---

Krok 3: Logika podatkowa 2026 (Prompt #3)

---

Stan aplikacji: Panel inputów działa, zapisy do localStorage działają. Karty wyników wciąż pokazują „0 zł”. Pora na serce kalkulatora.

Czas na ten krok: ~7 minut (najdłuższy prompt)

---

Ten krok to faktyczna wartość narzędzia. Cztery funkcje obliczeniowe, każda zwraca obiekt z rozbiciem (brutto, koszty, dochód, ZUS społeczne, zdrowotna, podatek, netto). Wszystkie stawki w jednym obiekcie STAWKI_2026 - żeby w 2027 aktualizacja była zmianą jednego bloku kodu, nie polowaniem po całej aplikacji.

Komentarze w kodzie odnoszą się do konkretnych artykułów ustaw - nie dlatego, że chcemy udawać prawników, ale dlatego, że czytelnik ma prawo wiedzieć, SKĄD bierze się każda liczba.

Prompt do skopiowania

<context>
Panel inputów jest gotowy - zbieram wartości i zapisuję w localStorage,
ale karty wyników pokazują "0 zł". Pora na serce kalkulatora: 4 funkcje
obliczeniowe dla każdej formy zatrudnienia zgodnie z polskimi przepisami
obowiązującymi w kwietniu 2026. To jest kod edukacyjny - musi być
przejrzysty i odnosić się do konkretnych przepisów, żeby czytelnik
rozumiał kolejność działań, nie tylko wynik. WAŻNE: to nie jest
doradztwo podatkowe, tylko narzędzie edukacyjne.
</context>

<role>
Jesteś frontend developerem z praktyczną znajomością polskiego systemu
podatkowego 2026 (PIT, ryczałt, składka zdrowotna po Polskim Ładzie).
Piszesz kod obliczeniowy w sposób, który jest jednocześnie poprawny
i dydaktyczny.
</role>

<intent>
Zaimplementuj logikę podatkową:
1. Na początku skryptu zdefiniuj obiekt STAWKI_2026 zawierający
   WSZYSTKIE wartości w jednym miejscu (żeby w 2027 wystarczyło
   podmienić jeden obiekt):
   - progi_pit: { prog1: 120000, stawka1: 0.12, stawka2: 0.32,
     kwota_wolna_roczna: 30000, kwota_zmniejszajaca_mies: 300 }
   - liniowy_stawka: 0.19
   - ryczalt_stawki: { "3": 0.03, "5.5": 0.055, "8.5": 0.085,
     "10": 0.10, "12": 0.12, "14": 0.14, "15": 0.15, "17": 0.17 }
   - zdrowotna: { skala: 0.09, liniowy: 0.049,
     ryczalt_prog1: 498.35, ryczalt_prog2: 830.58, ryczalt_prog3: 1495.04 }
     (progi przychodu rocznego: do 60k, 60-300k, powyżej 300k;
     podstawą jest przeciętne wynagrodzenie 9 228,64 zł × 60%/100%/180% × 9%)
   - zus_spoleczne: { ulga_start: 0, preferencyjny: 456.19,
     maly_plus: 456.19, pelny: 1926.77 }
     (pełny ZUS bez zdrowotnej, z Funduszem Pracy)
   - uop: { emerytalna: 0.0976, rentowa: 0.015, chorobowa: 0.0245,
     zdrowotna: 0.09, kup: 250 }
   - minimalne_wynagrodzenie: 4806
2. Zaimplementuj 4 funkcje, każda przyjmuje obiekt inputów
   i zwraca { brutto, koszty, dochod, zus_spoleczne, zus_zdrowotna,
   podatek, netto }:
   - liczUoP(inputy): składki 13.71% brutto, zdrowotna 9% od
     podstawy, PIT 12%/32% z kwotą zmniejszającą, KUP 250 zł
   - liczRyczalt(inputy): przychód - ZUS społeczne, ryczałt = podstawa
     × stawka, składka zdrowotna z progu przychodu rocznego
     (mnożymy miesięczny przychód × 12)
   - liczLiniowy(inputy): dochód_miesięczny = przychód - koszty - ZUS społeczne,
     podatek = dochód × 19%,
     zdrowotna_obliczona = 4.9% × dochód,
     zdrowotna_minimalna = 9% × minimalne_wynagrodzenie = 0.09 × 4806 = 432.54 zł,
     zdrowotna = Math.max(zdrowotna_obliczona, zdrowotna_minimalna)
     (UWAGA: dla skali minimalna składka również wynosi 432.54 zł
      - chroni przed ujemną składką przy niskich dochodach)
   - liczSkala(inputy): dochód roczny, próg 120k, kwota wolna 30k,
     zdrowotna 9% dochodu
3. Funkcja przeliczWyniki() wywołuje wszystkie 4 funkcje, wyświetla
   wyniki w kartach, formatuje PLN ("15 234,56 zł"), w karcie
   z najwyższym netto - zielony border i badge "Najkorzystniejsze".
4. Checkbox "Mam równoległy etat" w funkcjach B2B zeruje
   zus_spoleczne (bo płacimy z UoP).
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- Przy każdej funkcji obliczeniowej - komentarz po polsku z odwołaniem
  do przepisu (np. "art. 27 ust. 1 ustawy o PIT - skala podatkowa",
  "art. 12 ust. 1 ustawy o zryczałtowanym podatku")
- Wszystkie kwoty zaokrąglone: podatek do pełnego złotego
  (Math.round), składki i netto do 2 miejsc po przecinku
- Ikonka trendu przy każdej karcie: ▲ zielony jeśli więcej niż UoP,
  ▼ czerwony jeśli mniej (UoP jako benchmark bazowy)
- Pod dużą liczbą netto w karcie - mała etykieta "rocznie: X zł"
- Disclaimer bannera zostaje widoczny
</scope>

<precision>
Zwróć KOMPLETNY, zaktualizowany plik HTML z pełną logiką obliczeniową.
Obiekt STAWKI_2026 na początku skryptu, 4 funkcje obliczeniowe z pełnymi
komentarzami dydaktycznymi. Kod ma być taki, żeby czytelnik mógł
śledzić kolejność: Przychód → Koszty → Dochód → Składki → Podatek → Netto.
</precision>

Co się zmieni

Wpisujesz 15 000 zł w polu kwoty. W czterech kartach pojawiają się 4 różne liczby netto. Dla 15k brutto na IT (ryczałt 12%) najkorzystniejszy jest ryczałt - zielony border, badge „Najkorzystniejsze”. UoP - około 10 400 zł. Liniowy - około 9 050 zł. Skala - około 8 600 zł (bo przy 15k/mies wchodzimy w drugi próg 32%).

Zmieniasz kwotę na 7 000 zł - obraz się zmienia. Dla niższych kwot skala i UoP są konkurencyjne dzięki kwocie wolnej 30k. Widzisz to w czasie rzeczywistym, przesuwając slider.

Weryfikacja

• Zmiana kwoty brutto natychmiast aktualizuje wszystkie 4 karty
• Karta z najwyższym netto ma zielony border i badge „Najkorzystniejsze”
• Pod liczbą netto widoczna jest wartość roczna
• Ikonka trendu (▲/▼) pokazuje różnicę względem UoP
• Checkbox „Mam równoległy etat” zmienia wyniki B2B (składki społeczne znikają)

Co się tu uczysz

• Konfiguracja w jednym miejscu - STAWKI_2026 jako central config. Kiedy ustawa się zmienia, edytujesz JEDEN obiekt zamiast przeszukiwać 500 linii kodu
• Progi podatkowe jako funkcja - PIT 12%/32% to nie prosta stawka, tylko krzywa schodkowa. Formalnie: podatek = max(0, dochód - 30000) * 0.12 do progu, + (dochód - 120000) * 0.32 powyżej. To wzorzec dla każdej „progresywnej” logiki w aplikacjach
• Zaokrąglenia prawnie poprawne - w polskim prawie podatek jest zaokrąglany do pełnej złotówki, składki do grosza. Te różnice to nie „drobiazg” - dla księgowego to prawidłowy output, nie bug

---

Uwaga meritum: polskie stawki podatkowe to pole minowe - progi, ulgi, PKWiU, IP Box, zwolnienia. Ten kalkulator pokazuje 95% przypadków poprawnie, 5% wymaga księgowego. Stawki zmieniają się co roku (minimalne wynagrodzenie, przeciętne wynagrodzenie → składki) - obiekt STAWKI_2026 aktualizujesz raz i cały kalkulator działa. Do decyzji o formie działalności skonsultuj się z księgowym - to nie jest nadmierna ostrożność, to uczciwość wobec Ciebie. Jeśli chcesz nauczyć się od zera projektowania logiki biznesowej z Claude - darmowy Kurs Claude AI ma 38 lekcji i moduł o kalkulatorach.

---

Krok 4: Wykres Chart.js (Prompt #4)

---

Stan aplikacji: Liczby są, karty się aktualizują. Jedna wielka liczba netto nie pokazuje jednak DLACZEGO różnice są takie, a nie inne.

Czas na ten krok: ~5 minut

---

Wykres słupkowy stacked to najbardziej zrozumiała wizualizacja porównawcza. Każdy słupek to forma zatrudnienia. Wysokość słupka to pełne brutto (identyczna dla wszystkich). Segmenty słupka - gdzie idzie każda złotówka: ile zostaje jako netto, ile na podatek, ile na ZUS, ile na składkę zdrowotną.

Spojrzenie na wykres pokazuje w 2 sekundy coś, co dla tabel wymaga minuty: dlaczego ryczałt 12% wygrywa przy wysokich kwotach (mniejszy „czerwony” podatek), dlaczego UoP traci dużo na składkach społecznych.

Prompt do skopiowania

<context>
Kalkulator liczy poprawnie - 4 karty pokazują netto dla każdej formy,
najkorzystniejsza ma zielony ring. Pora dodać warstwę wizualną, która
pokaże DLACZEGO różnice są takie a nie inne. Wykres słupkowy stacked
porównujący rozbicie brutto na składniki (netto, podatek, ZUS
społeczne, składka zdrowotna) dla każdej formy.
</context>

<role>
Jesteś frontend developerem i data visualization specialist.
Znasz Chart.js 4.x, budujesz wykresy, które edukują, a nie tylko ozdabiają.
</role>

<intent>
Dodaj wykres porównawczy:
1. Wczytaj Chart.js 4.4.1 z CDN w head:
   https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js
2. Pod gridem 4 kart (w środkowej kolumnie) dodaj canvas
   o wysokości 400px z tytułem "Gdzie idzie każda złotówka brutto?"
3. Wykres typu 'bar' stacked:
   - Oś X: "Umowa o pracę", "B2B Ryczałt", "B2B Liniowy", "B2B Skala"
   - Oś Y: PLN (miesięcznie)
   - 4 datasety (segmenty każdego słupka):
     - "Netto na rękę" (#10b981 zielony)
     - "Podatek" (#ef4444 czerwony)
     - "ZUS społeczne" (#f59e0b pomarańczowy)
     - "Składka zdrowotna" (#eab308 żółty)
   - Koszty w B2B liniowym/skali - dataset "Koszty działalności"
     (#6b7280 szary) tylko tam, gdzie są > 0
4. Tooltips Chart.js:
   - Format PLN ("2 345,67 zł")
   - Po polsku
   - Pokazuj procent udziału w brucie ("31% brutto")
5. Wykres aktualizuje się na każdą zmianę inputu (wewnątrz
   przeliczWyniki() wywołaj chart.update() po ustawieniu danych).
6. Styl wykresu dopasowany do dark theme:
   - Siatka bardzo subtelna #252547
   - Tekst osi i legendy #9ca3af
   - Legenda na dole, punkt-kropka przy etykietach
7. Po kliknięciu w słupek - wybrana forma staje się aktywna
   (prawy panel breakdown pokazuje jej szczegóły, prompt 5).
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- Animacja wykresu: duration 400ms (żeby zmiana wartości nie
  irytowała przy szybkim przesuwaniu slidera)
- Responsywny: maintainAspectRatio: false, wysokość z CSS
- Instancja wykresu jako zmienna globalna (żeby można było .update())
- Zachowaj całą dotychczasową funkcjonalność
</scope>

<precision>
Zwróć KOMPLETNY, zaktualizowany plik HTML z wykresem Chart.js.
Komentarze wyjaśniające, dlaczego stacked bar jest właściwym wyborem
dla tej wizualizacji (porównanie struktury 100% brutto).
</precision>

Co się zmieni

Pod 4 kartami pojawia się duży wykres. Cztery słupki identycznej wysokości (bo brutto to samo). Każdy podzielony na kolorowe segmenty. Dla UoP widać duży pomarańczowy (ZUS społeczne) i czerwony (PIT). Dla ryczałtu - praktycznie brak pomarańczowego (bo składki społeczne są płaskie, nie procentowe), mały czerwony (bo 12% zamiast 19%+). Zielony (netto) wyraźnie większy.

Najedź na segment - tooltip pokazuje kwotę i procent brutto. Kliknij słupek - wybrana forma staje się aktywna (panel szczegółów zaktualizuje się w kolejnym kroku).

Weryfikacja

• Wykres pojawia się pod kartami wyników
• 4 słupki o identycznej wysokości (100% brutto)
• Segmenty: netto (zielony), podatek (czerwony), ZUS społeczne (pomarańczowy), zdrowotna (żółty)
• Zmiana inputów animuje przejście segmentów
• Tooltips po polsku, z procentami

Co się tu uczysz

• Stacked bar dla struktur 100% - gdy porównujesz składniki tej samej całości (100% brutto dzielone różnie), stacked bar jest jednoznacznie czytelniejszy niż 4 osobne wykresy kołowe
• Chart.js update vs recreate - chart.update() jest tańsze i płynniejsze niż zniszczenie i odtworzenie wykresu. Słupki animują się między wartościami, nie „migają” przy każdej zmianie
• Event onClick na wykresie - Chart.js udostępnia zdarzenie kliknięcia ze zwrotem indeksu elementu. Podstawa każdej interaktywnej wizualizacji

---

Dla porównania: ten sam wykres w money.pl byłby otoczony 12 reklamami i bannerem „Zapisz się do newslettera”. Twój kalkulator - zero. Każdy piksel renderuje się z Twojego kodu, Twoje dane o zarobkach zostają w Twojej przeglądarce. Ta różnica nie jest tylko wizualna - to jest różnica między byciem produktem a użytkownikiem.

---

Krok 5: Breakdown wybranej formy + scenariusze (Prompt #5)

---

Stan aplikacji: Kalkulator liczy, wykres wizualizuje. Prawy panel „Szczegóły” wciąż jest pusty. Potrzebujesz też sposobu na porównanie dwóch scenariuszy (np. „oferta A vs oferta B”).

Czas na ten krok: ~5 minut

---

Prawy panel pokazuje krok-po-kroku wyliczenie wybranej formy. Jak księgowy tłumaczy klientowi: „najpierw bierzemy przychód, odejmujemy koszty, dostajemy dochód, liczymy ZUS, liczymy podatek”. Dla każdego kroku - opis SKĄD się bierze liczba.

Plus modal do porównania 2 scenariuszy - bo realne decyzje rzadko są „15 000 na skali”. Częściej są „Oferta A: 14 000 na ryczałcie 12% vs Oferta B: 16 000 na UoP”.

Prompt do skopiowania

<context>
Kalkulator ma wyniki i wykres. Prawy panel "Szczegóły" wciąż jest
pusty. Chcę, żeby po kliknięciu w kartę wyników lub słupek wykresu,
prawy panel pokazywał pełne rozbicie wybranej formy - krok po kroku,
jak księgowy tłumaczy klientowi. Dodatkowo quick-buttons i porównanie
scenariuszy (np. "14k na ryczałcie vs 12k na UoP").
</context>

<role>
Jesteś frontend developerem z doświadczeniem w projektowaniu dashboardów
analitycznych. Rozumiesz różnicę między pokazywaniem liczb a tłumaczeniem
decyzji.
</role>

<intent>
Wypełnij prawy panel i dodaj scenariusze:
1. Panel "Szczegóły" aktualizuje się po kliknięciu karty lub słupka.
   Pokazuj w kolejności krok-po-kroku (z opisami):
   - Przychód/Brutto: [kwota]
   - Koszty uzyskania: [kwota] (tylko dla liniowego/skali)
   - Dochód: [kwota] (Przychód - koszty - ZUS społeczne)
   - ZUS społeczne: [kwota] + podpowiedź "Jakie składki?"
     (tooltip: emerytalna + rentowa + chorobowa + wypadkowa)
   - Składka zdrowotna: [kwota] + wzór (np. "9% × dochód"
     albo "628 zł (próg 60-300k)")
   - Podatek: [kwota] + stawka (np. "19% od dochodu"
     albo "12% do 120k + 32% nadwyżka")
   - ---
   - NETTO miesięcznie: [kwota] (duża liczba 48px, cyjan)
   - NETTO rocznie: [kwota × 12]
2. Nad panelem inputów - rząd quick-buttons:
   "5 000 | 10 000 | 15 000 | 20 000 | 25 000 | 30 000 PLN".
   Kliknięcie ustawia kwotę brutto i przelicza.
3. Pod gridem 4 kart - komunikat podsumowujący:
   "Różnica roczna między [najlepszą formą] a [najgorszą formą]:
   X zł. Pomyśl, ile to weekendów w górach."
   (Ten polski "twist" odnoszący się do realiów - nie suchy raport.)
4. Przycisk "Porównaj 2 scenariusze" otwiera modal:
   - 2 kolumny inputów obok siebie (Scenariusz A / Scenariusz B)
   - Pod każdym: netto miesięczne i roczne
   - Na dole: "Różnica roczna: X zł"
   - Przycisk zamknij
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- Podpowiedzi/tooltips: natywne title= dla MVP, bez zewnętrznych
  bibliotek tooltip
- Modal: overlay #000000 z opacity 0.7, karta centrowana,
  zamknięcie przez X lub klik na overlay
- Stan aktywnej formy w karcie: cyjanowy border 2px zamiast
  standardowego (zielony zostaje dla najlepszej)
- Zachowaj całą dotychczasową funkcjonalność
</scope>

<precision>
Zwróć KOMPLETNY, zaktualizowany plik HTML z wypełnionym panelem
szczegółów, quick-buttons, komunikatem podsumowującym i modalem
porównania scenariuszy. Tekst komunikatów w tonie dydaktycznym,
bez żargonu księgowego.
</precision>

Co się zmieni

Klikasz w kartę „B2B Ryczałt”. Prawy panel pokazuje: Przychód 15 000 zł → ZUS społeczne 1 926,77 zł → Podstawa opodatkowania 13 073,23 zł → Ryczałt 12% = 1 569 zł → Składka zdrowotna 830,58 zł (próg 60-300k) → NETTO 10 673,65 zł.

Klikasz w UoP - zmienia się cała sekwencja. Każdy krok z wyjaśnieniem. Pod kartami komunikat: „Różnica roczna: 26 928 zł. Pomyśl, ile to weekendów w górach.”

Klikasz „Porównaj 2 scenariusze” - otwiera się modal z dwoma kolumnami inputów. Wpisujesz do każdego różne wartości i widzisz różnicę roczną.

Weryfikacja

• Kliknięcie w kartę lub słupek wyświetla szczegóły wybranej formy
• Panel szczegółów pokazuje kroki: Przychód → Dochód → ZUS → Podatek → Netto
• Quick-buttons ustawiają kwotę i natychmiast przeliczają
• Komunikat różnicy rocznej pojawia się pod wykresem
• Modal porównania scenariuszy otwiera się i liczy różnicę

Co się tu uczysz

• Modal bez biblioteki - overlay + karta centrowana. Kiedyś był do tego Bootstrap, teraz wystarczy 20 linijek CSS. Framework nie jest potrzebny do prostych interakcji
• Tooltip z atrybutem title - dla MVP wystarczy natywny title=„...”. Jeśli potrzebujesz styled tooltip z delay i pozycjonowaniem - wtedy biblioteka. Dla prostych narzędzi: zacznij od title, bibliotekę dodawaj dopiero gdy faktycznie Ci zabraknie
• Komunikat w ludzkim języku - „26 928 zł różnicy” vs „26 928 zł to 4-6 weekendów w górach” - pierwszy przypadek jest informacją, drugi jest historią. Narzędzia finansowe z historiami mają wyższą retencję

---

Krok 6: Zapis scenariuszy + eksport (Prompt #6)

---

Stan aplikacji: Kalkulator jest w pełni funkcjonalny. Wszystko jednak jest ulotne - nie ma jak zapisać „scenariusza z rozmowy o pracę w firmie X”.

Czas na ten krok: ~4 minuty

---

Ostatni krok przekształca kalkulator w notatnik decyzyjny. Zapisujesz scenariusz z notatką („oferta ABC - 18k na ryczałcie”). Zapisujesz drugi („oferta DEF - 16k na UoP”). Wracasz za miesiąc - masz historię swoich przeliczeń. Eksportujesz PDF do porównania z księgową. JSON-y jako backup między laptopem prywatnym a firmowym.

Prompt do skopiowania

<context>
Kalkulator ma pełną funkcjonalność obliczeniową, wykres, szczegóły,
porównanie scenariuszy. Ostatni krok: pozwolić użytkownikowi zapisać
konkretne scenariusze (np. "rozmowa o pracę w firmie X, 15k brutto")
i wyeksportować wyniki do PDF lub JSON.
</context>

<role>
Jesteś frontend developerem specjalizującym się w client-side
persistence i drukowanych layoutach (CSS @media print).
</role>

<intent>
Dodaj zapis i eksport:
1. Pod panelem inputów - sekcja "Zapisz scenariusz":
   - Pole "Notatka" (textarea, placeholder: "np. Oferta - Firma X")
   - Przycisk "Zapisz scenariusz"
   - Zapis do localStorage pod kluczem "kalkulator_scenariusze"
     (tablica obiektów: id, data, inputy, wyniki_wszystkie_4_formy,
     notatka)
2. Panel "Moje scenariusze" (zwijany, domyślnie schowany jeśli pusty):
   - Lista zapisanych scenariuszy, sortowanie od najnowszych
   - Każda pozycja: data, notatka, kwota brutto, najkorzystniejsza
     forma + jej netto
   - Akcje: "Wczytaj" (ładuje inputy), "Usuń" z confirm
3. Przycisk "Pobierz wyniki PDF" używa window.print():
   - CSS @media print: białe tło, czarny tekst, zachowaj strukturę
     kart, hide panel inputów i listę scenariuszy, pokaż pełne
     rozbicie wszystkich 4 form
   - Nagłówek drukowanego PDF: "Porównanie form zatrudnienia 2026",
     data wygenerowania, kwota brutto
   - Stopka: disclaimer o edukacyjnym charakterze
4. Przycisk "Eksportuj wszystkie scenariusze (.json)":
   - Pobierz plik "kalkulator_scenariusze_YYYY-MM-DD.json"
5. Przycisk "Importuj scenariusze" (input file, accept=".json"):
   - Wczytaj i dopisz do istniejących (try/catch, walidacja struktury)
6. Pole "Ostatnio zaktualizowano stawki" na dole strony:
   "Stawki z kwietnia 2026. Sprawdź aktualność na biznes.gov.pl"
   (link zewnętrzny target="_blank").
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- @media print: @page { size: A4; margin: 15mm }, wyłącz dark theme
  w druku (force white bg, black text).
- Chart.js w druku: przed wywołaniem window.print() wywołaj
  chart.resize() oraz chart.render(). Użyj setTimeout(() => window.print(), 100)
  żeby Chart.js zdążył się odrysować. Po zamknięciu dialogu - chart.resize()
  ponownie dla responsywności.
- Confirm dialogi dla operacji usuwania
- Toast "Scenariusz zapisany" po zapisie (2 sekundy, fade-out)
- Zachowaj wszystkie dotychczasowe funkcje
</scope>

<precision>
Zwróć KOMPLETNY, FINALNY plik HTML kalkulatora. To jest ostateczna
wersja zawierająca: layout, inputy, logikę 4 form, wykres, breakdown,
porównanie scenariuszy, zapis i eksport. Pełny kod gotowy do użycia.
</precision>

Co dostaniesz

Wpisujesz notatkę „Oferta ACME - 18k na ryczałcie”. Klikasz „Zapisz scenariusz”. Toast „Scenariusz zapisany”. Panel „Moje scenariusze” pokazuje pozycję z datą, notatką, kwotą, najlepszą formą.

Klikasz „Pobierz wyniki PDF”. Otwiera się dialog drukowania, wybierasz „Zapisz jako PDF”. Plik pokazuje białą, profesjonalną wersję kalkulatora - bez ciemnego tła, z nagłówkiem „Porównanie form zatrudnienia 2026”, datą, kwotą i pełnym rozbiciem wszystkich 4 form.

Weryfikacja

• Zapisanie scenariusza wyświetla toast i dodaje do listy
• Wczytanie scenariusza przywraca wszystkie inputy
• PDF wygenerowany przez Print-to-PDF ma białe tło i czarny tekst
• PDF zawiera wykres i rozbicie wszystkich 4 form
• Eksport JSON pobiera plik z datą w nazwie

Co się tu uczysz

• window.print() vs jsPDF - dla prostego PDF print do pliku w przeglądarce wystarczy CSS @media print. Żadnej biblioteki, pełne wsparcie polskich znaków. Tradeoff: UX „Zapisz jako PDF” w dialogu drukowania jest nieoczywisty dla nietechnicznych użytkowników. Dla analytics/raportów - OK. Dla ofert handlowych (zobacz tutorial generatora ofert) - jsPDF jest lepszy
• CSS @media print - body { background: white; color: black } + .panel-inputow { display: none } + @page { size: A4; margin: 15mm }. Cztery reguły zmieniają UX z „ekran” w „druk”
• Mini-notatnik decyzyjny - nie sprzedajemy kalkulatora, tylko persystencję decyzji. Różnica między „narzędziem jednorazowym” a „narzędziem które wracam za miesiąc”

---

Efekt końcowy - co masz po 30 minutach

Po przejściu 6 kroków masz plik kalkulator.html z:

Funkcja	Status
Layout 3-panelowy w ciemnym motywie	Działa
Panel inputów (kwota, stawka ryczałtu, koszty, ZUS)	Działa
Walidacja scenariuszy: równoległy etat, chorobowa, ZUS	Działa
Obliczenia netto dla 4 form (UoP, ryczałt, liniowy, skala)	Działa
Konfiguracja STAWKI_2026 w jednym miejscu	Działa
Podświetlenie najkorzystniejszej formy	Działa
Wykres Chart.js stacked (4 słupki z segmentami)	Działa
Interaktywne szczegóły wybranej formy	Działa
Quick-buttons kwot (5k, 10k, 15k, 20k, 25k, 30k)	Działa
Komunikat podsumowujący różnicę roczną	Działa
Modal porównania 2 scenariuszy obok siebie	Działa
Zapis scenariuszy z notatkami (localStorage)	Działa
Eksport PDF (window.print + @media print)	Działa
Eksport/import JSON (backup)	Działa

Jeden plik. Działa offline. Zero rejestracji. Stawki aktualne na kwiecień 2026.

---

Czego się właśnie nauczyłeś

Cztery kompetencje, które zabierzesz do każdego kolejnego narzędzia z liczbami:

1. Konfiguracja w jednym miejscu

Obiekt STAWKI_2026 to wzorzec „central config”. Kiedy w 2027 stawki się zmienią, edytujesz jeden blok, nie polujesz po całej aplikacji. Ten sam wzorzec w każdej aplikacji z progami, kursami, limitami - od sklepów internetowych po systemy lojalnościowe.

2. Progi schodkowe jako funkcja

PIT 12%/32%, składka zdrowotna ryczałtu z 3 progami przychodowymi, Mały ZUS+ ze swoim limitem - to wszystko są funkcje schodkowe. Wzorzec implementacji jest identyczny. Dziś piszesz podatek PIT, jutro będziesz pisać rabaty progowe w ecommerce.

3. Kalkulatory multivariate

Cztery wyniki równolegle z tym samym inputem. Każda zmiana aktualizuje wszystkie. Ten wzorzec działa w porównywarkach kredytów, kalkulatorach marż, symulacjach inwestycyjnych. Masz go teraz w palcach.

4. Dashboard-style UX

3 panele, wszystko widoczne naraz, zmiany propagują się bez kliknięć. To różnica między „narzędziem typu formularz” a „narzędziem analitycznym”. Dla użytkownika - różnica między męczeniem a eksplorowaniem.

---

5 kierunków rozbudowy

1. Spółka z o.o. jako 5. forma

„Dodaj 5. formę: 'Spółka z o.o.'. Założenia: CIT 9% (mały podatnik) lub 19%, dywidenda 19%, obowiązkowe składki ZUS prezesa zarządu, minimalny kapitał 5 000 zł. Dodaj kartę wyników i dataset wykresu.”

2. Ulga IP Box (dla IT)

„Dodaj checkbox 'Rozliczam ulgę IP Box (5% od kwalifikowanego dochodu IP)'. Dla B2B liniowego i skali - gdy zaznaczone, zastosuj stawkę 5% zamiast 19% dla dochodu z praw autorskich (dodaj suwak '% dochodu z IP').”

3. Umowa zlecenie / o dzieło

„Dodaj 6. i 7. formę: umowa zlecenie (z KUP 20%) i o dzieło (z KUP 20% lub 50% dla prac twórczych). Uwzględnij składki ZUS pracownika zleceniobiorcy. Sytuacje edge: student do 26 roku życia (PIT zero).”

4. Historia zmian stawek (timeline)

„Dodaj sekcję 'Historia stawek' z tabelą roczną - jak zmieniały się progi PIT, kwota wolna, składka zdrowotna od 2019. Pozwala użytkownikowi zrozumieć trend i zobaczyć Polski Ład w kontekście.”

5. Kalkulator rocznego PIT (po roku w DG)

„Dodaj zakładkę 'Rozliczenie roczne' - użytkownik wpisuje 12 miesięcznych przychodów, a kalkulator wylicza należny PIT roczny z uwzględnieniem kwoty wolnej, progów i rozliczenia składki zdrowotnej (korekta między zaliczkami a należną).”

6. Tryb VAT-owca z cash-flow

„Dodaj checkbox 'Jestem czynnym VAT-owcem'. Po zaznaczeniu: pokaż dodatkowe pole 'Stawka VAT' (dropdown 23/8/5/0), pole 'Przewidywane odliczenia VAT miesięcznie' (slider 0-3000 zł) i nowy panel cash-flow: ile VAT miesięcznie odprowadzasz do US, ile odliczasz, jaki realny cash flow przy założeniu 14-dniowego terminu płatności klienta.”

---

Najczęstsze problemy i rozwiązania

Problem	Przyczyna	Rozwiązanie
Wyniki są dziwnie duże lub małe	Pomyłka w jednostce (roczne vs miesięczne)	„Sprawdź, czy w funkcji liczRyczalt przychód roczny to przychód × 12, a stawki zdrowotne są miesięczne”
Dla małych kwot skala daje ujemny podatek	Brak max(0, ...) przy kwocie wolnej	„Dodaj Math.max(0, podstawa - kwota_wolna_mies) żeby podatek nie był ujemny”
Wykres nie aktualizuje się	Brak wywołania chart.update()	„Po każdym wypełnieniu dataset.data wywołaj chart.update()”
Checkbox 'mam etat' nie działa	Brak odczytu w funkcjach B2B	„W każdej funkcji liczRyczalt/liczLiniowy/liczSkala na początku: if (inputy.ma_etat) zus_spoleczne = 0”
PDF ma ciemne tło	Brak @media print w CSS	„Dodaj @media print { body { background: white; color: black; } }”
Progi zdrowotne ryczałtu nieprawidłowe	Brak mnożenia przez 12	„Próg zdrowotny porównuje przychód ROCZNY - pomnóż miesięczny przychód × 12 przed porównaniem z 60000 i 300000”

---

Kiedy ten kalkulator Ci NIE pomoże

Uczciwość w każdą stronę - oto sytuacje, gdzie kalkulator jest za mało:

• Masz nietypową branżę - niektóre PKWiU mają niestandardowe stawki ryczałtu (2%, 3%, 5,5%). Kalkulator pokazuje 4 najczęstsze (8,5%, 12%, 14%, 15%).
• Rozważasz spółkę z o.o. - 5. forma (CIT 9% lub 19% + dywidenda 19%) to inna liga. Zobacz „Kierunki rozbudowy”.
• Jesteś VAT-owcem i chcesz analizować cash-flow - kalkulator liczy PIT/ZUS/netto (to jest ortogonalne do VAT). Sam VAT przepływa przez konto do urzędu skarbowego i wraca do Ciebie przez odliczenia od sprzętu, SaaS, biura. To osobny temat - rozbuduj kalkulator osobnym promptem albo zbuduj drugi kalkulator cash-flow VAT-owca.
• Korzystasz z ulgi IP Box - 5% dla IT zmienia ekonomię. Trzeba dodać checkbox i odrębny wzór dla dochodu kwalifikowanego.
• Rozliczasz się wspólnie z małżonkiem - kalkulator zakłada rozliczenie indywidualne, wspólne obniża efektywną stawkę na skali.
• Masz dochody z zagranicy - umowy o unikaniu podwójnego opodatkowania to osobny świat.
• Jesteś studentem < 26 lat - ulga „PIT zero” do 85 528 zł rocznie zmienia kalkulacje UoP.

Jeśli masz którąkolwiek z powyższych sytuacji - traktuj kalkulator jako PUNKT STARTU, nie ostateczną odpowiedź. Do decyzji - księgowy.

---

Po co to sobie robić, skoro jest money.pl

Money.pl ma 47 reklam. Pit.pl pyta o wiek. Useme.com chce założenia konta. Każdy z tych serwisów widzi Twoje zarobki i łączy je z plikami cookies reklamowymi. Twoje dane o tym, ile zarabiasz i jakie rozważasz oferty, trafiają do 14 brokerów danych.

Zbudowałeś kalkulator, który tego nie robi. Twoje zarobki zostają w localStorage Twojej przeglądarki. Nawet jeśli używasz kalkulatora na laptopie firmowym, nikt z zewnątrz tego nie widzi.

Plus - zrozumiałeś, co robisz. Po przejściu tego tutoriala wiesz, DLACZEGO ryczałt 12% wygrywa przy wysokich kwotach, dlaczego UoP traci dużo w składkach społecznych, dlaczego skala przestaje być opłacalna powyżej 120k rocznie. To wiedza, której nie daje żaden kalkulator klikany raz.

W generatorze ofert zbudowałeś narzędzie sprzedażowe. Dzisiaj - narzędzie decyzyjne. Razem to coraz bardziej kompletny warsztat, którego elementy kontrolujesz sam.

---

Co dalej

Następny krok	Co zyskasz
Zbuduj generator ofert PDF	Zastąp Proposify (140 zł/mies) - własny generator z logo, VAT i historią
Framework CRISP - inżynieria promptów	Nauczysz się pisać prompty, które dają działający kod za pierwszym razem
Vibe coding z Claude Code	Przejdziesz od kalkulatora w HTML do realnej aplikacji SaaS
Kurs Claude AI - 38 lekcji, darmowy	6 modułów od zera do zaawansowanego - CEO, marketing, sprzedaż, programowanie

Jeśli jesteś nowy na blogu - Zacznij Tutaj. 3 ścieżki nauki dopasowane do Twojej roli.

---

Aktualność stawek: Kalkulator używa wartości obowiązujących w kwietniu 2026. Krytyczne liczby do weryfikacji co roku: minimalne wynagrodzenie, podstawa pełnego ZUS, progi zdrowotne ryczałtu. Zawsze sprawdź przed użyciem do realnej decyzji: biznes.gov.pl i podatki.gov.pl.

Autor nie jest doradcą podatkowym ani księgowym. Artykuł ma charakter edukacyjny. Decyzje finansowe konsultuj z certyfikowanym księgowym.

---

Ten artykuł to część serii „Zbuduj to z AI”. Zobacz też: Aplikacja pogodowa | Timer Pomodoro | Tablica Kanban | Tracker nawyków | Generator ofert PDF