RESEARCH / 20.10.2026 / PROPOZYCJE DO OCENY

Co warto przenieść
z Firecrawl do Dealyo.

Analiza renderu, DOM, CSS i JavaScript strony firecrawl.dev oraz porównanie ze źródłami Dealyo. Cztery niezależne zakresy: układ, ruch, wskaźniki, obecna biblioteka.

Wniosek: największa wartość to kompozycja całych sekcji i demonstracje wyjaśniające działanie. Część potrzebnych elementów już mamy — trzeba je poprawnie udostępnić.

To osobny raport badawczy. Dokumentuje punkt wyjścia; wdrażane propozycje są dostępne w osobnej galerii. Checkboxy służą do przeglądu i nie zapisują decyzji.

Co faktycznie sprawdziliśmy

Firecrawl używa kontenera o maksymalnej szerokości 1112 px. Przy ekranie 1440 px treść zaczyna się w x=164. W badanych układach powtarzają się dwie kolumny, odstęp 16 px oraz szerokie pola wprowadzenia do sekcji. To pomiary referencji, nie nowe tokeny Dealyo.

Na telefonie 390 px kontener miał 356 px. Przy 768 px także ograniczał się do 356 px — tak wąskiego wariantu tabletowego nie rekomenduję kopiować. Dealyo zachowuje swoją ramę 1240 px i płynne dopasowanie.

Pierwszy ekran Firecrawl: siatka, duże pole tekstu i demonstracja — Hero — treść ma własną spokojną przestrzeń, otoczoną siatką. Zaokrąglenia i przyciski Firecrawl nie są wzorcem dla Dealyo.

Nagłówek Performance i dwie karty — Performance — duże wprowadzenie z subtelnym tłem i przejście do kart z dowodami/demonstracjami.

Przełączane funkcje i dwie kolumny demonstracji — Funkcje — zakładki sterują pokazem wejścia i wyniku. W Dealyo można pokazać proces biznesowy zamiast kodu.

Zobacz ten układ na telefonie

Funkcje Firecrawl na ekranie 390 px — Mobilne zakładki przewijają się poziomo, a kolumny układają pionowo.

Małe demonstracje funkcji Firecrawl — Małe sceny objaśniające funkcje — punkt odniesienia dla zakresu usługi i automatyzacji.

Checklista rozbudowy

A: skatalogować istniejące źródła. B: pierwsze nowe propozycje. C: dalsze rozszerzenia. Nakład jest względną oceną, nie estymacją godzin.

A1 / Najpierw / Istnieje w Dealyo

Pełne sekcje zamiast samych elementów

Firecrawl: nagłówek + pole demonstracji + zestaw kart tworzą jeden moduł.

Wyciągnąć z audytu sekcje zakresu, problemu, procesu i wyników z oryginalnym kontekstem CSS.

Kryterium odbioru: Każda sekcja ma źródło, desktop/mobile oraz samodzielny podgląd.

Nakład: Mały/średni

A2 / Najpierw / Istnieje w Dealyo

Biblioteka animowanych scen

Firecrawl: małe demonstracje funkcji w kartach. Dealyo: wiele scen, katalog pokazuje tylko formularz.

Dodać istniejące sceny reklamy, rozmowy, kalendarza, przepływu i przekazania pracy.

Kryterium odbioru: Zachowane prawdziwe skrypty; podpis wyjaśnia sens sceny i zależności.

Nakład: Średni

A3 / Najpierw / Istnieje w Dealyo

Tło animowane jako osobny komponent

Firecrawl: delikatne pola znaków za treścią. Dealyo ma process-field background.

Najpierw udostępnić tło z audytu; dopiero potem ocenić nowy wariant ASCII.

Kryterium odbioru: Tekst czytelny, statyczny wariant i zatrzymanie ruchu poza ekranem.

Nakład: Mały

A4 / Najpierw / Istnieje w Dealyo

Porównanie przed/po i wykres kampanii

Firecrawl: porównanie słupkowe. Dealyo: lp-before-after, lp-ratio, lpup__ads.

Wydzielić oryginalne wzorce z polami na dane i oznaczeniem demonstracji.

Kryterium odbioru: Wartości, jednostki, okres i źródło; brak fikcyjnych wyników.

Nakład: Średni

B1 / Następnie / Nowa propozycja

Rytm przestrzeni dla całych sekcji

Firecrawl: powtarzalne duże pola nagłówków i pasy oddzielające sekcje.

Opracować kilka wariantów gęstości sekcji w ramie Dealyo 1240 px.

Kryterium odbioru: Odstępy wynikają z porównania źródeł; pokazane na desktopie i telefonie.

Nakład: Średni

B2 / Następnie / Nowa propozycja

Siatka kart z osobnym polem ilustracji

Firecrawl: tekst i demonstracja zajmują oddzielne komórki; także układ naprzemienny.

