Case study10 / 10Aplikacja & automatyzacjaProjekt autorski2026

Kalkulator wyceny strony www.

Interaktywny wizard: 6 pytań, makieta z Blendera, która rośnie z każdą odpowiedzią, i kosztorys na żywo zakończony widełkami cenowymi.

Projekt na ekranieZobacz, jak działa
Kalkulator wyceny strony www, wersja desktopowa
Wersja desktopowa
Kalkulator wyceny strony www, wersja mobilna
Wersja mobilna

Od wyzwania do efektu.

Każdy etap pokazuję na zrzutach z działającej wersji. Kliknij ujęcie, żeby je powiększyć.

Klient
Projekt autorski (demo)
Technologie
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Framer Motion
  • Blender
Zakres projektu
  • Projekt UI/UX
  • Wizard 6 kroków
  • Silnik wyceny
  • Kosztorys pozycja po pozycji
  • Makieta 3D (Blender)

Wyzwanie

Pierwsze pytanie każdego klienta brzmi „ile to kosztuje?”, a odpowiedź wymaga maili, telefonów i ręcznego liczenia. Część zainteresowanych odpada, zanim dostanie jakąkolwiek liczbę, a usługodawca traci czas na wyceny, z których nic nie wynika.

Klient nie musi znać cennika, bo zaczyna od prostego pytania, a pusty kosztorys czeka na jego pierwszą decyzję.

Rozwiązanie

Zbudowałem kalkulator w estetyce rysunku technicznego: jedno pytanie na ekran (typ strony, podstrony, design, treści, funkcje, termin), a obok pytań rośnie makieta placu budowy złożona z 18 warstw wyrenderowanych w Blenderze. Każda odpowiedź dokłada element makiety, a najechanie na opcję pokazuje jej szkic, zanim klient ją wybierze. Kosztorys dopisuje pozycje na żywo, suma nalicza się jak na taksometrze, a numer w kółku przy pozycji wskazuje ten sam element na makiecie, jak na rysunku złożeniowym. Kalkulator obsłużysz z klawiatury, a na telefonie kosztorys czeka w dolnej szufladzie. Wynik to arkusz z widełkami, czasem realizacji, założeniami i przyciskiem „Zmień” przy każdym kroku. Bez żargonu, bez podawania maila, bez zobowiązań.

Zanim klient kliknie, widzi szkic tego, co dana opcja dobuduje do jego strony.
Każda odpowiedź dopisuje pozycję do kosztorysu i element do makiety, a numer w kółku łączy jedno z drugim.
Makieta rośnie nad pytaniem, a pełny kosztorys czeka w dolnej szufladzie.

Efekt

Klient dostaje orientacyjną cenę w 60 sekund o dowolnej porze, a do rozmowy trafia już z realnymi oczekiwaniami. Wzorzec automatyzacji pierwszego kontaktu do wpięcia w stronę dowolnej firmy usługowej.

Klient dostaje widełki, czas realizacji i jeden jasny następny krok zamiast maila z pytaniem o cenę.
Tę samą wycenę na telefonie można wysłać wspólnikowi jako link.

Strzałki w lewo i w prawo zmieniają ujęcie. Escape zamyka podgląd.

Chcesz podobny projekt?

Opowiedz mi o swojej firmie. Przygotuję bezpłatną wycenę i propozycję rozwiązania.

Wyceń projekt