pencilplaybook
SkillDesign playbook skill for Claude Code providing perceptual psychology principles and guardrails against generic AI-slop UI patterns.
git clone https://github.com/stevembarclay/pencilplaybookInstall 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,…
Nine scaffold archetypes. Seven preset design systems. Structured workflows for every Pencil.dev operation. One `git clone`.
- Source
- community
- Known advisories
- 0
- Maintenance
- maintained
- License
- MIT
- Age
- 4 months