Rozwinąć bento zakresu: 2 kolumny, 3 karty, szeroka scena i karty pomocnicze.

Kryterium odbioru: Proste narożniki, wspólne osie, jasne ramki i czytelna kolejność mobile.

Nakład: Średni

B3 / Następnie / Nowa propozycja

Nagłówek sekcji z tłem o niskim kontraście

Firecrawl: Performance z globem ASCII za nagłówkiem.

Przetestować własny motyw procesu lub sieci połączeń za nagłówkiem usługi.

Kryterium odbioru: Tło wspiera temat; treść pozostaje kompletna bez animacji.

Nakład: Średni

B4 / Następnie / Nowa propozycja

Diagram przepływu z aktywnym etapem

Firecrawl: User → Firecrawl → Index/Web.

Pokazać Reklama → Strona → Zapytanie → Rozmowa; podświetlać aktualny etap.

Kryterium odbioru: Ruch ma początek, przejście i zakończenie; na mobile układ pionowy.

Nakład: Średni

B5 / Następnie / Nowa propozycja

Przełączane demonstracje zastosowań

Firecrawl: wybór zastosowania zmienia całą scenę, nie tylko kolor zakładki.

Sceny: marketing, strona, automatyzacja; każda pokazuje konkretny rezultat działania.

Kryterium odbioru: Klawiatura, aktywna zakładka, brak skakania wysokości, jasne oznaczenie demo.

Nakład: Średni/duży

B6 / Następnie / Nowa propozycja

Stany procesu: oczekuje → działa → gotowe

Firecrawl: Smart wait, przetwarzanie dokumentów, sekwencja Actions.

Biblioteka stanów dla zapytania, analizy, automatyzacji i raportu.

Kryterium odbioru: Nie udaje realnego przetwarzania; w produkcji stan wynika z danych.

Nakład: Średni

B7 / Następnie / Nowa propozycja

Transformacja wejście → uporządkowany wynik

Firecrawl: oczyszczanie strony i licznik tokenów.

Pokazać rozproszone zapytania → uporządkowana lista kontaktów albo dane → plan działań.

Kryterium odbioru: Jasny związek przyczyna–efekt; żadnych wymyślonych oszczędności.

Nakład: Średni

B8 / Następnie / Nowa propozycja

Wskaźnik postępu z kontekstem

Firecrawl: liczniki i statusy w demonstracjach zastosowań.

Liczba sprawdzonych elementów, etap audytu, kompletność formularza.

Kryterium odbioru: Zawsze wiadomo: czego dotyczy liczba, skala i skąd pochodzi.

Nakład: Średni

C1 / Później / Nowa propozycja

Spokojne pole znaków ASCII / punktów

Firecrawl: Canvas 2D rysuje znaki animowanych pól.

Własny motyw Dealyo jako opcjonalna warstwa tła; zacząć od istniejącego process-field.

Kryterium odbioru: Limit intensywności, brak ruchu pod długim tekstem, wariant statyczny.

Nakład: Średni/duży

C2 / Później / Nowa propozycja

Dziennik działań jako demonstracja automatyzacji

Firecrawl: zmieniające się wiersze i feed zdarzeń.

Pokazać sekwencję obsługi kontaktu, wysłania przypomnienia i aktualizacji danych.

Kryterium odbioru: Wyraźny podpis „Przykładowy przebieg”; bez sztucznych klientów.

Nakład: Średni

C3 / Później / Nowa propozycja

Drobne reakcje ikon i kart

Firecrawl: pikselowe ikony, podświetlenia i zmiany aktywnego stanu.

Ujednolicić tylko reakcje wspierające działanie; nie zmieniać zatwierdzonych strzałek.

Kryterium odbioru: Jeden spójny zestaw stanów hover/focus/active; brak nowych ozdobnych obrysów.

Nakład: Mały/średni

C4 / Później / Nowa propozycja

Kalkulator scenariusza osadzony w sekcji

Firecrawl kieruje od argumentu oszczędności do kalkulacji; Dealyo ma lokalne kalkulatory.

Udostępnić własny neutralny kalkulator kosztu lub procesu, po sprawdzeniu modelu.

Kryterium odbioru: Założenia jawne; wynik scenariusza nie jest obietnicą.

Nakład: Średni/duży

Animacje: co potwierdza kod

ASCII: Canvas 2D

Pola znaków są rysowane przez fillText z przygotowanych klatek, zwykle co 60–90 ms. Wspólny mechanizm zatrzymuje je poza ekranem i w ukrytej karcie; ograniczony ruch zostawia pierwszą klatkę.

To kandydat do lekkiej adaptacji po udostępnieniu istniejącego tła Dealyo.

Siatka hero: Pixi / WebGL

