Pencil Design

A disciplined approach to Pencil design workflows that enforces the habits most AI agents skip. It mandates design system reuse, variable usage over hardcoded values, overflow prevention, and visual verification after every section. The critical rules target common mistakes: recreating components that already exist, hardcoding colors instead of using tokens, letting text overflow on mobile, and skipping screenshot verification. When generating code from Pencil designs, it maps directly to Tailwind v4 semantic classes and requires loading the frontend-design skill for aesthetic direction. If you're working with .pen files or building design-to-code pipelines, this keeps both the designs and generated code maintainable instead of producing throwaway prototypes.

Install to Claude Code

npx -y skills add chiroro-jr/pencil-design-skill --skill pencil-design --agent claude-code