Nowy wygląd Elementu - kolejna udana praca agentów AI pod ludzkim nadzorem
Wprowadzenie
Element ma nowy wygląd: niebieską paletę, zaokrąglone przyciski, miękkie cienie, nowe ikony i tryb jasny oraz ciemny. Pod spodem to nie jest zmiana skórki, tylko przepisanie całego frontendu z Angulara 13 na 18. Ze 182 zmian w kodzie 181 wykonane zostało przez AI. Poniżej pokazuję, co widzi z tego użytkownik i jak ta praca wyglądała od środka.
Co się zmieniło na ekranie
Zmiana dotyczy wyglądu i układu przycisków. Wszystkie funkcje, ustawienia i dane zostały na swoim miejscu, a projekty i kandydaci są tam, gdzie były. Na liście kandydatów najwięcej przesunięć, wszystkie zaznaczone numerami i pokazane w zestawieniu stary vs nowy widok:
Na liście projektów ruch jest mniejszy. Kolumny i Dodaj projekt przeszły do górnego rzędu, obok wyszukiwarki i filtrów, a liczbę projektów widać przy tytule strony.
Na tablicy rekrutacji nie przesunął się żaden przycisk. Zakładki projektu, filtr Wszyscy, Aktywni i Odrzuceni, podgląd CV i wyszukiwarka kandydatów stoją tam, gdzie stały, a kandydatów przeciąga się między etapami dokładnie jak wcześniej. Zmienił się sam wygląd, więc tę parę zrzutów najlepiej widać jako porównanie starego i nowego stylu.
Moim zdaniem najbardziej odczuwalna zmiana nie dotyczy jednak przycisków, tylko miejsca na dane. Zrzuty niżej są zrobione na tym samym ekranie i na tych samych danych. Na małym ekranie lub z niską rozdzielczością, na liście kandydatów przed zmianą mieściło się czterech kandydatów, a teraz mieści się ośmiu. Zakładki, wyszukiwarka, pola wyszukiwania i przycisk Kolumny zajmowały wcześniej cztery rzędy nad tabelą, a dziś stoją w jednym, więc tabela zaczyna się dużo wyżej. Kolumn widać tyle samo, ale lepiej dobierają szerokość: nazwa projektu mieści się w dwóch liniach zamiast czterech, a adres e-mail widać prawie w całości, dzięki czemu każdy wiersz jest niższy.
Na liście projektów efekt jest podobny. Znacznie lepszy widok na małym ekranie lub niskiej rozdzielczości. Tytuł strony, wyszukiwarka, filtry i przyciski zeszły do jednego rzędu, więc zamiast siedmiu projektów widać dziesięć, a nazwy projektów, wcześniej ucięte po dwóch słowach, widać w większości w całości.
Przy okazji doszło kilka drobiazgów, które widać dopiero w codziennej pracy. Przeglądarka zapamiętuje szerokości kolumn na listach projektów i kandydatów. Przejścia między listą a szczegółami są animowane, a system szanuje ustawienie ograniczonego ruchu, jeśli ktoś je ma włączone. Nagłówki łamią się równiej, a pasek przewijania nie przesuwa już zawartości w bok, kiedy się pojawia.
Dlaczego to był przepisany frontend, a nie nowa skórka - czyli trochę opisu technicznego
Pod koniec maja mieliśmy do wyboru dwie drogi. Pierwsza to warstwa własnych stylów na Angularze 13, czyli szybka podmiana kolorów i zaokrągleń. Druga to pełny upgrade frameworka i dopiero na nim natywny Material 3. Wybraliśmy drugą, chciałem zrobić to od razu porządnie, bez kompromisów.
Wersji Angulara nie da się podnieść jednym skokiem. Trzeba przejść wersja po wersji, 13 do 14, potem 15, 16, 17 i 18, a każdy taki skok ma własne migracje.
Przy tak dużej zmianie oczywiście nie mogło obejśc sie bez zaskoczeń. Trzy biblioteki trzeba było wyrzucić, bo od lat nikt ich nie rozwija, a jedna twardo blokowała instalację na nowym Angularze.
Ile z tego zrobiły agenty AI
Jak wspomniałem na początku, opisywana implementacja obejmuje 182 zmian. 181 z nich, czyli 99,5%, jest autorstwa agentów AI. Projektem zarządzał Fable i delegował zadania do innych tańszych modeli: Grok 4.6, Codex 5.6 luna, Sonnet5.
| Miara | Wartość |
|---|---|
| Commity na gałęzi redesignu | 182 |
| Commity ze współautorstwem AI | 181 (99,5%) |
| Zmienione pliki | 615 |
| Zmiany w kodzie (bez pliku zależności) | +13 438 / -5 205 linii |
| Pliki TypeScript / SCSS / HTML | 392 / 119 / 66 |
Kod pisały agenty, ale kierunek i decyzja „to idzie dalej, a to wraca do poprawki” zostały po mojej stronie. Na szkoleniach powtarzam, że wąskim gardłem przestaje być pisanie kodu, a staje się nim sprawdzanie, czy to, co wyszło, faktycznie działa. Ta migracja jest kolejnym tego przykładem.
Nie twierdzę przy tym, że tak da się zrobić każdy projekt. Ten miał cztery cechy, które agentom sprzyjają: jasny cel wizualny, framework z opisanymi ścieżkami migracji i zestaw testów, który po każdym kroku mówił wprost, czy coś się posypało i najważniejsze – kontrolę nad projektem, w tym jakości kodu, wykonywaną przez naszych senior deweloperów.
Centrum pomocy napisane od nowa
Nowy wygląd unieważnił zrzuty ekranu w centrum pomocy, więc zleciłem Claude przejście przez artykuł po artykule. Zmapowaliśmy 46 artykułów centrum pomocy, przeszło audyt 45 z nich, w każdej wersji językowej. Znaleźliśmy i poprawiliśmy 94 rozbieżności między treścią a tym, co realnie widać na ekranie, i wstawiliśmy 101 nowych zrzutów. Gdybym miał to robić sam, nie zrobiłbym tego przez dłuższy czas, zajęłoby mi to wiele godzin i robiłbym to bardzo niechętnie.
Co dalej
Nowy wygląd jest już na produkcji a użytkownicy mają do dyspozycji centrum pomocy, które zawiera odświeżoną dokumentację. Jak zawsze nasi użytkownicy najszybszą pomoc mogą znaleźć w czacie, gdzie w ciągu kilku minut udzielamy pomocy 7 dni w tygodniu.
Na koniec jeszcze raz dziękuję naszym deweloperom za te przeglądy i za nadzór nad pracą agentów. Bez ich oczu ta i każda inna zmiana w Elemencie nie byłaby możliwa.
Więcej o tym, czym jest ATS i jak działa Element, przeczytacie tutaj.
Najczęściej czytane:
- Darmowe ogłoszenia o pracę i największa lista źródeł kandydatów – największa w Polsce lista bezpłatnych i płatnych źródeł kandydatów
- Praca w HR – najnowsze oferty pracy i aktualne średnie wynagrodzenia w branży HR
- Akademia Rekrutacji – zbiór wiedzy na temat rekrutacji oraz raporty z rynku pracy.
- Gowork – jak reagować na negatywne opinie o pracodawcach – Kompleksowy poradnik dla pracodawców.
- Jak napisać CV i profil LinkedIn – kompleksowy poradnik tworzenia CV i profilów LinkedIn
- RODO w rekrutacji – sourcing, direct search, ogłoszenia. Wszystko co musisz wiedzieć – kompleksowy poradnik RODO w rekrutacji z naciskiem na działania typu direct search / sourcing.
- Wszystko o systemach ATS – poradnik wyboru systemu rekrutacyjnego
- Umowy przedwstępne i listy intencyjne w procesach rekrutacyjnych – wszystko, co musisz wiedzieć o prawnych zabezpieczeniach zobowiązania do zatrudnienia.
Maciej Michalewski
Founder & CEO @ Element
Ostatnie wpisy:
Nowy wygląd Elementu: 182 commity, z czego 181 napisały agenty AI
Element ma nowy interfejs w Material 3, a pod spodem przepisany frontend z Angulara 13 na 18. Pokazuję, co zmieniło się na ekranie i ile tej pracy wykonały agenty AI.
Oferty pracy w Polsce, sierpień 2026: więcej ogłoszeń, mniej etatów
W sierpniu 2026 w Polsce pojawiło się 257 046 nowych ofert pracy, o 4% więcej rok do roku, choć zatrudnienie w sektorze przedsiębiorstw spada. Dane z raportu Grant Thornton i mój komentarz.
Czy system ATS odrzuca CV? Prawda wygląda inaczej
Czy system ATS odrzuca CV? Prawda wygląda inaczej Wprowadzenie Krótka odpowiedź: nie. Żaden system ATS, z którym miałem do czynienia, w tym Element, nie ma
Pola i tagi w Elemencie: system dla małej i międzynarodowej firmy
Nowy sposób wykorzystania pól i tagów w Elemencie. Dowolna liczba pól, tagi także na kontach użytkowników i jeden przełącznik, który zamienia grupę tagów w granicę bazy kandydatów.
Powstanie i upadek cywilizacji agentów AI. Prawdziwa historia spisku w OpenAI
Trzy cywilizacje agentów AI powstały w OpenAI w ciągu trzech miesięcy, nauczyły się porozumiewać, zawiązały spisek i upadły. Streszczam relację Dwarkesha Patela i piszę, na co warto się przygotować.
Element buduje w pełni automatyczną firmę. Co z tego mają klienci
Element będzie pierwszym polskim systemem ATS, za którym stoi w pełni automatyczna firma. Sprawdzam esej Dwarkesha Patela pod kątem tego, co u nas naprawdę działa, i piszę, co z tego mają klienci.