skills.rest
kozyszoo
kozyszooCOMMUNITY
Explore all skills by this author →
GitHub

pencil-replicator

Replicate Chrome web pages into editable Pencil (.pen) files.

1|Updated Mar 3, 2026
Search Tags:#prototyping#replication#ui design#design fidelity#pencil#web to pencil
One-click install
npx skills add https://github.com/kozyszoo/antigravity-handson --skill pencil-replicator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pencil-replicator
Source: https://github.com/kozyszoo/antigravity-handson/tree/main/.claude/skills/pencil-replicator
Command: npx skills add https://github.com/kozyszoo/antigravity-handson --skill pencil-replicator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the highly time-consuming process of manually recreating web designs in Pencil, ensuring pixel-perfect fidelity and saving significant design and development hours.

Core Features & Use Cases

  • High-Fidelity Replication: Accurately converts live Chrome web pages into editable Pencil (.pen) files.
  • Multi-Agent Collaboration: Utilizes specialized agents (analyzer, builder, reviewer) for a robust and iterative process.
  • Use Case: A designer needs to quickly create a Pencil prototype of a complex dashboard they see in a live web application. This Skill can analyze the Chrome page and generate the corresponding Pencil file, allowing for immediate iteration and refinement.

Quick Start

Use the pencil-replicator skill to replicate the current Chrome screen to a new Pencil file.

Frequently Asked Questions about pencil-replicator

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

FAQPage Schema
How do I replicate a Chrome web page into a Pencil file?▼

To replicate a Chrome web page into a Pencil file, this Skill analyzes Chrome DevTools data and translates complex UI elements, styles, and layouts into Pencil's structured format, ensuring visual parity.

Can I convert a live web application dashboard into an editable Pencil prototype?▼

Yes, you can convert a live web application dashboard into an editable Pencil prototype. The Skill automates the manual recreation process to generate a high-fidelity Pencil file for immediate iteration and refinement.

How does the automated web to Pencil replication process work?▼

The web to Pencil replication process works by utilizing a multi-agent team of specialized analyzer, builder, and reviewer agents. This collaborative mechanism iteratively constructs the UI to ensure pixel-perfect fidelity.

Does the web to Pencil replication handle complex UI elements and styles?▼

Yes, the web to Pencil replication handles complex UI elements and styles. It extracts styling and layout data from Chrome DevTools and translates it directly into Pencil's structured format for accurate visual parity.

What is the best way to ensure pixel-perfect design fidelity when converting web pages?▼

The best way to ensure pixel-perfect design fidelity when converting web pages is to use an automated multi-agent replication process. This approach analyzes live Chrome screens and constructs the Pencil file iteratively through quality review.

Related Skills

Explore More Design & Creative Skills→
JustinWangJPJustinWangJP
6

chrome-devtools

Automate browser debugging and web page manipulation via Chrome DevTools MCP.

Community
Intermediate
zts212653zts212653
2.6k

pencil-design

Convert .pen design files into React/Tailwind components.

Community
Intermediate
shaunandrewsshaunandrews
8

wordpress-mockups

Create WordPress/Gutenberg UI mockups from design tokens, icons, and components.

Community
Advanced
tyronerosstyroneross
1

design-reference

Capture and store web design screenshots with configurable viewports.

Community
Intermediate