pencil-to-code
Export .pen design to React/Tailwind code. Does ONE thing well. Input: .pen frame ID or file path Output: React component code + Tailwind config Use when: design-exploration or user needs implementation code from a finalized Pencil design.
Why use this skill?
Automate your design-to-code workflow with the pencil-to-code skill. Effortlessly transform .pen design files into production-ready React components and Tailwind CSS.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/jcwen/pencil-to-codeWhat This Skill Does
The pencil-to-code skill serves as a high-fidelity bridge between design prototypes created in the .pen format and production-ready React applications. By intelligently parsing the hierarchical structure of a Pencil design, it automates the translation of visual layers, layout properties, and styling tokens into maintainable Tailwind CSS classes and functional React components. The skill handles complex mappings, such as converting Pencil's layout properties to Flexbox/Grid classes, transforming design variables into global theme configurations, and generating prop-driven component structures that integrate seamlessly into existing React projects. It is designed to preserve design intent while optimizing code output for performance and scalability.
Installation
To integrate this skill into your OpenClaw environment, execute the following command in your terminal:
clawhub install openclaw/skills/skills/jcwen/pencil-to-code
Ensure that you have the necessary environment permissions enabled for file system access, as the skill requires read access to your .pen files to perform its extraction and analysis.
Use Cases
- Design Handoff: Quickly generate boilerplate code from finalized design prototypes, saving hours of manual CSS and HTML construction.
- Design System Implementation: Sync design tokens (colors, typography, spacing) directly from .pen files to your Tailwind configuration to maintain strict design consistency.
- Rapid Prototyping: Turn wireframes or high-fidelity sketches into interactive React components to test functionality in real browser environments.
- Refactoring: Update existing UI components by re-exporting modified design frames to update styles without rewriting the underlying component logic.
Example Prompts
- "Take the 'Hero-Section' frame from landing-page.pen and generate a reusable React component with Tailwind styling."
- "Extract the color variables from main-theme.pen and provide the corresponding Tailwind theme configuration for my globals.css file."
- "Convert the navigation bar in profile-design.pen into a functional React component, ensuring all layout and hover states are represented as utility classes."
Tips & Limitations
For the best results, ensure your .pen file follows consistent naming conventions, as the skill maps these directly to component names. While the skill accurately translates layout and basic styling, complex custom animations or unconventional SVG assets may require minor manual adjustments. Always verify generated code in your local development environment. For complex documents, use the readDepth parameter to target specific sub-frames rather than exporting the entire document at once to improve performance.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-jcwen-pencil-to-code": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-read, code-execution