multiAI Summary Pending
pencil-mcp-get-screenshot
Capture a visual screenshot of a specific node in a Pencil .pen file via the get_screenshot MCP tool. Use when the user explicitly mentions Pencil and needs to visually verify a design operation, check for alignment or spacing issues, or review a component after batch_design changes.
223 stars
Installation
Claude Code / Cursor / Codex
$curl -o ~/.claude/skills/pencil-mcp-get-screenshot/SKILL.md --create-dirs "https://raw.githubusercontent.com/partme-ai/full-stack-skills/main/skills/pencil-skills/pencil-mcp-get-screenshot/SKILL.md"
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/pencil-mcp-get-screenshot/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How pencil-mcp-get-screenshot Compares
| Feature / Agent | pencil-mcp-get-screenshot | Standard Approach |
|---|---|---|
| Platform Support | multi | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Capture a visual screenshot of a specific node in a Pencil .pen file via the get_screenshot MCP tool. Use when the user explicitly mentions Pencil and needs to visually verify a design operation, check for alignment or spacing issues, or review a component after batch_design changes.
Which AI agents support this skill?
This skill is compatible with multi.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
## Tools
This skill is designed to call the Pencil MCP tool:
* `get_screenshot`
If your client namespaces MCP tools, it may appear as `mcp__pencil__get_screenshot`.
## When to use this skill
### Intent Recognition (CRITICAL)
Even if a trigger phrase matches, you must **verify the user's intent**:
1. Is the user explicitly asking to use "Pencil"?
2. Is the current conversation context clearly about "Pencil" design tasks?
**If the answer is NO, do NOT use this skill.** (e.g., "Get screenshot" might refer to a browser screenshot via Puppeteer).
**CRITICAL PREREQUISITE:**
**You must ONLY use this skill when the user EXPLICITLY mentions "Pencil".**
**ALWAYS use this skill when:**
- You have completed a design operation (`batch_design`) and need to **verify** the result **in Pencil**.
- The user asks to "Show me" or "Take a look" **at the Pencil design**.
- You need to check for visual bugs (text overflow, alignment, contrast).
- This is the **Verify** step in the Design Loop.
**Trigger phrases include:**
- "Get Pencil screenshot" (获取 Pencil 截图)
- "Pencil visual check" (Pencil 视觉检查)
- "Verify Pencil design" (验证 Pencil 设计)
- "Show me the button in Pencil" (给我看 Pencil 里的那个按钮)
## Input Parameters
* **`filePath`** (string, optional): Path to access a specific `.pen` file.
* **`nodeId`** (string, required): The ID of the node to screenshot.
## How to use this skill
1. **Identify Target**: Get the `nodeId` of the element you just modified or created.
2. **Call Tool**: `get_screenshot(nodeId='...')`.
3. **Analyze Result**:
* The tool returns an image URL or data.
* **CRITICAL**: You must "look" at the image (if capabilities allow) or present it to the user for feedback.
* Check for: Alignment, Spacing, Text Truncation, Color correctness.
## Examples
### 1. Simple: Node Screenshot
Get a visual verification of a single element.
See [1-node-screenshot.json](examples/1-node-screenshot.json).
### 2. Medium: Frame Verification
Screenshot a whole frame to check layout and composition.
See [2-frame-verification.json](examples/2-frame-verification.json).
### 3. Complex: Design System Check
Screenshot a component master to ensure the design system update looks correct.
See [3-component-check.json](examples/3-component-check.json).
## Keywords
**English keywords:**
get screenshot, visual verification, check design, view node, render image, visual audit
**Chinese keywords (中文关键词):**
获取截图, 视觉验证, 检查设计, 查看节点, 渲染图片, 视觉审计