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
-
Read the design contract first
- Use Pencil MCP to inspect all user-provided artboards and handoff/spec nodes.
- Read variables with
get_variables. - Capture screenshots of each target artboard before coding.
- If a handoff node exists, treat it as source-of-truth for responsive behavior.
[Description truncada. Veja o README completo no GitHub.]