Agent skill · software engineering · aiskillstore
pencil-to-code
Convert Pencil `.pen` design files and named Pencil node IDs into production frontend code. Use when asked to implement, migrate, reproduce, or refine a Pencil/Figma-like visual design in code, especially for responsive artboards, glassmorphism, typography matching, background image layers, design tokens, or visual fidelity debugging against Pencil node IDs.
Why this skill is useful
Provides specific commands and patterns for converting Pencil design files into maintainable frontend code, which the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Pencil To Code Use this skill to transfer a Pencil design into maintainable frontend code without losing layout, typography, background treatment, or responsive intent. Workflow 1. Read the design contract first Use Pencil MCP to inspect all user-provided artboards and handoff/spec nodes. Read variables with getvariables. Capture screenshots of each target artboard before coding. If a handoff node exists, treat it as source-of-truth for responsive behavior. 2. Extract implementation facts Record artboard sizes, foreground stack width, stack x/y, section gaps, spacer heights, radii, stroke colors, blur radii, shadows, and image fill modes. Read repeated components deeply enough to capture exact text, font family, font size, font weight, line height, letter spacing, icon size, and touch target dimensions. Distinguish fixed foreground layout from decorative absolute layers. 3. Map design to code deliberately Use semantic, reusable components for repeated rows/cards/actions. Keep foreground layout in flex/grid. Keep background image, veil, mist, vignette, wires, particles, and similar decorative layers absolute/fixed and non-interactive. Preserve design tokens as CSS variables or framework theme tokens. Copy or reference real assets from the Pencil export rather than approximating logos/photos. 4. Handle responsive artboards literally Foreground dimensions must follow the handoff, not viewport convenience. If the design says a column is fixed, do not stretch cards/buttons on tablet/desktop. Only expand the outer scene when the handoff says so. Re-check artboard node IDs after the user says the design changed. 5. Verify visually and numerically Run the project checks required by the repo. Use browser screenshots at every artboard size. Use browser getComputedStyle for text that looks wrong; verify actual font-family, font-size, font-weight, line-height, and letter-spacing. Compare rendered screenshots against Pencil screenshots before finalizing. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/pencil-to-code