PencilPlaybook

Wytyczne projektowania percepcyjnego i 9 szablonów układu do tworzenia makiet UI w Pencil.dev

Autor: stevembarclay · stevembarclay/pencilplaybook

Działa po konfiguracji ★ 7.6/10

PencilPlaybook — Wytyczne projektowania percepcyjnego i 9 szablonów układu do tworzenia makiet UI w Pencil.dev

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 scaffolds
  • Set up the PencilPlaybook wizard for my design tokens
  • Redesign this screen in Pencil with perceptual spacing defaults