← Back to Skills Marketplace
1203
Downloads
0
Stars
1
Active Installs
1
Versions
Install in OpenClaw
/install pencil-to-code
Description
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.
Usage Guidance
This skill appears coherent and limited to converting Pencil (.pen) designs into React + Tailwind output. Before installing: (1) confirm you only give it access to design files you intend to convert (it reads filePath/nodeId and can take screenshots of frames), (2) review generated code for any external image URLs or embedded data (images in designs may point to external hosts), and (3) if provenance matters, consider the unknown source/homepage — although the skill is instruction-only (no install), verify the owner/trust if you plan to use it in automated pipelines. If you need stronger assurance, ask the publisher for a homepage or source repository so you can inspect any implementation that may be added later.
Capability Analysis
Type: OpenClaw Skill
Name: pencil-to-code
Version: 0.1.0
The OpenClaw AgentSkills bundle 'pencil-to-code' appears benign. Its purpose is clearly defined as exporting .pen designs to React/Tailwind code, and all instructions in SKILL.md and references/node-mapping.md are directly aligned with this goal. There is no evidence of data exfiltration, malicious execution, persistence mechanisms, obfuscation, or prompt injection attempts designed to manipulate the AI agent into harmful or out-of-scope actions. The use of `filePath` in `mcp__pencil__` calls is inherent to the skill's function and does not indicate malicious intent from this skill, though platform-level input sanitization would be critical for such APIs.
Capability Assessment
Purpose & Capability
Name/description (export .pen → React/Tailwind) matches the SKILL.md: all declared operations focus on reading .pen files, extracting tokens, mapping nodes to components, and emitting code. There are no unrelated binaries, credentials, or external service requirements listed.
Instruction Scope
Instructions call platform-style RPCs (mcp__pencil__batch_get, mcp__pencil__get_variables, mcp__pencil__get_screenshot) and operate on a provided .pen filePath or nodeId — this is appropriate for the task. Note: the skill reads user-supplied design files and may request screenshots of frames; users should expect the skill to access the specified design files but the instructions do not attempt to access other system files or environment variables.
Install Mechanism
No install spec and no code files — instruction-only skill. This minimizes on-disk persistence and reduces install-time risk.
Credentials
No environment variables, credentials, or config paths are requested. The operations described (reading .pen, extracting variables, producing code) do not need additional secrets, so the lack of requested credentials is proportionate.
Persistence & Privilege
always is false and the skill does not request persistent system privileges or modify other skills. Autonomous invocation is allowed (platform default) but not combined with broad credentials or privileged behavior.
How to Use
- Make sure OpenClaw is installed (local or Docker)
- Run the install command in chat:
/install pencil-to-code - After installation, invoke the skill by name or use
/pencil-to-code - Provide required inputs per the skill's parameter spec and get structured output
Version History
v0.1.0
Initial release: Export Pencil .pen designs directly to production-ready React components using Tailwind.
- Converts .pen frame or document to React (default), Vue, or HTML code.
- Extracts Pencil design tokens and generates corresponding Tailwind theme configuration.
- Maps .pen node types (frames, text, images, shapes) to semantic React components with Tailwind classes.
- Supports outputting reusable components and props, with optional screenshot validation.
- Follows strict conventions: no design editing, accessible markup, and CSS-first token mapping.
Metadata
Frequently Asked Questions
What is 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. It is an AI Agent Skill for Claude Code / OpenClaw, with 1203 downloads so far.
How do I install Pencil To Code?
Run "/install pencil-to-code" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.
Is Pencil To Code free?
Yes, Pencil To Code is completely free (open-source). You can download, install and use it at no cost.
Which platforms does Pencil To Code support?
Pencil To Code is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).
Who created Pencil To Code?
It is built and maintained by Jcwen (@jcwen); the current version is v0.1.0.
More Skills