Pencil MCP Design Skill

This skill provides comprehensive guidance for designing user interfaces using the Pencil MCP tools. Pencil uses .pen files — a JSON-based design format with flexbox layout, components, variables, and theming support.

Quick Reference: Essential Workflow

1. pencil_get_editor_state       → Get current file, selection, schema
2. pencil_get_guidelines         → Load topic-specific rules (design-system, landing-page, table)
3. pencil_get_style_guide_tags   → Get available style tags (if designing from scratch)
4. pencil_get_style_guide        → Get visual direction with 5-10 tags
5. pencil_get_variables          → Read design tokens ($--colors, $--fonts, etc.)
6. pencil_batch_get              → Inspect existing nodes and components
7. pencil_batch_design           → Create/modify design (max 25 ops per call)
8. pencil_get_screenshot         → Verify visual output