import-screenshot-to-prototype

Convert static image screenshots into structured, editable HTML prototypes with responsive CSS layout tokens.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#CSS #HTML #prototype #screenshot #import #design-migration

One-click install

npx skills add https://github.com/nexu-io/open-design --skill import-screenshot-to-prototype

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: import-screenshot-to-prototype
Source: https://github.com/nexu-io/open-design/tree/main/plugins/spec/examples/import-screenshot-to-prototype
Command: npx skills add https://github.com/nexu-io/open-design --skill import-screenshot-to-prototype

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the manual effort required to translate visual design concepts from static images into functional, code-based prototypes, ensuring design intent is preserved during the migration process.

Core Features & Use Cases

Layout Reconstruction: Automatically identifies visual regions, typography, and color roles from image inputs.
Semantic Generation: Produces clean HTML and CSS tokens that are ready for further development or design system integration.
Use Case: A designer provides a screenshot of a legacy web interface; the Skill reconstructs it as a responsive, editable prototype for immediate iteration.

Quick Start

Import the attached screenshot and rebuild it as an editable prototype for the desktop viewport.

Frequently Asked Questions about import-screenshot-to-prototype

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

FAQPage Schema

How do I convert a screenshot to an editable prototype?▼

Provide the screenshot to the skill and specify the target viewport. The skill will analyze the image layout and generate an index.html file with semantic sections and CSS tokens.

Can I specify the target device for the prototype?▼

Yes, the skill supports desktop, mobile, and responsive viewports. You can select your preferred target during the import process to ensure the generated layout matches your requirements.

Does the skill preserve the original text from the image?▼

The skill preserves visual intent but replaces unreadable or unavailable text with realistic, editable content to ensure the prototype is functional and clean.

What output files does this skill generate?▼

The skill produces an index.html file containing the reconstructed prototype and an import-notes.md file detailing the inferred design decisions and layout logic.