skills.rest
VanLengs
VanLengsCOMMUNITY
Explore all skills by this author →
GitHub

screenshot-to-pencil

Convert UI screenshots into structured Pencil .pen JSON prototypes.

1|Updated Mar 27, 2026
Search Tags:#automation#prototype#screenshot#design-tokens#ui-analysis#desktop-mobile#pencil
One-click install
npx skills add https://github.com/VanLengs/astra-studio-plugins --skill screenshot-to-pencil
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screenshot-to-pencil
Source: https://github.com/VanLengs/astra-studio-plugins/tree/main/studio-design/skills/screenshot-to-pencil
Command: npx skills add https://github.com/VanLengs/astra-studio-plugins --skill screenshot-to-pencil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Convert a UI screenshot into a machine-readable Pencil prototype by analyzing layout, components, colors, typography, spacing, and icons to produce a structured .pen JSON file.

Core Features & Use Cases

  • Analyze a UI screenshot to generate a Pencil prototype (.pen) with accurate layout, components, tokens, and styles.
  • Output can reuse design tokens and reusable components, enabling consistent design handoffs and rapid prototyping.
  • Use cases include converting mockups to editable prototypes or creating starter files for design systems.

Quick Start

Provide a UI screenshot image when prompted and the skill will output a Pencil prototype file in docs/design/screens.pen (or the path you specify).

Frequently Asked Questions about screenshot-to-pencil

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a UI screenshot into an editable Pencil prototype?▼

To convert a UI screenshot into an editable Pencil prototype, provide the image input and the skill analyzes layout, components, colors, typography, spacing, and icons to output a structured .pen JSON file.

Can I generate design tokens and reusable components from an existing mockup image?▼

Yes, you can generate design tokens and reusable components from a mockup image. The skill extracts colors, typography, and spacing during UI analysis to ensure consistency with Pencil specifications in the output .pen file.

Does this screenshot to Pencil conversion tool support both desktop and mobile mocks?▼

Yes, the screenshot to Pencil conversion supports both desktop and mobile mocks. It analyzes the provided UI screenshot to generate accurate layouts and components tailored for each specific platform design.

What is the best way to automate rapid prototyping from a screenshot for a design review?▼

The best way to automate rapid prototyping from a screenshot is using this skill to transform the image into a machine-readable Pencil prototype, enabling quick design reviews and starter files for design systems.

How do I specify the output path for the generated .pen JSON file?▼

To specify the output path for the generated .pen JSON file, provide your desired directory location when prompted, otherwise the skill defaults to saving the Pencil prototype in docs/design/screens.pen.

Are there any limitations when converting complex screenshots to Pencil prototypes?▼

When converting complex screenshots to Pencil prototypes, the accuracy depends on the clarity of the input image. The skill analyzes layout and icons, but highly ambiguous visual elements may require manual refinement in Pencil.

Related Skills

Explore More Design & Creative Skills→
gauravb4875-uxgauravb4875-ux

recreate-screenshot

Recreate UI screens from screenshots with pixel-level color and typography matching.

Community
Advanced
Ameng2001Ameng2001
1

screenshot-to-pencil

Converts UI screenshots into editable .pen JSON prototypes with named color and typography variables.

Community
Intermediate
JongHyunLee84JongHyunLee84

factory-ui-design

Generate UI specifications with screen layouts and component hierarchies from technical architecture.

Community
Advanced
gabelulgabelul
38

stitch-react-components

Converts Stitch UI designs into Vite React TypeScript components with Tailwind theming.

Community
Intermediate