Toolverse
Wszystkie skille

theme-gen

autor: openclaw

Generuj pełny system projektowania z kolorów marki za pomocą AI — bez ręcznego dobierania odcieni.

Instalacja

Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.

Instalacja

Szybkie info

Kategoria
Frontend

O skillu

Theme Generator to narzędzie, które zamienia Twoje kolory marki w kompletny system projektowania. Podaj kolor główny i pomocniczy, a otrzymasz gotowe skale odcieni (od 50 do 950), tokeny semantyczne (sukces, ostrzeżenie, błąd), zmienne CSS i konfigurację Tailwind. Narzędzie automatycznie zapewnia dostępne kontrasty i spójne proporcje typografii. Idealne do szybkiego uruchomienia nowego projektu, standaryzacji palety kolorów lub konwersji nieorganizowanego kodu na spójne tokeny projektowania.

Jak używać

  1. Zainstaluj narzędzie, uruchamiając polecenie npx ai-theme w terminalu. Nie wymaga konfiguracji — działa od razu.

  2. Przygotuj kody heksadecymalne swoich kolorów marki. Zacznij od koloru głównego (primary), który ustawia ton całego systemu. Opcjonalnie dodaj kolory pomocnicze (secondary) i akcentowe (accent).

  3. Uruchom generowanie z podstawowym poleceniem: npx ai-theme --primary "#3B82F6". Jeśli masz więcej kolorów, dodaj je: npx ai-theme --primary "#3B82F6" --secondary "#10B981" --accent "#F59E0B".

  4. Wybierz format wyjścia. Domyślnie narzędzie generuje zmienne CSS, ale możesz wybrać konfigurację Tailwind za pomocą flagi --format tailwind. Jeśli potrzebujesz wariantów dla trybu ciemnego, dodaj flagę --dark-mode.

  5. Eksportuj wynik do pliku poleceniem -o ./theme.css lub skopiuj wygenerowane zmienne bezpośrednio do projektu.

  6. Przetestuj wygenerowany system w rzeczywistym interfejsie użytkownika. Skale kolorów są matematycznie zbilansowane — zanim zaczniesz ręcznie edytować, sprawdź, jak wyglądają w kontekście. Możesz później dostosować poszczególne odcienie, jeśli będzie to konieczne.

Podobne skille