pencil-skill

What problem does it solve?

Designing UI in Pencil's JSON .pen format manually is tedious and error‑prone, and AI‑generated designs often ignore design systems, spacing, and accessibility.

Core Features & Use Cases

• 41 curated design rules that enforce layout, tokens, anti‑AI aesthetics, component hierarchy, typography, colour, spacing and showcase guidelines.
• CLI toolbox (read‑tree, search‑nodes, batch‑design, validate‑pen, etc.) for inspecting, searching, batch editing and validating .pen files without opening the Pencil app.
• Token and theme management via set-variables/get-variables to ensure consistent colours, typography and dark‑mode support.
• Component system with reusable frames, ref instances, slots and atomic design hierarchy.
• Use case: an AI agent can generate a complete responsive UI mockup, validate it, and export it for further development.

Quick Start

Ask the agent to create a new landing‑page design in .pen format using the pencil skill.