PencilPlaybook
Wytyczne projektowania percepcyjnego i 9 szablonów układu do tworzenia makiet UI w Pencil.dev
Działa po konfiguracji
Co robi ten skill
Playbook projektowy dla canvas Pencil.dev napędzany przez Claude Code: dziewięć szablonów układu (dashboard, lista, szczegóły, marketing, modal, kreator, mobilny, formularz, pusty stan), przepływy pracy propagacji tokenów oraz cytowane domyślne ustawienia percepcyjne dla typografii, koloru, ruchu, odstępów i ikon. Steruje Pencil za pomocą narzędzi MCP (open_document, set_variables, batch_design, snapshot_layout). Uruchamia się, gdy użytkownik nazwie PencilPlaybook lub Pencil.dev, uruchomi kreatora konfiguracji lub poprosi o zbudowanie/przeprojektowanie ekranów .pen.
Raport z testu
Dołączone tabele domyślnych ustawień percepcyjnych to mierzalna wygrana: poproszona o domyślne ustawienia dla karty dashboard + przycisku, umiejętność zwróciła konkretne cytowane wartości (nieprzezroczystość wyłączona 40% zamiast 50%, delta jasności najechania >=8% wg NNGroup, promień karty ograniczony do 8px, dokładne krzywe cubic-bezier wejścia/wyjścia, przesunięcie pierścienia ostrości 2px), gdzie moja bazowa wersja bez umiejętności podała niejasne zakresy, takie jak '~50%' i 'trochę przyciemnij'. Ale główna zdolność — 9 szablonów i każdy przepływ pracy — napędza Pencil.dev za pośrednictwem jego MCP (batch_design/snapshot_layout), który jest niedostępny, a każdy szablon wymaga najpierw kreatora konfiguracji do wypełnienia symboli zastępczych SCAFFOLD_*, więc podstawowa automatyzacja jest niezweryfikowana. Autentycznie przydatne wartości referencyjne; rzeczywiste trudności w uruchomieniu.
Testowano: 2026-07-24 · Claude Code 2.x (agent harness)
Instalacja
git clone https://github.com/stevembarclay/pencilplaybook mkdir -p ~/.claude/skills cd pencilplaybook && cp -r . ~/.claude/skills/pencilplaybook && rm -rf ~/.claude/skills/pencilplaybook/.git
Komendy i przykładowe prompty
/pencilplaybookWytyczne projektowania percepcyjnego i 9 szablonów układu do tworzenia makiet UI w Pencil.dev
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
Build a dashboard mockup in Pencil.dev using the layout scaffoldsSet up the PencilPlaybook wizard for my design tokensRedesign this screen in Pencil with perceptual spacing defaults