Recreate screenshots as Pencil pages with a structured design document.
npx skills add https://github.com/zephyrwang6/allSkills --skill image2pencil
Please help me install this Agent Skill. Skill: image2pencil Source: https://github.com/zephyrwang6/allSkills/tree/main/pm-image2pencil Command: npx skills add https://github.com/zephyrwang6/allSkills --skill image2pencil
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.
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.
High-intent search queries and answers about installing and using this skill.
To recreate a screenshot into an editable wireframe, provide the reference image and target edit goals. The tool rebuilds the web or mobile interface as a high-fidelity Pencil page with pixel-level alignment and iterative screenshot verification.
Yes, you can generate a design document beside a recreated canvas. The system automatically produces a structured design brief next to the page for review, handoff, or iteration, detailing modules, fields, interactions, and visual specs.
The best way to perform visual QA on a UI replication is using iterative layout snapshot checks and screenshot verification. This corrects spacing, alignment, cropping, and missing details during the editing process.
Yes, this approach works with existing .pen edits. You can load an existing Pencil file to apply pixel-level alignment, iterative refinement, and multi-screenshot consolidation into a single deliverable.
You consolidate multiple screenshots into a single deliverable by providing several reference images. The system merges them into one high-fidelity Pencil page while generating a unified design document beside the canvas.
letta-aiReverse engineer ray-tracing binaries to reconstruct pixel-perfect rendering algorithms.
oaustegardGenerate interactive HTML demo pages with bookmarklet functionality.
gkswls5006-webAutomate Pencil MCP batch design workflows with layout checks and screenshot archiving.
w7panelDesign and implement custom React components and web application interfaces.
