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 . - 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 color…