Pencli

Export Design to Code with Pencil MCP in Terminal
Pencil automatically installs pencil MCP (Model Context Protocol) server to Claude Code*, allowing you to generate production-ready code from your designs directly in your terminal.

Active MCP integrations:

On Pencil startup MCP is automatically setup to existing CLI tools and IDEs if you have them and removed on quit.

Claude Code
Claude Code CLI
Codex
Codex CLI
Gemini CLI
Windsurf IDE
Antigravity IDE
How to export your design to code:

Pencil app has to be launched first, after that open Claude Code in your terminal by running claude
Check if you can see Pencil MCP tools by running command /mcp
Note: If you still don’t see Pencil MCP tools, make sure to launch Pencil app first and then claude code afterwards. Pencil installs MCP tools automatically on launch.
Ask Claude to generate code from your designs (Keep Pencil desktop app running). Claude Code will be able to access selections, components, variables, etc.
Example prompt (Run via Claude Code CLI in Terminal):

Generate React/Tailwind/NextJS code from the selected frame
Update CSS based on the variables in the design
Create a React component based on the selected frame