style-guide-generator

Generate comprehensive website style guides and design systems from URLs, screenshots, and existing documentation. Use this skill when users ask to create a style guide, design system documentation, brand guidelines document, or design specification from a website, app, or existing materials. This skill produces professional PDF outputs following industry-standard style guide structure.

1. Przygotuj materiały źródłowe — jeśli posiadasz adres URL strony, zrzuty ekranu, istniejącą dokumentację lub wytyczne brandowe, miej je gotowe. Skill będzie analizować te materiały, aby wyodrębnić elementy designu.

2. Uruchom skill i podaj dostępne informacje — jeśli masz URL, skill użyje go do analizy witryny; jeśli masz zrzuty ekranu lub pliki, wgraj je; jeśli masz minimalnie informacji, skill poprosi o szczegóły dotyczące marki, celów i wymagań.

3. Skill wyodrębni kluczowe elementy designu — automatycznie zidentyfikuje kolory (podstawowe, dodatkowe, akcent, tekst, tło, stany sukcesu/ostrzeżenia/błędu), typografię (czcionki, grubości, rozmiary, wysokości linii), logo, ikonografię, preferencje obrazów, wzorce komponentów UI, systemy spacing i wymagania dostępności.

4. Zweryfikuj strukturę i zawartość — skill zorganizuje wyodrębnione informacje w standardową strukturę przewodnika stylu, dodając misję/wizję (jeśli dostępne), zasady designu i specyfikacje komponentów.

5. Pobierz wygenerowany dokument PDF — skill utworzy profesjonalnie sformatowany plik PDF z konsystentną typografią, tabelami dla palet kolorów, specyfikacji typografii i stanów komponentów, gotowy do użytku przez zespoły projektowe i deweloperskie.