PencilPlaybook

Ochranné zábradlí percepčního designu a 9 rozvrhových šablon pro vytváření UI mockupů v Pencil.dev

od stevembarclay · stevembarclay/pencilplaybook

Funguje s nastavením ★ 7.6/10

PencilPlaybook — Ochranné zábradlí percepčního designu a 9 rozvrhových šablon pro vytváření UI mockupů v Pencil.dev

Co umí

Designový playbook pro plátno Pencil.dev řízený přes Claude Code: devět rozvrhových šablon (dashboard, seznam, detail, marketing, modal, průvodce, mobil, formulář, prázdný stav), pracovní postupy šíření tokenů a citované percepční výchozí hodnoty pro typografii, barvy, pohyb, mezery a ikony. Řídí Pencil pomocí svých nástrojů MCP (open_document, set_variables, batch_design, snapshot_layout). Spouští se, když uživatel jmenuje PencilPlaybook nebo Pencil.dev, spustí průvodce nastavením nebo požádá o sestavení/přepracování .pen obrazovek.

Testovací report

Přibalené tabulky percepčních výchozích hodnot jsou měřitelným vítězstvím: požádáno o výchozí hodnoty pro dashboard-card + tlačítko, dovednost vrátila konkrétní citované hodnoty (disabled opacity 40% ne 50%, hover lightness delta >=8% dle NNGroup, poloměr karty omezen na 8px, přesné enter/exit cubic-bezier křivky, focus-ring offset 2px), kde moje základní linie bez dovednosti poskytla vágní rozsahy jako '~50%' a 'darken a bit'. Ale hlavní schopnost – 9 šablon a každý pracovní postup – řídí Pencil.dev přes jeho MCP (batch_design/snapshot_layout), který není k dispozici, a každá šablona potřebuje nejprve průvodce nastavením k vyplnění zástupných symbolů SCAFFOLD_*, takže základní automatizace není ověřena. Skutečně užitečné referenční hodnoty; skutečné tření při spuštění.

Testováno: 2026-07-24 · Claude Code 2.x (agent harness)

Instalace

git clone https://github.com/stevembarclay/pencilplaybook
mkdir -p ~/.claude/skills
cd pencilplaybook && cp -r . ~/.claude/skills/pencilplaybook && rm -rf ~/.claude/skills/pencilplaybook/.git

Příkazy a ukázkové prompty

/pencilplaybookOchranné zábradlí percepčního designu a 9 rozvrhových šablon pro vytváření UI mockupů v Pencil.dev

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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

Kompletní testovací report (anglicky) →