Biblioteka Dealyo

Jak rozpocząć nowy projekt Dealyo

Biblioteka zawiera edytowalne HTML/CSS z lokalnymi zasobami. Szablony raportu, landingu i publikacji można obejrzeć bez instalacji pakietów. Komponenty korzystające z modułów JavaScript wymagają lokalnego HTTP — instrukcja poniżej.

Pobierz wzornik do projektu

Pobierz pełną paczkę ZIP · Suma SHA-256 · Aktualne wydanie

Paczka zawiera HTML, CSS, JavaScript, fonty, logo, ilustracje, komponenty, szablony, PNG i dokumentację. Rozpakowuje folder design-system/ oraz plik CLAUDE.md z instrukcjami dla agenta. Podglądy wzornika działają lokalnie; zewnętrzne projekty referencyjne nadal wymagają internetu, a część GPT Sites — logowania. To migawka, nie automatyczna synchronizacja.

Terminal — macOS lub Linux

Wymagane: curl, unzip, shasum i Python 3. Uruchom poniższy blok w folderze, w którym chcesz założyć nowy projekt. Nazwę dealyo-workspace możesz zmienić. mkdir zatrzyma blok, jeśli taki folder już istnieje.

mkdir dealyo-workspace &&
cd dealyo-workspace &&
curl --fail --location --output dealyo-design-system.zip https://designsystem.dealyo.io/downloads/dealyo-design-system.zip &&
curl --fail --location --output dealyo-design-system.zip.sha256 https://designsystem.dealyo.io/downloads/dealyo-design-system.zip.sha256 &&
shasum -a 256 -c dealyo-design-system.zip.sha256 &&
unzip -n dealyo-design-system.zip

Na Linuxie bez shasum użyj sha256sum -c dealyo-design-system.zip.sha256. Kontrola sumy potwierdza kompletność pobranego wydania. W razie niezgodności pobierz ponownie oba pliki; nie rozpakowuj niekompletnego archiwum.

Claude Code

Jeżeli masz zainstalowane i skonfigurowane Claude Code, po pobraniu paczki uruchom w dealyo-workspace:

claude "Przeczytaj CLAUDE.md oraz design-system/START.md, design-system/STYLE-GUIDE.md i design-system/REFERENCES.md. Użyj tej biblioteki do mojego projektu. Najpierw ustal ze mną cel, odbiorcę i treść. Pracuj w osobnej kopii szablonu i sprawdź desktop oraz telefon."

To zwykły prompt startowy, bez dodatkowego pluginu lub MCP. Plik CLAUDE.md przekazuje zasady i ścieżki, a rzeczywiste komponenty agent odczytuje z pobranego folderu. W istniejącym projekcie dołącz instrukcje świadomie — nie nadpisuj jego CLAUDE.md. Polecenia CLI i zachowanie pliku opisuje dokumentacja Claude Code oraz instrukcja pamięci projektu.

W innym agencie wskaż folder design-system/ i poproś o przeczytanie tych samych trzech dokumentów. Do rozpoznania biblioteki przez internet służy indeks dla agentów. Sam link ani indeks nie importują automatycznie wszystkich plików.

Utwórz raport lub landing

Z folderu dealyo-workspace (albo głównego folderu Dealyo, jeśli bibliotekę masz już lokalnie) wybierz jeden wariant:

python3 design-system/scripts/new-project.py report ./nowy-raport

python3 design-system/scripts/new-project.py landing ./nowy-landing

Skrypt kopiuje potrzebne zasoby, usuwa nawigację techniczną biblioteki i odmawia nadpisania istniejącego folderu. Nie publikuje strony. Folder nadrzędny musi istnieć.

Edytuj nowy index.html oraz report.css albo landing.css. Uzupełnij każde pole [w nawiasach], usuń niewykorzystywane moduły i sprawdź źródła treści. Nie edytuj biblioteki dla pojedynczego klienta.

Podgląd landingu:

python3 -m http.server 8000 --bind 127.0.0.1 --directory nowy-landing

Otwórz http://127.0.0.1:8000. Dla raportu zmień folder na nowy-raport. Aby obejrzeć całą bibliotekę z działającymi modułami JavaScript, podaj --directory design-system. Zatrzymaj serwer skrótem Ctrl+C.

Aktualizacja biblioteki

Pobierz następne wydanie do nowego folderu. Porównaj design-system/PACKAGE.json i zmienione komponenty, zanim przeniesiesz je do projektu. Nie nadpisuj automatycznie katalogu z własnymi zmianami. Formularze, integracje i publikację wdrażasz osobno dla konkretnego projektu.

Co dostajesz

Wariant raportu celowo nie zawiera fikcyjnych słupków wykresu ani wyników. Przed publikacją agent dodaje prawdziwe dane z okresem, jednostką i źródłem oraz tworzy dopasowany wykres. Wariant landing zawiera demonstrację formularza, bez zapisu i wysyłki; działający formularz jest częścią wdrożenia konkretnego projektu.

Użycie pojedynczego komponentu

W components.html wybierz Kopiuj HTML lub pobierz pełną paczkę komponentów. Fragment wymaga własnych arkuszy, skryptów i kontekstu rodziców wskazanych w manifeście — samo library.css nie odtwarza komponentów źródłowych. Najbezpieczniej skopiować kompletny dokument podglądu z jego zależnościami. Szczegóły: instrukcja komponentów.

Podglądy korzystające z modułów JavaScript uruchamiaj przez HTTP, np. python3 -m http.server 8000 w katalogu kopii. Jeśli przeglądarka blokuje schowek, zaznacz kod i użyj ⌘C/Ctrl+C.

Nowe układy i demonstracje są w galerii propozycji. Nie mają statusu dotychczasowego wzorca Dealyo. Ich użycie w projekcie wymaga świadomego wyboru, a nie automatycznego zastępowania komponentów źródłowych.

Status elementów

Nie kopiuj obietnic ani wyników ze zrzutów referencyjnych. Nie zamieniaj lokalnego koloru statusu w nowy akcent marki. Nie publikuj pól przykładowych jako treści klienta.