Transform Pencil .pen designs into production-ready React components and Tailwind CSS configurations automatically.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install pencil-to-code
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install pencil-to-code using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Pencil to Code?
The Pencil to Code skill provides a direct pipeline for converting .pen design files into production-grade React components styled with Tailwind CSS. By leveraging the Openclaw Skills ecosystem, developers can eliminate the manual translation of design properties, ensuring that spacing, typography, and color tokens are perfectly synchronized with the source design. This tool is built to handle complex layouts, including nested frames and auto-layout configurations, translating them into semantic HTML and utility-first CSS.
This skill is specifically optimized for high-fidelity exports, meaning it doesn't just approximate the design—it maps the underlying design system logic directly to code. It is a vital tool for teams using Openclaw Skills to bridge the gap between creative design exploration and frontend engineering.
Pencil to Code Use Cases
- Converting finalized UI design frames into modular, reusable React components.
- Automatically generating Tailwind CSS @theme configurations from design tokens and variables.
- Rapidly prototyping frontend layouts using existing .pen assets without manual CSS writing.
- Facilitating visual regression testing by comparing generated code screenshots with original .pen designs.
How Pencil to Code Works
- The skill utilizes MCP tools to read the full node tree, frame IDs, and design variables from a specified .pen file.
- It extracts design tokens such as colors, fonts, and spacing to create a consistent Tailwind CSS theme configuration.
- Each .pen node type (frames, text, rectangles, ellipses) is mapped to its semantic HTML or React component equivalent.
- Design properties like auto-layout, gaps, padding, and alignment are converted into corresponding Tailwind utility classes using an 8-point grid system.
- The skill generates a complete TypeScript React component file and provides the necessary CSS additions for the global theme.
Pencil to Code Setup
To utilize this skill within the Openclaw Skills framework, you must provide the file path to a valid .pen design and the specific Frame ID you wish to export.
# The skill is typically invoked by an agent using the following logic:
mcp__pencil__batch_get({
filePath: "path/to/your/design.pen",
nodeIds: ["frameId"],
resolveVariables: true
})
Ensure your project is configured to support Tailwind CSS to properly render the generated utility classes.
Pencil to Code Data Schema & Taxonomy
The skill organizes its output by mapping .pen properties to a structured code schema.
Mapping Reference
| .pen Property | Tailwind / React Output |
|---|---|
| layout: "vertical" | className="flex flex-col" |
| layout: "horizontal" | className="flex flex-row" |
| gap: 16 | className="gap-4" |
| fontSize: 24 | className="text-2xl" |
| cornerRadius: 8 | className="rounded-lg" |
| fill: #000000 | className="bg-black" |
File Output
- Component File: A
.tsxfile containing the React functional component with props. - Theme Config: CSS variables for
app/globals.cssderived from .pen design tokens.
Pencil to Code Advanced Features
- Tailwind 4 @theme support: Utilizes the latest CSS-first token system for modern project architectures.
- Screenshot Validation: Automatically generates a screenshot of the source design for visual comparison against the rendered code.
- Multi-Framework Export: While React is the default, the skill supports targeting Vue or standard HTML output.
- Semantic HTML Logic: Intelligently chooses tags like h1-h6, p, and span based on text properties and design hierarchy.
- Prop Extraction: Automatically identifies design variables to create flexible TypeScript interfaces for generated components.
SKILL.md
Loading
Related Openclaw Skills
Pencil Renderer
A deterministic rendering engine that translates abstract aesthetic DNA codes into concrete Pencil .pen frames and visual screenshots.
PersonaNexus
A framework for defining structured AI agent identities using psychological models and compiling them into system prompts.
PersonaNexus Religion Skill
An advanced skill for defining and integrating spiritual, religious, and ethical frameworks into AI agent identities using structured YAML configuration.
PersonaNexus Board of Directors Skill
A sophisticated framework for integrating a virtual advisory board of historical figures into AI agent identities through structured YAML configurations.
Lieutenant
An advanced security and trust verification layer designed to protect AI agents from prompt injection, jailbreaks, and malicious communications.
Parallel Agents Skill
A high-performance orchestration skill that spawns real AI sub-sessions in parallel to execute complex, multi-agent workflows.
Featured*
