quick-mockups
Generuj wiele wariantów interfejsu jednocześnie – szybkie mockupy HTML dla projektantów
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Skill do Claude'a, który tworzy równolegle kilka wariantów projektów interfejsu użytkownika. Zamiast czekać na jeden mockup, uruchamiasz 3–5 agentów projektowych naraz – każdy pracuje nad innym podejściem: siatka, lista, masonry czy karty. Wszystkie wersje zapisywane są jako gotowe pliki HTML z Mantine v7 i Tailwind, zgodnie ze standardami designu. Idealne gdy potrzebujesz szybko porównać różne rozwiązania layoutu i hierarchii informacji.
Jak używać
Zainstaluj skill quick-mockups w swoim Claude'ie, dodając go do konfiguracji agenta (wymaga dostępu do narzędzi: Read, Write, Glob, Task).
Gdy chcesz stworzyć mockupy dla nowej funkcji, przygotuj briefing zawierający: nazwę funkcji (np. "Crucible Discovery"), wymagania (jakie elementy muszą się znaleźć), oraz opis wariantu (co odróżnia ten mockup od innych – np. "layout siatki z dużą kartą wyróżnioną").
Uruchom skill i podaj polecenie w stylu: "Stwórz mockupy dla strony [nazwa]. Wymagania: [lista]. Warianty: grid, lista, masonry, karty". Skill automatycznie utworzy folder docs/working/mockups/[nazwa-funkcji]/ i uruchomi 3–5 równoległych agentów projektowych.
Każdy agent pracuje niezależnie nad swoją wersją – różnymi podejściami do layoutu, hierarchii wizualnej i wzorców interakcji. Wszystkie pliki zapisywane są jako [v1-nazwa].html, [v2-nazwa].html itd.
Po zakończeniu skill wylistuje wszystkie utworzone pliki i podsumuje każdy wariant – co wyróżnia v1, v2, v3. Przejrzyj wersje w przeglądarce i wybierz kierunek, który Ci się podoba.
Jeśli potrzebujesz zmian, możesz uruchomić skill ponownie z uściśloną specyfikacją – np. "Stwórz wariant z bocznym panelem filtrów" – a nowe mockupy będą dodane do tego samego folderu.