pencil-design

Design production UIs in Pencil and generate clean code from design files. Design production-quality UIs in Pencil and generate clean, maintainable code from them. This skill enforces best practices for design system reuse, variable usage, layout correctness, visual verification, and design-to-code workflows. These rules address the most common agent mistakes. Violating them produces designs that are inconsistent, hard to maintain, and generate poor code. NEVER recreate a component from scratch when one already exists in the design file. Before inserting any element, you MUST: See references/design-system-components.md for detailed workflow. NEVER hardcode colors, border radius, spacing, or typography values when variables exist.