pencil-skill
starsforks
How to install pencil-skill?
nisus74/pencil-skill
$npx -y skills add Nisus74/pencil-skillAI coding skill plugin for pencil.dev (.pen) design files via the Pencil MCP server that works with Claude Code, Cursor, Codex, and Gemini CLI
README.md
| 1 | # pencil-dev-skill |
| 2 | |
| 3 | Teach your AI coding tool to design in [pencil.dev](https://pencil.dev). Works with Claude Code, Cursor, and Codex. |
| 4 | |
| 5 | [](https://github.com/Nisus74/pencil-skill/commits/main) [](./LICENSE) |
| 6 | |
| 7 | > **Unofficial community plugin.** This project is not affiliated with or endorsed by the Pencil.dev team. For the Pencil editor, MCP server, and official documentation, visit [pencil.dev](https://pencil.dev). Issues with this skill belong in [this repo](https://github.com/Nisus74/pencil-skill); issues with the Pencil editor or MCP server belong with the Pencil.dev team. |
| 8 | |
| 9 | [Star the repo](https://github.com/Nisus74/pencil-skill) if it helps you, or |
| 10 | [buy me a coffee or lunch](https://www.buymeacoffee.com/Nisus74) to support ongoing maintenance. |
| 11 | |
| 12 | --- |
| 13 | |
| 14 | ## What it does |
| 15 | |
| 16 | Pencil.dev is a collaborative design tool for creating web and mobile interfaces via the Pencil MCP server. This skill teaches AI coding tools how to work with `.pen` design files. |
| 17 | |
| 18 | - Guides the AI through a seven-step design workflow: detect host, orient, load guidelines, plan, execute, verify, report |
| 19 | - Teaches all 9 Pencil MCP tools with worked invocations, cost cheatsheet, and composite recipes |
| 20 | - Provides 2026 design depth: user flows, component and screen states, full accessibility coverage, and modern patterns (container queries, fluid type, AI-UI affordances) |
| 21 | - Ships 15 worked examples showing real MCP tool sequences from scratch |
| 22 | - Includes per-platform tool-name mappings so the same skill works everywhere |
| 23 | |
| 24 | > **Status:** `0.8.0`, pre-release. Nothing is shipped until the owner cuts a release. |
| 25 | |
| 26 | --- |
| 27 | |
| 28 | ## What you'll be able to do |
| 29 | |
| 30 | After installing this skill: |
| 31 | |
| 32 | - **Generate complete UI designs** from natural language ("design a dashboard") without manual tool hunting |
| 33 | - **Speed up design iteration** by delegating pattern work to AI while you focus on unique decisions |
| 34 | - **Maintain design consistency** across components and screens |
| 35 | - **Work cross-platform** with the same skill on Claude Code, Cursor, or Codex |
| 36 | - **Customise the skill** for your team's workflow via folder copy or fork-and-install |
| 37 | |
| 38 | --- |
| 39 | |
| 40 | ## Prerequisites |
| 41 | |
| 42 | You'll need three things: |
| 43 | |
| 44 | 1. **An AI coding tool:** [Claude Code](https://claude.ai/code), [Cursor](https://cursor.com), or [OpenAI Codex](https://openai.com/codex) |
| 45 | 2. **Pencil MCP server:** Configure it in your tool ([how to set up Pencil](https://pencil.dev/docs/setup)) |
| 46 | 3. **A Pencil.dev workspace:** Create one free at [pencil.dev](https://pencil.dev) (no credit card required) |
| 47 | |
| 48 | > **New to Pencil.dev?** It's a browser-based design tool. You don't install it; you open it in your browser and create `.pen` files there. This skill helps your AI tool work with those files. |
| 49 | |
| 50 | --- |
| 51 | |
| 52 | ## Install |
| 53 | |
| 54 | **Most people want plugin install.** If you plan to customise the skill's instructions for your team, use folder copy or fork + install instead. |
| 55 | |
| 56 | ### Plugin install (recommended) |
| 57 | |
| 58 | **Claude Code:** add the marketplace, then install the plugin. This lets you pin and update through the marketplace commands. |
| 59 | |
| 60 | ```bash |
| 61 | /plugin marketplace add Nisus74/pencil-skill |
| 62 | /plugin install pencil-dev-skill@pencil-dev-skill |
| 63 | ``` |
| 64 | |
| 65 | **Cursor 2.5+:** in the editor, run `/add-plugin` and point it at `github.com/Nisus74/pencil-skill`. |
| 66 | |
| 67 | **Codex:** add the marketplace, then install the plugin. Codex reads the same `.claude-plugin/marketplace.json` the repo ships. |
| 68 | |
| 69 | ```bash |
| 70 | codex plugin marketplace add Nisus74/pencil-skill |
| 71 | codex plugin add pencil-dev-skill@pencil-dev-skill |
| 72 | ``` |
| 73 | |
| 74 | ### Folder copy |
| 75 | |
| 76 | Download [skills/pencil-design/](skills/pencil-design/) and drop it into the skills directory your tool reads. |
| 77 | |
| 78 | Quickest method: |
| 79 | |
| 80 | ```bash |
| 81 | npx degit github:Nisus74/pencil-skill/skills/pencil-design <target>/pencil-design |
| 82 | ``` |
| 83 | |
| 84 | Or with git: |
| 85 | |
| 86 | ```bash |
| 87 | git clone --depth=1 https://github.com/Nisus74/pencil-skill.git /tmp/pencil-skill |
| 88 | cp -r /tmp/pencil-skill/skills/pencil-design <target>/pencil-design |
| 89 | ``` |
| 90 | |
| 91 | Where `<target>` lives: |
| 92 | |
| 93 | | Tool | Path | |
| 94 | |------|------| |
| 95 | | Claude Code | `~/.claude/skills/` or `.claude/skills/` | |
| 96 | | Cursor | `.cursor/skills/` | |
| 97 | | Codex | `~/.codex/skills/` | |
| 98 | |
| 99 | To update, re-run the same `degit` or `cp` command. If you've edited the files locally, diff and merge by hand. |
| 100 | |
| 101 | ### Fork + install |
| 102 | |
| 103 | Available for Claude Code, Cursor, and Codex. |
| 104 | |
| 105 | 1. Fork [Nisus74/pencil-skill](https://github.com/Nisus74/pencil-skill) on GitHub. |
| 106 | 2. Install your fork as a plugin: |
| 107 | - Claude Code: `/plugin marketplace add <your-handle>/pencil-skill`, then `/plugin install pencil-dev-skill@pencil-dev-skill` |
| 108 | - Cursor: `/add-plugin` pointing at `github.com/<your-handle>/pencil-skill` |
| 109 | - Codex: `codex plugin marketplace add <your-handle>/pencil-skill`, then `codex plugin add pencil-dev-skill@pencil-dev-skill` |
| 110 | 3. Edit your fork, commit, and push. The next plugin update pulls your changes. |
| 111 | 4. To pull upstream changes, rebase your fork against `Nisus74/pencil-skill`. |
| 112 | |
| 113 | Fo |
People who liked this also viewed
6 picksType
- web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026
- lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026
- design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026
- ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026
- caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026
- codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026
