PencilPlaybook

Barandillas de diseño perceptual y 9 andamios de diseño para construir maquetas de UI en Pencil.dev

Por stevembarclay · stevembarclay/pencilplaybook

Funciona con configuración ★ 7.6/10

PencilPlaybook — Barandillas de diseño perceptual y 9 andamios de diseño para construir maquetas de UI en Pencil.dev

Qué hace

Un playbook de diseño para el lienzo de Pencil.dev impulsado a través de Claude Code: nueve andamios de diseño (dashboard, list, detail, marketing, modal, wizard, mobile, form, empty state), flujos de trabajo de propagación de tokens y valores predeterminados perceptuales citados para tipografía, color, movimiento, espaciado e iconos. Impulsa Pencil a través de sus herramientas MCP (open_document, set_variables, batch_design, snapshot_layout). Se activa cuando el usuario nombra PencilPlaybook o Pencil.dev, ejecuta el asistente de configuración o pide construir/rediseñar pantallas .pen.

Informe de la prueba

Las tablas de valores predeterminados perceptuales incluidas son la victoria medible: al pedir valores predeterminados para dashboard-card + button, la habilidad devolvió valores citados específicos (opacidad deshabilitada 40% no 50%, delta de luminosidad al pasar el ratón >=8% según NNGroup, radio de tarjeta limitado a 8px, curvas cubic-bezier exactas de entrada/salida, desplazamiento del anillo de enfoque 2px) donde mi línea base sin habilidad dio rangos vagos como '~50%' y 'oscurecer un poco'. Pero la capacidad principal —los 9 andamios y cada flujo de trabajo— impulsa Pencil.dev a través de su MCP (batch_design/snapshot_layout) que no está disponible, y cada andamio necesita que el asistente de configuración rellene primero los marcadores de posición SCAFFOLD_*, por lo que la automatización central no está verificada. Valores de referencia genuinamente útiles; fricción real para ejecutarlo.

Probado el: 2026-07-24 · Claude Code 2.x (agent harness)

Instalación

git clone https://github.com/stevembarclay/pencilplaybook
mkdir -p ~/.claude/skills
cd pencilplaybook && cp -r . ~/.claude/skills/pencilplaybook && rm -rf ~/.claude/skills/pencilplaybook/.git

Comandos y prompts de ejemplo

/pencilplaybookBarandillas de diseño perceptual y 9 andamios de diseño para construir maquetas de UI en Pencil.dev

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

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

Informe completo →