What problem does it solve?
Manually recreating UI designs from screenshots or design drafts is time-consuming and often leads to inconsistencies between the design file and accompanying documentation. This Skill eliminates that friction by automating the entire process of generating editable Pencil .pen design files and structured design docs in one workflow.
Core Features & Use Cases
- High-Fidelity Design Replication: Recreate screenshots or design drafts as precise Pencil .pen files with support for pixel-level alignment, flex layouts, and interactive state replication.
- Auto-Generated Design Documentation: Produce a structured design doc placed alongside the design on the same canvas, covering layout structure, component specs, interaction rules, and visual guidelines for easy stakeholder review.
- Flexible Workflow Support: Works for creating new pages from scratch, modifying existing .pen files, integrating multiple screenshots into a cohesive design system, and iterating on designs with built-in screenshot validation.
- Use Case Example: If you receive a product screenshot of a new user dashboard from the engineering team, use this Skill to recreate the exact UI in Pencil and generate a complete design doc with all required specs for development handoff.
Quick Start
Provide a screenshot of the page you want to recreate along with your desired fidelity level, and the skill will generate the matching Pencil .pen file and accompanying design documentation for you.
