A powerful AI agent skill to design high-quality user interfaces in Pencil (.pen files) and automatically generate clean, production-ready React and Tailwind v4 code.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install pencil-design-skill
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-design-skill 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 Design Skill?
The Pencil Design Skill empowers AI coding agents to author, edit, and maintain high-fidelity user interfaces directly in Pencil (.pen) format. Operating in either direct file-writing mode (Mode A) or via Model Context Protocol (MCP) integrations (Mode B), this skill guarantees layout integrity, native variable styling, and seamless translation of UI mockups into clean frontend code. It is an essential addition to Openclaw Skills for developers looking to automate UI prototyping and front-end code generation.\n\nBy leveraging the advanced design system specifications of popular styles like Stripe, Linear, Apple, Notion, and Vercel, the skill ensures your generated designs feel professional and coherent. Layouts strictly adhere to modern responsive rules, eliminating manual computation errors and preventing design overflow across mobile, tablet, and desktop viewports.
Pencil Design Skill Use Cases
- Creating and editing interactive .pen UI wireframes, application layouts, and full design systems directly through your AI agent.\n- Rapidly converting high-fidelity Pencil designs into modern, production-ready React components styled with Tailwind CSS v4 and shadcn/ui.\n- Synchronizing design tokens and theme variables between visual design mockups and frontend application source code.\n- Setting up multi-artboard design layouts for responsive design setups without breaking bounds or overlapping nodes.
How Pencil Design Skill Works
- Style & Structure Definition: The agent prompts the user to select or confirm a design system preset (e.g., Stripe, Shadcn Dark, or Linear) and details the number of artboards required.\n2. Configuration Rules Application: If more than 4 artboards are requested, the agent invokes the File Split Policy to maintain workspace rendering performance.\n3. Interface Creation (Mode A or B): The agent either reads and writes .pen JSON files directly (Mode A) or interacts via connected MCP tools to retrieve editor state, search for reusable assets, and batch-design sections incrementally (Mode B).\n4. Layout Verification: The agent runs a mandatory pre-completion layout integrity audit to check for overlapping content, text growth boundaries, overflow issues, and proper auto-layout properties.\n5. Design-to-Code Generation: Leveraging Openclaw Skills integration, the agent exports semantic React 19 components mapping variables directly to CSS theme definitions.
Pencil Design Skill Setup
To enable the Pencil Design Skill within your agent environment, ensure you have the necessary reference files placed inside your project's workspace, then connect the Pencil MCP server.\n\nbash\n# Initialize the design environment and copy configuration files\nmkdir -p references styles ppt mcp\n\n# Clone or download the system style picking rules\ncurl -o references/pen-format.md https://raw.githubusercontent.com/CaoPipeline/pencil-design-skill/main/references/pen-format.md\n\n\nConfigure your MCP settings inside your agent's configuration file to utilize Mode B capabilities:\n\njson\n{\n \"mcpServers\": {\n \"pencil-mcp\": {\n \"command\": \"npx\",\n \"args\": [\"-y\", \"@caopipeline/pencil-mcp\"]\n }\n }\n}\n
Pencil Design Skill Data Schema & Taxonomy
The skill saves and manages UI designs in custom .pen JSON files. These documents follow a highly structured layout taxonomy to guarantee rendering fidelity:\n\n| Property | Type | Description |\n|---|---|---|\n| version | String | Format schema version (e.g., "2.8"). |\n| children | Array | UI elements, starting with top-level artboard frames. |\n| theme | Object | Visual themes associated with frames (e.g., Light or Dark). |\n| variables | Object | Bound design tokens mapping semantic colors and spacings. |\n\n### Key File Organization\n- <name>.pen: Production design files housing layout configurations. (Internal schema files use .pen.json).\n- references/layout-integrity.md: Enforces critical layout boundaries and positioning behaviors.\n- styles/style-<name>.md: Contains branding variables for Vercel, Linear, Stripe, Apple, and Notion templates.
Pencil Design Skill Advanced Features
- Automatic File Split Policy: Seamlessly detects large designs and manages performance by splitting mockups exceeding 4 artboards into separate, logically-linked
.penfiles.\n- Multi-Agent Inter-compatibility: Leverages the frontend-design skill to inherit cohesive design principles and aesthetic standards dynamically.\n- Zero-Overlap Layout Auditing: Includes a pre-completion layout audit usingpencil_snapshot_layoutwith structural constraints to instantly pinpoint nested overflow bugs.\n- Tailwind v4 Variable Theme Extraction: Automatically maps.pendesign variables directly into Tailwind v4 modern CSS variables, discarding legacy tailwind.config setups.
SKILL.md
Loading
Related Openclaw Skills
Obsidian Charts and Layout
This skill simplifies G2Plot data visualization in Obsidian notes, providing flawless chart configurations and bilingual layout rules for polished daily reports.
acpx-coding-default
A dedicated Openclaw skill that configures direct acpx CLI execution for Codex- and Claude-focused coding agents, optimizing session-based workflows.
dashscope-imagegen
An advanced image generation skill powered by Alibaba Cloud's DashScope wan2.6-t2i (通义万相) model for creating high-quality visual assets.
AO Op
An OpenClaw skill that provides a reliable wrapper to operate a local installation of Agent Orchestrator (AO) directly through execution commands.
Linear MCP
An integration skill enabling AI coding agents to read and write Linear workspace data via the official Linear MCP server and mcporter.
Bid Compliance Check
An AI-powered document compliance verification engine that extracts requirements from bidding documents and checks submission drafts to guarantee zero-defect compliance.