PencilPlaybook
Garde-fous de conception perceptuelle et 9 échafaudages de mise en page pour la création de maquettes d'interface utilisateur dans Pencil.dev.
Fonctionne avec configuration
Ce que fait
Un playbook de conception pour le canevas Pencil.dev piloté via Claude Code : neuf échafaudages de mise en page (tableau de bord, liste, détail, marketing, modal, assistant, mobile, formulaire, état vide), des workflows de propagation de jetons et des valeurs par défaut perceptuelles citées pour la typographie, la couleur, le mouvement, l'espacement et les icônes. Pilote Pencil via ses outils MCP (open_document, set_variables, batch_design, snapshot_layout). Se déclenche lorsque l'utilisateur nomme PencilPlaybook ou Pencil.dev, exécute l'assistant de configuration, ou demande de construire/redessiner des écrans .pen.
Rapport de test
Les tables de valeurs par défaut perceptuelles intégrées sont le gain mesurable : demandé les valeurs par défaut pour les cartes de tableau de bord + boutons, la compétence a renvoyé des valeurs citées spécifiques (opacité désactivée 40% et non 50%, delta de luminosité au survol >=8% selon NNGroup, rayon de carte plafonné à 8px, courbes de Bézier cubiques exactes d'entrée/sortie, décalage de l'anneau de focus 2px) là où ma référence sans compétence donnait des plages vagues comme '~50%' et 'assombrir un peu'. Mais la capacité principale - les 9 échafaudages et chaque workflow - pilote Pencil.dev via son MCP (batch_design/snapshot_layout) qui n'est pas disponible, et chaque échafaudage nécessite l'assistant de configuration pour remplir d'abord les placeholders SCAFFOLD_*, donc l'automatisation principale n'est pas vérifiée. Des valeurs de référence réellement utiles ; une réelle friction pour l'exécuter.
Testé le: 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
Commandes et exemples de prompts
/pencilplaybookGarde-fous de conception perceptuelle et 9 échafaudages de mise en page pour la création de maquettes d'interface utilisateur dans Pencil.dev.
Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :
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