Use Case
Pencil Renderer is a powerful AI agent skill that extends your assistant with new capabilities. Render DNA codes to Pencil .pen frames. Does ONE thing well. Input: DNA code + component type (hero, card, form, etc.) Output: .pen frame ID + screenshot Use when: design-exploration or other orchestrators need to render visual proposals using Pencil MCP backend. This guide walks you through installing Pencil Renderer, configuring it for your setup, and running your first commands β so you can start getting value in minutes.
Install Pencil Renderer: npx clawhub@latest --dir ~/.claude/skills install pencil-renderer
Restart your AI client (Claude Code, Cursor, Gemini CLI, or OpenClaw)
Type a natural language request related to developer & devops to trigger Pencil Renderer
Review the output and refine your prompt for better results
Combine Pencil Renderer with other skills to build multi-step workflows
Copy these prompts and use them with your AI agent after installing Pencil Renderer
Help me get started with Pencil Renderer
What can Pencil Renderer do for my developer & devops workflow?
Show me an example of using Pencil Renderer
Select your agent
Option 1: Install via CLI (recommended)
Recommended (no pre-install needed)
npx clawhub@latest --dir ~/.claude/skills install pencil-rendererOr via clawhub CLI (if already installed)
clawhub --dir ~/.claude/skills install pencil-rendererβ οΈ Requires Node.js 18+. No Node? Use Option 2 below to download the ZIP instead. Install Node.js β
Option 2: Manual install (no Node required)
Download the ZIP, extract it, and place the folder at the path below. Restart your agent to activate.
Install path
~/.claude/skills/pencil-renderer/π‘Extract and place the folder at the path above, then restart your agent.