To osobny mechanizm od ASCII. Kod uruchamia go na desktopie od 996 px, a obserwator widoczności zatrzymuje renderer poza ekranem.

Nie rekomenduję dodawania Pixi tylko dla migających kwadratów. Prostszy SVG/CSS należy ocenić najpierw.

Skanowanie i diagramy

Ramka skanowania porusza się po demonstracyjnej stronie. Diagram Index/Web wykorzystuje DOM/SVG i obrót 32 s z przeciwobrotem ikon.

W Dealyo przydatniejszy będzie skończony przepływ między etapami niż nieustanna rotacja.

Ograniczenie ruchu jest nierówne

W teście Firecrawl nadal animował ramkę skanowania, orbitę i ścieżki opinii mimo prefers-reduced-motion. Scena Alexandria oraz pola ASCII mają własne zabezpieczenia.

Nie kopiujemy tego braku konsekwencji. Każdy nowy komponent Dealyo powinien mieć statyczny odpowiednik.

Wskaźnik ≠ dowód

W kodzie demonstracji researchu i kontaktów znajdują się stałe liczby. Onboarding pokazuje animowany adres stripe.com w elemencie div — nie wykonuje prawdziwego skanu. Tak samo pokaz redukcji tokenów ma stałe wartości. Przenosimy sposób wyjaśniania zmiany, nie pozór aktywnego narzędzia.

Potwierdzone selektory: #ai-research, #ai-chats, #ai-skills, #ai-onboarding, #ai-leads, .features-wait. Sceny dostępne na stronie głównej Firecrawl; nie wszystkie sekcje mają kotwice.

Pełne notatki techniczne

Nie mierzono CPU/GPU ani Core Web Vitals. Ocena złożoności nie jest wynikiem benchmarku wydajności.

Warunki wdrożenia

Nowe wzorce pozostają propozycjami do czasu zatwierdzenia; oryginalne komponenty Dealyo mają osobny status.
Każdy wzorzec zawiera działający przykład, źródło, zależności, wariant mobilny i statyczny.
Ruch zatrzymuje się poza ekranem, w ukrytej karcie i przy prefers-reduced-motion. Zachowujemy informację bez animacji.
Liczby demonstracyjne są opisane jako przykładowe; wyniki klienta mają okres, jednostkę i źródło.
General Sans, #FE4A23, białe CTA i zatwierdzona geometria strzałek pozostają. Nie przenosimy promieni, pigułek ani cieni Firecrawl do marki.
Nie zaczynamy od ciężkiego tła ani efektów 3D. Najpierw jedna kompletna sekcja i jedna demonstracja procesu.

Pierwszy rekomendowany zestaw

A1–A4: uzupełnienie katalogu. Następnie B1–B4: rytm sekcji, siatka kart, spokojne tło i diagram przepływu. To daje podstawę do oceniania całości, zanim powstaną kolejne warianty.

Źródła Dealyo

Badanie obejmuje publiczny render i kod dostarczany przeglądarce, nie prywatne repozytorium Firecrawl. Nie weryfikowano prawdziwości ich wyników marketingowych. Pomiary dotyczą stanu strony w dniu badania.

Mobbin / wzory wizualne / propozycje

Kompozycja, przestrzeń i grafiki.

Po korekcie Daniela kierunek dotyczy wyglądu istniejących sekcji. Wcześniejszy warsztat i wyszukiwarkę wyłączono z prezentacji wzornika. Nie są częścią tej adaptacji.

1. Nagłówek jako pełna sekcja

Firecrawl — sekcja Core: centralny nagłówek, dużo powietrza, mała etykieta i spokojne tło. Adaptacja: mocniejsze otwarcia biblioteki i katalogów, bez przejmowania treści marketingowych.

2. Jedna wspólna siatka

Firecrawl — Why interact?: cztery boxy w jednej konstrukcji, wspólne linie i osobne ilustracje funkcji. Adaptacja: uporządkowane styki kart, spójne pola grafik i tekstów w istniejących sekcjach.

3. Obiekt i jego kontekst

Firecrawl — grafika przepływu: jeden większy obiekt pośrodku i mniejsze elementy po bokach. Adaptacja: kompozycje komponentów i oryginalnych zasobów Dealyo, z kontrolowaną hierarchią i skalą.

4. Dyskretny detal przy krawędzi

Firecrawl — About: ledwie widoczne piksele i fragmenty schematów wokół nagłówka. Adaptacja: oszczędne detale graficzne, zostawiające środek i tekst czytelne.

Przejrzano podglądy sekcji przez konektor Mobbin. Są podstawą oceny kompozycji, nie dowodem przebiegu animacji. Zachowano General Sans, #FE4A23, białe CTA, oryginalne pliki i proste narożniki Dealyo. To nowe propozycje prezentacji; źródłowe komponenty pozostają bez zmian.

Zobacz dopracowaną bibliotekę