# Szkicownik Makiet HTML > Generuj 2-3 interaktywne warianty makiet HTML, aby porównać kierunki projektowania UI/UX przed zdecydowaniem się na jedno podejście. Szybko eksploruj różne postawy wizualne i zbieraj opinie. - Canonical: https://nanoskill.ai/pl/skills/html-mockup-sketcher - Markdown: https://nanoskill.ai/pl/skills/html-mockup-sketcher.md - Author: NousResearch - Published: 2026-06-04T05:30:00.000Z - Updated: 2026-07-21T18:34:02.819Z - Language: pl - Source type: github - Popularity signal: 2137 ## Sources - https://github.com/NousResearch/hermes-agent ## Install ```shell npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch ``` ## About Szkicownik Makiet HTML to potężna umiejętność zaprojektowana, aby pomóc użytkownikom szybko eksplorować i porównywać kierunki projektowania UI/UX za pomocą jednorazowych makiet HTML. Zamiast angażować się w pojedynczy projekt, to narzędzie generuje 2-3 interaktywne warianty, umożliwiając porównanie różnych postaw wizualnych obok siebie. Jest idealne do wczesnej eksploracji projektowej, pomagając wizualizować koncepcje i zbierać opinie przed znaczącą inwestycją w rozwój. Ta umiejętność skupia się na tworzeniu funkcjonalnych, interaktywnych makiet HTML, które wykraczają poza statyczne obrazy. Każdy wariant to samodzielny plik HTML z wbudowanym CSS, czcionkami systemowymi i realistyczną treścią. Co istotne, makiety zawierają podstawową interaktywność, taką jak klikalne linki, stany hover i co najmniej jedno przejście stanu, zapewniając bardziej namacalne odczucie doświadczenia użytkownika. Zintegrowane narzędzia przeglądarki umożliwiają weryfikację wizualną, zapewniając, że makiety są czyste i wolne od błędów. Aby ułatwić podejmowanie świadomych decyzji, Szkicownik Makiet HTML zapewnia ustrukturyzowane porównanie. Każdy wariant zawiera szczegółowy plik \`README.md\` opisujący jego zasady projektowe, kluczowe wybory, kompromisy i najlepiej dopasowane przypadki użycia. Po wygenerowaniu, tabela porównawcza podsumowuje różnice w różnych wymiarach projektowych, wraz z opiniotwórczą analizą, która pomoże wybrać zwycięzcę, połączyć elementy lub iterować dalej. ## Key features - **Generuj wiele wariantów projektowych**: Jednocześnie twórz 2-3 odrębne warianty makiety HTML, każdy badający inne podejście projektowe (np. gęstość, nacisk, estetyka, układ) w celu porównania obok siebie. - **Interaktywne makiety HTML**: Twórz samodzielne pliki HTML z inline CSS, czcionkami systemowymi i realistyczną fikcyjną zawartością. Makiety są interaktywne, umożliwiają klikalne linki, efekty najechania i co najmniej jedną zmianę stanu. - **Weryfikacja wizualna za pomocą narzędzi przeglądarki**: Wykorzystaj zintegrowaną nawigację przeglądarki i narzędzia wizyjne do wizualnego sprawdzania i weryfikacji każdej makiety HTML, zapewniając czyste, czytelne układy wolne od błędów przed prezentacją. - **Ustrukturyzowana dokumentacja wariantów**: Każdy wariant makiety HTML zawiera plik \`README.md\` szczegółowo opisujący jego podejście projektowe, kluczowe wybory (układ, typografia, kolor, interakcja), kompromisy i idealne przypadki użycia, aby ułatwić świadome porównanie. - **Tabela analizy porównawczej**: Przedstaw wszystkie wygenerowane warianty makiety HTML w tabeli porównawczej, podkreślając różnice w kluczowych wymiarach, takich jak gęstość, widoczność głównej akcji, łatwość skanowania i ogólny klimat, wraz z opiniującym podsumowaniem. ## Use cases - **Eksploruj kierunki projektowania UI/UX**: Szybko generuj i porównuj wiele wariantów makiety HTML, aby eksplorować różne pomysły na interfejs użytkownika i doświadczenie użytkownika przed zainwestowaniem znacznego czasu deweloperskiego. - **Zbieraj opinie na temat koncepcji wizualnych**: Przedstaw interaktywne makiety HTML interesariuszom lub użytkownikom, aby zebrać wczesne opinie na temat różnych kierunków wizualnych, pomagając udoskonalić koncepcje i podejmować świadome decyzje projektowe. - **Szybkie prototypowanie nowych funkcji**: Twórz jednorazowe makiety HTML, aby szybko prototypować nowe funkcje lub ekrany, koncentrując się na podstawowej funkcjonalności i przepływie wizualnym, a nie na kodzie gotowym na produkcję. ## Result preview Zobacz rzeczywiste pliki HTML dotyczące stron internetowych butikowych hoteli wygenerowane przez tę umiejętność agenta. ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg) ## Result walkthrough ### Krok 1：Zainstaluj Dodaj umiejętność do swojego agenta. ![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg) ### Krok 2：Opisz Swoją Stronę Internetową Podaj szczegółowe informacje (np. styl, typ) dotyczące strony internetowej, którą chcesz stworzyć. ![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg) ### Krok 3：Przejrzyj Wynik Przejrzyj i porównaj wygenerowane makiety HTML. ![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg) ## Skill definition # Sketch Używaj tej umiejętności, gdy użytkownik chce **zobaczyć kierunek projektowania przed podjęciem decyzji** — eksplorując pomysł UI/UX jako jednorazowe makiety HTML. Celem jest wygenerowanie 2-3 interaktywnych wariantów, aby użytkownik mógł porównać kierunki wizualne obok siebie, a nie tworzenie kodu gotowego do wdrożenia. Załaduj to, gdy użytkownik mówi rzeczy takie jak „naszkicuj ten ekran”, „pokaż mi, jak X mógłby wyglądać”, „porównaj układ A z B”, „daj mi 2-3 ujęcia tego UI”, „pokaż mi kilka wariantów”, „stwórz makietę zanim zacznę budować”. ## Kiedy NIE używać - Użytkownik chce komponentu produkcyjnego — użyj `claude-design` lub zbuduj to poprawnie - Użytkownik chce dopracowanego jednorazowego artefaktu HTML (strona docelowa, prezentacja) — `claude-design` - Użytkownik chce diagramu — `excalidraw`, `architecture-diagram` - Projekt jest już zamknięty — po prostu go zbuduj ## Jeśli użytkownik ma zainstalowany pełny system GSD Jeśli `gsd-sketch` pojawia się jako umiejętność siostrzana (zainstalowana przez `npx get-shit-done-cc --hermes`), preferuj **`gsd-sketch`** dla pełnego przepływu pracy: trwałe `.planning/sketches/` z MANIFESTEM, analiza w trybie frontier, audyty spójności w poprzek wcześniejszych szkiców oraz integracja z resztą GSD. Ta umiejętność to lekka, samodzielna wersja — jednorazowe szkicowanie bez mechanizmu stanu. ## Główna metoda ``` wprowadzenie → warianty → zestawienie bezpośrednie → wybór zwycięzcy (lub iteracja) ``` ### 1. Wprowadzenie (pomiń, jeśli użytkownik już podał wystarczająco dużo) Przed wygenerowaniem wariantów, uzyskaj trzy rzeczy — po jednym pytaniu na raz, nie wszystkie naraz: 1. **Odczucie.** „Jakie to powinno mieć odczucie? Przymiotniki, emocje, klimat.” — *„spokojne, redakcyjne, jak Linear”* mówi więcej niż *„minimalistyczne”*. 2. **Referencje.** „Jakie aplikacje, strony lub produkty oddają odczucie, które sobie wyobrażasz?” — rzeczywiste referencje przewyższają abstrakcyjne opisy. 3. **Główna akcja.** „Jaka jest najważniejsza rzecz, którą użytkownik robi na tym ekranie?” — warianty powinny to dobrze obsługiwać; jeśli nie, są tylko ozdobą. Krótko odnieś się do każdej odpowiedzi przed następnym pytaniem. Jeśli użytkownik podał wszystkie trzy od razu, przejdź bezpośrednio do wariantów. ### 2. Warianty (2-3, nigdy 1, rzadko 4+) Wyprodukuj **2-3 warianty** w jednym przebiegu. Każdy wariant to kompletny, samodzielny plik HTML. Nie opisuj wariantów — zbuduj je. Chodzi o porównanie. Każdy wariant powinien przyjmować **inne nastawienie projektowe**, a nie różne wartości pikseli. Trzy dobre osie wariantów: - **Gęstość:** zwarte / przestronne / supergęste (wybierz dwa kontrastujące bieguny) - **Nacisk:** treść przede wszystkim / akcja przede wszystkim / narzędzie przede wszystkim - **Estetyka:** redakcyjne / utylitarne / zabawne - **Układ:** jednokolumnowy / panel boczny / podzielony panel - **Uziemienie:** oparte na kartach / surowa treść / styl dokumentu Wybierz jedną oś i odciągnij od niej. Dwa warianty różniące się tylko kolorem akcentu to zmarnowany wysiłek — użytkownik nie może ich rozróżnić. **Nazewnictwo wariantów:** opisz nastawienie, nie numer. ``` sketches/ ├── 001-spokojne-redakcyjne/ │ ├── index.html │ └── README.md ├── 001-utylitarne-zwarte/ │ ├── index.html │ └── README.md └── 001-zabawne-podzielone/ ├── index.html └── README.md ``` ### 3. Zrób z tego prawdziwy HTML Każdy wariant to **pojedynczy samodzielny plik HTML**: - Wbudowany ` ``` ### 4. README wariantu `README.md` każdego wariantu odpowiada na: ```markdown ## Wariant: {nazwa nastawienia} ### Nastawienie projektowe Jedno zdanie o zasadzie napędzającej ten wariant. ### Kluczowe wybory - Układ: ... - Typografia: ... - Kolor: ... - Interakcja: ... ### Kompromisy - Mocne strony: ... - Słabe strony: ... ### Najlepszy dla - Rodzaj użytkownika lub przypadek użycia, któremu ten wariant faktycznie służy ``` ### 5. Zestawienie bezpośrednie Po zbudowaniu wszystkich wariantów, przedstaw je jako porównanie. Nie tylko wymieniaj — **wyraź opinię**: ```markdown ## Trzy ujęcia ekranu głównego | Wymiar | Spokojne redakcyjne | Utylitarne zwarte | Zabawne podzielone | |-----------|----------------|-------------------|---------------| | Gęstość | Niska | Wysoka | Średnia | | Widoczność głównej akcji | Niska | Wysoka | Średnia | | Skanowalność | Wysoka | Średnia | Niska | | Odczucie | Spokojne, zaufane | Ostre, narzędziowe | Zapraszające, energetyczne | **Moja opinia:** Utylitarne zwarte dla zaawansowanych użytkowników, spokojne redakcyjne dla odbiorców skoncentrowanych na treści. Zabawne podzielone jest najsłabsze — próbuje robić jedno i drugie, a nie angażuje się w żadne. ``` Pozwól użytkownikowi wybrać zwycięzcę, lub połącz dwa w hybrydę, albo poproś o kolejną rundę. ## Tematyzacja (gdy projekt ma tożsamość wizualną) Jeśli użytkownik ma istniejący motyw (kolory, czcionki, tokeny), umieść wspólne tokeny w `sketches/themes/tokens.css` i zaimportuj je w każdym wariancie. Utrzymaj tokeny minimalnie: ```css /* sketches/themes/tokens.css */ :root { --color-bg: #fafafa; --color-fg: #1a1a1a; --color-accent: #0066ff; --color-muted: #666; --radius: 8px; --font-display: „Inter”, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, sans-serif; } ``` Nie przesadzaj z tokenizacją jednorazowego szkicu — trzy kolory i jedna czcionka zwykle wystarczą. ## Poprzeczka interaktywności Szkic jest wystarczająco interaktywny, gdy użytkownik może: 1. **Kliknąć główną akcję** i coś widocznego się dzieje (zmiana stanu, modal, toast, pozorowana nawigacja) 2. **Zobaczyć jedno znaczące przejście stanu** (filtrowanie listy, przełączanie trybu, otwieranie/zamykanie panelu) 3. **Najechać na rozpoznawalne afordancje** (przyciski, wiersze, karty) Więcej niż to to nadmierna inżynieria dla jednorazówki. Mniej niż to to zrzut ekranu. ## Tryb frontier (wybieranie, co naszkicować dalej) Jeśli szkice już istnieją, a użytkownik mówi „co powinienem naszkicować dalej?”: - **Luki spójności** — dwa zwycięskie warianty z różnych szkiców dokonały niezależnych wyborów, które nie zostały jeszcze ze sobą skomponowane - **Nienaszkicowane ekrany** — wspomniane, ale nigdy niezbadane - **Pokrycie stanów** — naszkicowano ścieżkę szczęśliwą, ale nie pustą / ładowanie / błąd / 1000 elementów - **Luki responsywności** — zweryfikowano w jednym widokowym obszarze; czy trzyma się na urządzeniu mobilnym / ultraszerokim? - **Wzorce interakcji** — istnieją układy statyczne; przejścia, przeciąganie, zachowanie przewijania nie Zaproponuj 2-4 nazwanych kandydatów. Pozwól użytkownikowi wybrać. ## Wyjście - Utwórz `sketches/` (lub `.planning/sketches/` jeśli użytkownik stosuje konwencje GSD) w korzeniu repozytorium - Jeden podkatalog na wariant: `NNN-nazwa-nastawienia/index.html` + `README.md` - Powiedz użytkownikowi, jak je otworzyć: `open sketches/001-spokojne-redakcyjne/index.html` na macOS, `xdg-open` na Linuxie, `start` na Windowsie - Utrzymuj warianty jako jednorazowe — szkic, który poczułeś potrzebę zachowania, powinien być awansowany do rzeczywistego kodu projektu, a nie kuratorowany jako zasób **Typowa sekwencja narzędzi dla jednego wariantu:** ``` terminal("mkdir -p sketches/001-spokojne-redakcyjne") write_file("sketches/001-spokojne-redakcyjne/index.html", "...") write_file("sketches/001-spokojne-redakcyjne/README.md", "## Wariant: Spokojne redakcyjne\n...") browser_navigate(url="file://$(pwd)/sketches/001-spokojne-redakcyjne/index.html") browser_vision(question="Jak to wygląda? Jakieś oczywiste problemy z układem?") ``` Powtórz dla każdego wariantu, a następnie przedstaw tabelę porównawczą. ## Atrybucja Zaadaptowano z przepływu pracy `/gsd-sketch` projektu GSD (Get Shit Done) — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). Pełny system GSD dostarcza trwały stan szkicu, referencje motywów/wariantów oraz przepływy pracy audytu spójności; zainstaluj przez `npx get-shit-done-cc --hermes --global`. ## FAQ ### Czym jest makieta HTML? Makieta HTML to jednorazowa, interaktywna strona internetowa zbudowana z użyciem HTML i podstawowego stylowania (często inline CSS) w celu szybkiego wizualizowania i porównywania różnych pomysłów na UI/UX. Nie jest przeznaczona do produkcji, lecz do eksploracji projektowych na wczesnym etapie. ### Ile wariantów makiety HTML generuje ta umiejętność? Ta umiejętność zazwyczaj generuje jednorazowo 2-3 interaktywne warianty makiety HTML. Celem jest dostarczenie kontrastowych podejść projektowych do porównania, a nie wyczerpującej listy drobnych wariacji. ### Czy mogę użyć tej umiejętności do tworzenia kodu gotowego na produkcję? Nie, ta umiejętność została zaprojektowana specjalnie do tworzenia 'jednorazowych' makiet HTML w celu eksploracji kierunków projektowych. Dla komponentów gotowych na produkcję lub dopracowanych artefaktów należy użyć innych narzędzi lub umiejętności, takich jak \`claude-design\`. ### Jaką interaktywność mają makiety HTML? Wygenerowane makiety HTML są interaktywne, co oznacza, że linki są klikalne, efekty najechania są rzeczywiste, a także występuje co najmniej jedna zmiana stanu (np. otwarcie/zamknięcie panelu, filtrowanie listy). Daje to bardziej realistyczne wrażenie niż statyczne obrazy. ### W jaki sposób ta umiejętność pomaga mi porównać różne projekty? Po wygenerowaniu makiet HTML umiejętność udostępnia tabelę porównawczą, która podkreśla kluczowe różnice w różnych wymiarach projektowych (np. gęstość, układ, estetyka). Oferuje również opiniujące podsumowanie, aby wspomóc proces podejmowania decyzji. ### Jakie informacje muszę podać, aby wygenerować makietę HTML? Aby wygenerować skuteczne makiety HTML, zostaniesz zapytany o pożądany 'klimat' (przymiotniki, wibracja), aplikacje/strony referencyjne, które oddają ten klimat, oraz o pojedynczą najważniejszą 'akcję kluczową', jaką użytkownik wykonuje na ekranie.