image2pencil
CommunityRecreate screenshots in Pencil with docs beside them.
Design & Creative#design document#wireframe#pencil#visual qa#ui replication#screenshot reconstruction#pixel alignment
Authorzephyrwang6
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill turns screenshots or design drafts into a high-fidelity Pencil page while also producing a clear design document next to the canvas, reducing manual layout recreation and hand-written spec work.
Core Features & Use Cases
- Screenshot and design replication: Rebuild web or mobile interfaces from reference images with strong visual fidelity.
- Side-by-side documentation: Generate a structured design brief beside the recreated page for review, handoff, or iteration.
- Iterative quality control: Check screenshots and layout snapshots during editing to correct spacing, alignment, cropping, and missing details.
- Use case: A designer sends a screenshot of an app screen and asks for an editable Pencil version plus a written module, field, interaction, and visual-spec summary.
Quick Start
Provide the screenshot or design draft and your target edit goals, and I will recreate it in Pencil while placing a structured design document beside the page.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: image2pencil Download link: https://github.com/zephyrwang6/allSkills/archive/main.zip#image2pencil Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 536,000+ vetted skills library on demand.