PencilPlaybook

Perceptuella design-skyddsräcken och 9 layoutställningar för att bygga UI-mockups i Pencil.dev

av stevembarclay · stevembarclay/pencilplaybook

Fungerar med konfiguration ★ 7.6/10

PencilPlaybook — Perceptuella design-skyddsräcken och 9 layoutställningar för att bygga UI-mockups i Pencil.dev

Vad den gör

En design-playbook för Pencil.dev-duken driven via Claude Code: nio layoutställningar (dashboard, list, detail, marketing, modal, wizard, mobile, form, empty state), token-propagationsarbetsflöden och citerade perceptuella standardvärden för typografi, färg, rörelse, avstånd och ikoner. Driver Pencil via dess MCP-verktyg (open_document, set_variables, batch_design, snapshot_layout). Utlöses när användaren nämner PencilPlaybook eller Pencil.dev, kör installationsguiden eller ber om att bygga/omdesigna .pen-skärmar.

Testrapport

De medföljande tabellerna för perceptuella standardvärden är den mätbara vinsten: när jag bad om standardvärden för dashboard-kort + knapp, returnerade färdigheten specifika citerade värden (disabled opacity 40% not 50%, hover lightness delta >=8% per NNGroup, kortradie begränsad till 8px, exakta enter/exit cubic-bezier-kurvor, focus-ring offset 2px) där min baslinje utan färdighet gav vaga intervall som '~50%' och 'mörka lite'. Men huvudförmågan – de 9 ställningarna och varje arbetsflöde – driver Pencil.dev via dess MCP (batch_design/snapshot_layout) som är otillgänglig, och varje ställning behöver installationsguiden för att fylla SCAFFOLD_*-platshållare först, så kärnautomatiseringen är overifierad. Genuint användbara referensvärden; verklig friktion för att faktiskt köra.

Testad: 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

Kommandon och exempelprompter

/pencilplaybookPerceptuella design-skyddsräcken och 9 layoutställningar för att bygga UI-mockups i Pencil.dev

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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 hela rapporten →