Pencil To Code

What it does

This skill, Pencil To Code, translates designs created in Pencil (.pen files) into production-ready React or Vue code snippets. It extracts design elements and variables from your Pencil file and generates corresponding React components with Tailwind CSS classes, along with a Tailwind theme configuration based on the .pen file's defined variables. This streamlines prototyping and visual development workflows by automating the conversion of hand-drawn designs into functional code.

When to use it

• You have designs created in Pencil (.pen files) that you want to quickly convert into React or Vue components.
• You are prototyping a user interface and need to rapidly generate initial code structures from visual mockups.
• You want to leverage existing .pen design files as the basis for building out front-end applications using React/Tailwind or Vue.
• You're looking for a way to automate the translation of visual designs into reusable UI components.

Key capabilities

• Exports Pencil (.pen) designs to React or Vue code.
• Generates Tailwind CSS classes based on .pen design properties.
• Creates a Tailwind theme configuration file from .pen variables.
• Supports exporting specific frames (by ID) or the entire document.
• Optional screenshot comparison for visual validation of the generated code.

Example prompts

• "Export this Pencil file (my_design.pen) to React with component name 'MyComponent'."
• "Generate Vue code from layout_screen.pen and output it to the /components directory."
• “Convert frame ID ‘loginForm’ in user_interface.pen to a React component.”

Tips & gotchas

• Requires access to the Pencil file path via MCP (Model Context Protocol).
• The skill currently supports exporting to React and Vue; other frameworks are not supported.
• Screenshot comparison for validation is an optional, manual step requiring additional tools or browser automation.