Toolverse
All skills

theme-gen

by openclaw

Generate a complete design system from brand colors using AI. Use when starting a new project or standardizing colors.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
openclaw
Category
Frontend

About this skill

Generate a complete design system from brand colors using AI. Use when starting a new project or standardizing colors.

How to use

  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.

Related skills

browser-use

by browser-use

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, or extract information from web pages.

Frontend
23107

shadcn-ui

by josechifflet

shadcn/ui component patterns for Next.js 16 applications. This skill should be used when adding UI components, customizing component styles, composing primitives, or integrating forms with react-hook-form. Covers installation, customization, composition patterns, and

Frontend
157206

svg-precision

by dkyazzentwatwa

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.

Frontend
233466

frontend-ui-ux

by code-yeongyu

Designer-turned-developer who crafts stunning UI/UX even without design mockups

Frontend
1884

frontend-slides

by sickn33

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual

Frontend
65135

brainstorming

by obra

Use when creating or developing, before writing code or implementation plans - refines rough ideas into fully-formed designs through collaborative questioning, alternative exploration, and incremental validation. Don't use during clear 'mechanical' processes

Frontend
49170