skills.rest
Ameng2001
Ameng2001COMMUNITY
Explore all skills by this author →
GitHub

screenshot-to-pencil

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the challenge of converting a visual UI screenshot into a structured, machine-readable Pencil (.pen) prototype that can be edited, iterated, and reused.

Core Features & Use Cases

  • Layout decomposition: Breaks a screenshot into frames/sections and identifies component groups for a faithful prototype structure.
  • Design token extraction: Derives color palette and typography/spacing conventions into reusable variables for consistent styling.
  • Prototype JSON generation: Produces a valid .pen JSON file with unique IDs, component trees, and mapped Lucide icon names.
  • Optional frame appending: Reuses existing tokens and reusable components when adding new screens to an existing .pen file.

Quick Start

Provide a UI screenshot image and tell the skill where to write the output .pen file so it can generate a structured Pencil prototype.

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 and specify an output path. The skill analyzes layout, typography, and colors to generate a structured, edit-ready .pen JSON file.

Can I append a new screen to an existing .pen design file from a screenshot?▼

Yes, you can append new screens to an existing .pen design file. The skill reuses existing design tokens and reusable components when adding new frames, ensuring consistent styling across your prototype.

How does design token extraction work when generating a .pen file?▼

Design token extraction works by deriving the color palette, typography, and spacing conventions from the provided screenshot. These extracted values are mapped to reusable token variables instead of hardcoded colors within the .pen JSON.

Do I need to manually identify Lucide icons when turning a mockup into a .pen file?▼

No, you do not need to manually identify Lucide icons. The skill automatically analyzes the screenshot and maps detected icons to their correct Lucide icon names within the generated Pencil prototype component tree.

What is the best way to ensure valid JSON structure when creating Pencil prototypes?▼

The best way to ensure valid JSON structure is to let the skill load the Pencil format specification. It automatically generates valid .pen JSON with unique 5-character IDs and proper component trees.

Are hardcoded colors used when decomposing a UI layout into a Pencil file?▼

No, hardcoded colors are not used when decomposing a UI layout. The skill breaks the screenshot into frames and component groups while applying extracted design token variables for consistent styling.

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
H2OSLabsH2OSLabs
1

pen-to-react

Convert Pencil .pen design files into React components for Next.js frontends.

Official
Advanced
BinkyTwinBinkyTwin
1

ui-theme

Enforce token-based Tailwind theming with CSS variables for UI colors.

Community
Intermediate
HmbownHmbown
105

silent-image

Render static visual mockups with clear annotations for design reviews.

Community
Basic