PencilPlaybook
Perseptuelle design-guardrails og 9 layout-stillaser for å bygge UI-mockups i Pencil.dev
Krever oppsett
Hva den gjør
En design-spillebok for Pencil.dev-lerretet drevet gjennom Claude Code: ni layout-stillaser (dashbord, liste, detalj, markedsføring, modal, veiviser, mobil, skjema, tom tilstand), token-propagering arbeidsflyter, og siterte perseptuelle standarder for typografi, farge, bevegelse, avstand og ikoner. Driver Pencil via dens MCP-verktøy (open_document, set_variables, batch_design, snapshot_layout). Utløses når brukeren nevner PencilPlaybook eller Pencil.dev, kjører oppsettveiviseren, eller ber om å bygge/redesigne .pen-skjermer.
Testrapport
De medfølgende perseptuelle standardverdi-tabellene er den målbare gevinsten: bedt om dashboard-kort + knappestandarder, returnerte ferdigheten spesifikke siterte verdier (deaktivert opasitet 40% ikke 50%, hover lyshetsdelta >=8% per NNGroup, kortradius begrenset til 8px, eksakte enter/exit cubic-bezier-kurver, fokusring-offset 2px) der min baseline uten ferdighet ga vage områder som '~50%' og 'mørkne litt'. Men hovedfunksjonaliteten – de 9 stillasene og hver arbeidsflyt – driver Pencil.dev gjennom dens MCP (batch_design/snapshot_layout) som er utilgjengelig, og hvert stillas trenger oppsettveiviseren for å fylle SCAFFOLD_* plassholdere først, så kjerneautomatiseringen er uverifisert. Genuint nyttige referanseverdier; reell friksjon for å faktisk kjøre.
Testet på: 2026-07-24 · Claude Code 2.x (agent harness)
Installer
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
/pencilplaybookPerseptuelle design-guardrails og 9 layout-stillaser for å bygge UI-mockups i Pencil.dev
Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):
Build a dashboard mockup in Pencil.dev using the layout scaffoldsSet up the PencilPlaybook wizard for my design tokensRedesign this screen in Pencil with perceptual spacing defaults