pencil-to-code
Export .pen design to React/Tailwind code.
Setup & Installation
Install command
clawhub install jcwen/pencil-to-codeIf the CLI is not installed:
Install command
npx clawhub@latest install jcwen/pencil-to-codeOr install with OpenClaw CLI:
Install command
openclaw skills install jcwen/pencil-to-codeor paste the repo link into your assistant's chat
Install command
https://github.com/openclaw/skills/tree/main/skills/jcwen/pencil-to-codeWhat This Skill Does
Converts Pencil (.pen) design files to React components with Tailwind CSS. Takes a frame ID or file path as input and outputs typed TypeScript components plus a Tailwind theme configuration derived from .pen design variables. Handles the full property translation: layout, spacing, typography, colors, and border radius.
Covers the complete .pen-to-Tailwind translation table automatically, removing the need to manually look up class equivalents for every layout, color, and typography property.
When to Use It
- Exporting a finalized Pencil frame as a ready-to-use React component
- Generating a Tailwind @theme config from .pen design variable definitions
- Handing off UI designs from Pencil to a React/TypeScript codebase
- Converting Pencil layout and spacing values to Tailwind utility classes
- Validating generated code visually against the original .pen frame screenshot
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Exporting a finalized Pencil frame as a ready-to-use React component
- 1Exporting a finalized Pencil frame as a ready-to-use React component
- 2Generating a Tailwind @theme config from .pen design variable definitions
- 3Handing off UI designs from Pencil to a React/TypeScript codebase
- 4Converting Pencil layout and spacing values to Tailwind utility classes
- 5Validating generated code visually against the original .pen frame screenshot
Export .pen design to React/Tailwind code.
Security Audits
These signals reflect official OpenClaw status values. A Suspicious status means the skill should be used with extra caution.