PencilPlaybook

Установи один раз. Claude теперь знает, почему отключённые кнопки имеют прозрачность 40%, а не 50%.

Эта конкретность — обоснованная, проверенная, перцептивно выверенная — и отличает продакшн-интерфейс от AI-мусора. PencilPlaybook встраивает эти правила напрямую в Claude Code, так что каждая сессия Pencil.dev автоматически получает значения, которые сеньор-дизайнер держит в голове.

Теперь Claude знает:

• Disabled — 40%, не 50% — MD3 и Workday оба пришли к этому после пользовательского тестирования; 50% создаёт визуальную конкуренцию с активными элементами
• Hover-состояния требуют минимальной дельты яркости 8% — ниже этого порога состояние неразличимо на большинстве мониторов
• Основной текст на тёмном фоне: не чисто белый — галация затрудняет чтение; используй #E2E8F0 или #F1F5F9
• Display-шрифт от 56px: межбуквенный интервал −0.03em — оптические контрформы раскрываются на крупных размерах
• Touch-цели: минимум 44×44px на мобильных, без исключений

Девять архетипов скаффолдинга. Семь готовых дизайн-систем. Структурированные воркфлоу для каждой операции Pencil.dev. Один git clone.

До (сырой вывод Claude) → После (с PencilPlaybook)

До	После

Правила, которых у Claude нет по умолчанию

Проблема не в возможностях Claude — а в том, что хороший дизайн опирается на конкретные, обоснованные значения, которые AI не знает, пока ты ему не скажешь. Без них он усредняет то, что видел в интернете.

Это не мнения. Это то, что сеньор-продакт-дизайнер узнаёт, несколько раз сделав неправильно. Hover-состояния, не преодолевающие порог яркости 8%, невидимы на большинстве мониторов. Отключённые элементы с прозрачностью 50% визуально конкурируют с активными. Чисто белый на тёмном фоне вызывает галацию. Это измеримые, воспроизводимые ошибки — и именно к ним по умолчанию скатывается сырой вывод Claude.

PencilPlaybook встраивает эти значения как таблицы поиска, которые Claude проверяет перед каждым решением. Кроме того, он даёт Claude структурированный воркфлоу для .pen-файлов: изучи канвас перед тем, как его трогать, внедри токены бренда в начале сессии, найди свободное место перед размещением нового экрана, используй инструменты массовой замены для распространения токенов вместо ручного обхода узлов.

Результат: дизайны, структурно выверенные и перцептивно осознанные — а не усреднённые из того, как интернет представляет себе дашборд.

Экономия токенов и ускорение работы

PencilPlaybook создан для сокращения расхода токенов и ускорения итераций:

• Всегда начинай с Canvas Archaeology: Using PencilPlaybook, analyze this canvas and list every screen + current design tokens.

• Используй точечные промпты для небольших изменений: Using PencilPlaybook, only update the modal on screen "checkout" with better hierarchy. Do not touch other screens.

• Запускай Bulk Property Inspection перед крупными рефакторингами.

• Придерживайся одного из 7 пресетов, если нет особых требований.

Про-совет: держи отдельные .pen-файлы в пределах ~15–20 экранов. При разбивке крупных проектов используй воркфлоу пространственного управления.

Типичные проблемы и решения

• MCP постоянно пропадает или переинжектируется Запусти мастер настройки один раз, затем закрепи скилл. Работай преимущественно в IDE и избегай открытия десктопного приложения Pencil, пока активен Claude Code — приложение может перезаписать конфиги MCP.

• Страх потерять работу Перед любым крупным изменением введи промпт: Using PencilPlaybook, create a version snapshot comment at the top of the canvas with current token values and screen list.

• Claude всё равно предлагает плохие значения по умолчанию Всегда начинай промпты с Using PencilPlaybook,

• Всплески токенов на больших канвасах Сначала используй Canvas Archaeology + Bulk Inspection.

Быстрый старт

Перед началом: убедись, что Pencil.dev установлен и открыт, а также установлен Claude Code.

Шаг 1 — Установи скилл (выбери один вариант):

# Глобально — доступен в каждом проекте
git clone https://github.com/stevembarclay/pencilplaybook ~/.claude/skills/PencilPlaybook

# Для проекта — доступен только в этом репозитории
git clone https://github.com/stevembarclay/pencilplaybook .claude/skills/PencilPlaybook

Шаг 2 — Запусти настройку (один раз, занимает ~30 секунд):

Выбери пресет (Midnight, Ember, Grove, Bloom, Volt — или Material/Minimal, если уже используешь дизайн-систему) — и готово. Настройка записывает конфиг дизайн-системы в скилл, чтобы Claude использовал его автоматически.

Шаг 3 — Используй:

Вот и всё.

Что это делает

Пять воркфлоу, которым Claude следует автоматически при упоминании PencilPlaybook:

Девять архетипов скаффолдинга — готовые к запуску batch_design-скрипты для всех распространённых макетов: Dashboard, List/Queue, Detail/Review, Marketing Page, Modal/Dialog, Wizard/Stepper, Mobile Screen, Form/Data Entry и Empty State.

Perceptual Design Defaults — научно обоснованные таблицы поиска для типографики, цветового контраста, отступов, анимации и иконок. Встроены в скилл, Claude применяет их автоматически.

Полный справочник инструментов для всех 12 Pencil MCP-инструментов — каждый параметр задокументирован.

Пресеты дизайн-систем

Пять самобытных пресетов с выраженной эстетикой, плюс два нейтральных варианта для тех, кто уже работает с существующей системой:

Структура файлов

Лицензия

MIT — используй, форкай, адаптируй под свои нужды.