Pencil To Code

Takes Pencil design files and exports them as React components with Tailwind styling. You point it at a frame ID or whole document, and it generates the code plus extracts your design variables into Tailwind config. Can optionally spit out screenshots for comparison to catch conversion issues. It's straightforward tooling for the Pencil to code workflow, which is useful if you're already invested in that design tool. The skill supports Vue and HTML too, though React seems to be the default path. With 174 installs and passing most security audits, it's being used in the wild, though the Snyk warning is worth checking out before you add it to production work.

Install to Claude Code

npx -y skills add phrazzld/claude-config --skill pencil-to-code --agent claude-code