JesusJimenezC/pencil-atelier
6 stars · Last commit 2026-04-17
Claude Code plugin for Pencil (.pen) design-quality: analyze, design, audit, and transpile to code against a universal 4px-grid scale — framework-agnostic.
README preview
# pencil-atelier A Claude Code plugin that turns [Pencil](https://pencil.dev) (`.pen`) design files and their companion codebase into a single, consistent, auditable design system — regardless of which CSS framework the project uses. --- ## The problem it solves Design drift is the slow divergence between what a design file says and what a codebase ships. - A Pencil frame picks `padding: 14px`, the implementation rounds to `16px`, and the next component rounds to `12px`. The grid becomes a suggestion. - A palette role like `surface-elevated` lives in the design file, but the code hard-codes `#F7F7F8` in six places. The token exists only in the designer's head. - Two features built a week apart end up with three different card radii, two shadow ramps, and a typography scale that nobody agreed on. - An auditor would catch all of this — but there is no auditor, because no one has agreed on the rules. `pencil-atelier` fixes this by shipping **one numeric standard** (a universal 4px-grid sizing scale) plus four slash commands that make the standard automatic: you authoring, auditing, or transpiling a design never leaves the rails, and the vocabulary you picked for one feature is the vocabulary the next feature inherits. It is **framework-agnostic**: the rules are pure pixel values. If your project uses Tailwind, `pencil-atelier` maps to Tailwind classes. If it uses vanilla CSS, CSS Modules, styled-components, or anything else, the same pixel values are emitted verbatim — no styling dependency is ever forced on you. ---