SkillProof tested Claude skills

PencilPlaybook

Perceptuelle design-guardrails og 9 layout-stilladser til opbygning af UI-mockups i Pencil.dev

Af stevembarclay · stevembarclay/pencilplaybook

Virker med opsætning ★ 7.6/10

PencilPlaybook — Perceptuelle design-guardrails og 9 layout-stilladser til opbygning af UI-mockups i Pencil.dev

Hvad det gør

En design-playbook for Pencil.dev-lærredet drevet gennem Claude Code: ni layout-stilladser (dashboard, liste, detalje, marketing, modal, wizard, mobil, form, tom tilstand), token-propagation workflows og citerede perceptuelle standarder for typografi, farve, bevægelse, afstand og ikoner. Driver Pencil via dets MCP-værktøjer (open_document, set_variables, batch_design, snapshot_layout). Udløses, når brugeren nævner PencilPlaybook eller Pencil.dev, kører opsætningsguiden eller beder om at bygge/redesigne .pen-skærme.

Testrapport

De medfølgende perceptuelle standardværditabeller er den målbare gevinst: da den blev bedt om dashboard-card + knap-standarder, returnerede skillen specifikke citerede værdier (disabled opacity 40% ikke 50%, hover lightness delta >=8% per NNGroup, card radius capped at 8px, eksakte enter/exit cubic-bezier kurver, focus-ring offset 2px), hvor min no-skill baseline gav vage intervaller som '~50%' og 'darken a bit'. Men den primære funktion – de 9 stilladser og hvert workflow – driver Pencil.dev gennem dets MCP (batch_design/snapshot_layout), som er utilgængeligt, og hvert stillads kræver, at opsætningsguiden først udfylder SCAFFOLD_*-pladsholdere, så kerneautomatiseringen er uverificeret. Ægte nyttige referenceværdier; reel friktion for faktisk at køre.

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

Installation

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

Kommandoer og eksempelprompter

  • /pencilplaybookPerceptuelle design-guardrails og 9 layout-stilladser til opbygning af UI-mockups i Pencil.dev

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

  • 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

Læs hele rapporten →