SkillProof tested Claude skills

PencilPlaybook

Guardrail di design percettivo e 9 scaffold di layout per la costruzione di mockup UI in Pencil.dev

di stevembarclay · stevembarclay/pencilplaybook

Richiede configurazione ★ 7.6/10

PencilPlaybook — Guardrail di design percettivo e 9 scaffold di layout per la costruzione di mockup UI in Pencil.dev

Cosa fa

Un playbook di design per la canvas Pencil.dev guidato tramite Claude Code: nove scaffold di layout (dashboard, lista, dettaglio, marketing, modale, wizard, mobile, form, stato vuoto), workflow di propagazione dei token e default percettivi citati per tipografia, colore, movimento, spaziatura e icone. Guida Pencil tramite i suoi strumenti MCP (open_document, set_variables, batch_design, snapshot_layout). Si attiva quando l'utente nomina PencilPlaybook o Pencil.dev, esegue il setup wizard o chiede di costruire/ridisegnare schermate .pen.

Rapporto di test

Le tabelle dei default percettivi incluse sono il vantaggio misurabile: chiesto i default per dashboard-card + pulsante, la skill ha restituito valori specifici citati (opacità disabilitata 40% not 50%, delta di luminosità hover >=8% per NNGroup, raggio della card limitato a 8px, curve cubic-bezier esatte di entrata/uscita, offset focus-ring 2px) dove la mia baseline senza skill dava intervalli vaghi come '~50%' e 'darken a bit'. Ma la capacità principale — i 9 scaffold e ogni workflow — guida Pencil.dev tramite il suo MCP (batch_design/snapshot_layout) che non è disponibile, e ogni scaffold necessita prima del setup wizard per riempire i placeholder SCAFFOLD_*, quindi l'automazione principale non è verificata. Valori di riferimento genuinamente utili; reale attrito per l'esecuzione effettiva.

Testato il: 2026-07-24 · Claude Code 2.x (agent harness)

Installazione

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

Comandi e prompt di esempio

  • /pencilplaybookGuardrail di design percettivo e 9 scaffold di layout per la costruzione di mockup UI in Pencil.dev

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

  • 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

Rapporto completo →