PencilPlaybook

Perseptuelle design-guardrails og 9 layout-stillaser for å bygge UI-mockups i Pencil.dev

av stevembarclay · stevembarclay/pencilplaybook

Krever oppsett ★ 7.6/10

PencilPlaybook — Perseptuelle design-guardrails og 9 layout-stillaser for å bygge UI-mockups i Pencil.dev

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 scaffolds
  • Set up the PencilPlaybook wizard for my design tokens
  • Redesign this screen in Pencil with perceptual spacing defaults