Generate and edit UI designs in the JSON-based .pen format.
npx skills add https://github.com/466852675/Skills-2026 --skill pencil-skill
Please help me install this Agent Skill. Skill: pencil-skill Source: https://github.com/466852675/Skills-2026/tree/main/pencil-skill Command: npx skills add https://github.com/466852675/Skills-2026 --skill pencil-skill
Designing UI in Pencil's JSON .pen format manually is tedious and error‑prone, and AI‑generated designs often ignore design systems, spacing, and accessibility.
read‑tree, search‑nodes, batch‑design, validate‑pen, etc.) for inspecting, searching, batch editing and validating .pen files without opening the Pencil app.set-variables/get-variables to ensure consistent colours, typography and dark‑mode support.ref instances, slots and atomic design hierarchy.Ask the agent to create a new landing‑page design in .pen format using the pencil skill.
High-intent search queries and answers about installing and using this skill.
You can generate UI designs in JSON format by writing code that adheres to the .pen format, using CLI tools to create, validate, and batch edit responsive web mockups and component libraries without a desktop application.
Yes, you can validate and batch edit .pen design files without the desktop app by using CLI tools like read-tree, search-nodes, batch-design, and validate-pen to inspect and modify design nodes directly.
You manage design tokens and themes for dark mode in a JSON-based UI format by using CLI variables tools to set and get consistent colors, typography, and spacing values across the component hierarchy.
Yes, you need Node.js version 18 or higher to run the CLI toolbox and execute scripts for generating, validating, and editing responsive web mockups and design systems in the .pen format.
The best way to enforce design system rules when generating UI mockups with AI is to apply curated design rules that validate layout, typography, color, spacing, and anti-AI aesthetics directly within the generated JSON output.
AI-generated UI designs often ignore spacing and accessibility because they lack built-in design system constraints, a problem solved by applying curated design rules and using token management to enforce consistent layout and typography.
CyapstayeCreate, lint, and export DESIGN.md design tokens to Tailwind themes or W3C DTCG JSON.
JongsixTranslate Figma metadata and .pen designs into React/Tailwind components.
JnusoSearch Google Places from the CLI with text search, details, and reviews.
STAR03-byteCreate accessible React interfaces with shadcn/ui and Tailwind CSS.