Pencil to Code
Convert Pencil .pen wireframes into production-ready frontend code.
About
Pencil to Code is a design skill from the JohnWayneeee collection that reads Pencil design files and generates layout, typography, spacing, and component structure faithful to the original wireframe.
It is niche but genuinely useful if your team wireframes in Pencil. The limitation: Pencil is a less common design tool, so this skill serves a small audience — and it translates wireframes, not polished visual designs, so visual fidelity depends on what is in the .pen file.
What it can do
- Pencil .pen file reading
- Layout generation
- Typography and spacing extraction
- Component structure generation
Setup
- In Claude Code: /plugin marketplace add JohnWayneeee/ai-agent-skills
- Run: /plugin install pencil-to-code@ai-agent-skills
- Point it at a .pen file and ask for the frontend code.
Prerequisites
Claude Code or compatible agent. A Pencil .pen wireframe file.
Use cases
Works with
Trust score — 4/10
Scored 4/10 (metrics tier, metrics-v1). Evidence: 1 star, 48 commits, MIT; Pencil is a niche design tool; translates wireframes, not polished designs. License: MIT.
★ 1 GitHub stars
How the trust score is built
Full methodology →- Adoption · stars/downloads, log-scaled vs peers
- 2.0/10
- Maintenance · recency, releases, issue load
- 5.0/10
- Openness · license + docs
- 8.0/10
- Manual review · sanity read + red-flag check
- 5.0/10
- · 1 star, 48 commits, MIT
- · Pencil is a niche design tool
- · translates wireframes, not polished designs
Sources
Every fact above was checked against these sources. Where a claim comes from the provider and couldn't be independently verified, the text says so.