{"repo":"stevembarclay/pencilplaybook","free":true,"listed":false,"github":"https://github.com/stevembarclay/pencilplaybook","clone":"git clone https://github.com/stevembarclay/pencilplaybook.git","description":"PencilPlaybook is the UI Skills / Taste-Skill for Pencil.dev + Claude Code — a design playbook that gives Claude real perceptual psychology and senior-level guardrails so it stops producing averaged-out AI slop.","language":"Python","stars":39,"topics":["claude-code","design-system","pencil-dev","ai-design","anti-ai-slop","claude-skill","design-skill","ui-skills","perceptual-design","taste-skill"],"license":"MIT","category":"ui-components","readme_excerpt":"PencilPlaybook Install once. Claude now knows why disabled buttons are 40% opacity, not 50%. That specificity — defensible, tested, perceptually grounded — is what separates production UI from AI slop. PencilPlaybook embeds those rules directly into Claude Code, so every Pencil.dev session automatically gets the values a senior designer carries in their head. Now Claude knows: - Disabled at 40%, not 50% — MD3 and Workday both converged here after user testing; 50% creates visual competition with active elements - Hover states need an 8% lightness delta minimum — below that, the state is imperceptible on most monitors - Body text on dark backgrounds: not pure white — halation makes it harder to read; use #E2E8F0 or #F1F5F9 - Display type at 56px+: −0.03em letter spacing — optical counters open up at large sizes - Touch targets: 44×44px minimum on mobile, period Nine scaffold archetypes. Seven preset design systems. Structured workflows for every Pencil.dev operation. One git clone . --- Before (raw Claude output) → After (with PencilPlaybook) Before After -------- ------- --- The rules Claude doesn't ship with The problem isn't Claude's capability — it's that good design has specific, defensible values that AI doesn't know unless you tell it. Without them, it averages what it's seen on the internet. These aren't opinions. They're the kind of thing a senior product designer learns from doing it wrong a few times. Hover states that don't clear the 8% lightness threshold are invi","default_branch":null,"files":null,"tree":[],"storefront":"/r/stevembarclay","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/stevembarclay/pencilplaybook/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}