A deterministic rendering engine that translates abstract aesthetic DNA codes into concrete Pencil .pen frames and visual screenshots.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install pencil-renderer
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-renderer 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 Renderer?
The pencil-renderer is a specialized technical utility designed to bridge the gap between high-level design concepts and tangible UI assets. As a key component within the Openclaw Skills ecosystem, it takes DNA codes—which encapsulate layout, color, typography, motion, density, and background—and renders them into functional Pencil .pen frames. This skill is built to operate as a high-efficiency worker for design orchestrators, ensuring that visual proposals are generated with technical precision.
By leveraging the Pencil MCP backend, this skill enables developers and AI agents to programmatically build UI components such as hero sections, cards, and forms. It eliminates the ambiguity of manual design by using a deterministic mapping system, where specific DNA axes are translated directly into Pencil properties like alignItems, fill gradients, and typography scales. This makes it an essential tool for teams looking to automate design exploration and maintain aesthetic consistency across generated interfaces.
Pencil Renderer Use Cases
- Automating the creation of UI component frames (Hero, Card, Nav, etc.) based on predefined aesthetic DNA.
- Generating rapid visual prototypes for design-exploration orchestrators within the Openclaw Skills framework.
- Programmatically capturing screenshots of rendered components for visual regression testing or preview galleries.
- Implementing a consistent design system where DNA codes strictly dictate the visual output without manual intervention.
How Pencil Renderer Works
- The skill initializes by checking the editor state and ensuring a Pencil document is ready or creating a new one.
- It analyzes the input DNA code and identifies matching style guide tags (e.g., mapping dark color DNA to dark-mode style tags).
- Abstract DNA axes are translated into concrete Pencil properties using a deterministic reference mapping.
- It executes a batch of design operations using mcp__pencil__batch_design to construct the component's structure, including text, containers, and icons.
- The skill triggers a screenshot capture of the specific frame ID to provide immediate visual verification.
- The final Frame ID and screenshot are returned to the calling agent for further orchestration.
Pencil Renderer Setup
To utilize this skill, you must have the Pencil MCP server configured and accessible within your environment. Ensure your reference documents are properly mapped for the translation engine.
# Ensure the Pencil MCP backend is active
# The skill requires access to the following reference paths:
# - references/dna-to-pencil.md
# - references/batch-design-patterns.md
This skill is typically invoked by orchestrators like design-exploration and does not require manual user configuration beyond ensuring the Pencil environment is reachable.
Pencil Renderer Data Schema & Taxonomy
The pencil-renderer organizes data based on a strict mapping between DNA axes and Pencil properties. The following table summarizes the data taxonomy:
| DNA Axis | Pencil Property Translation |
|---|---|
| Layout | centered, asymmetric, or bento grid structures |
| Color | solid fills, linear gradients, and foreground contrast |
| Typography | display-heavy vs minimal scaling and font families |
| Density | pixel-perfect gap and padding definitions (8px to 48px) |
Output Schema:
- frame_id: A unique string identifier for the generated Pencil node.
- screenshot: A binary or path reference to the captured visual frame.
Pencil Renderer Advanced Features
- Deterministic Design: Guarantees that the same DNA input always results in the same visual structure.
- Batch Operation Execution: Optimizes rendering performance by grouping multiple design commands into a single MCP call.
- Multi-Component Support: Includes built-in templates for complex structures like bento grids, inputs with validation states, and multi-column footers.
- Orchestrator Integration: Designed specifically to be composed by other Openclaw Skills to enable complex, multi-agent design workflows.
SKILL.md
Loading
Related Openclaw Skills
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.
CardDAV Contacts
A command-line powerhouse for synchronizing and managing CardDAV contacts locally using vdirsyncer and khard.
Pencil to Code
Transform Pencil .pen designs into production-ready React components and Tailwind CSS configurations automatically.
Lieutenant
An advanced security and trust verification layer designed to protect AI agents from prompt injection, jailbreaks, and malicious communications.
Featured*
