import-screenshot-to-prototype
Makes your agent recreate images into editable prototypes. It organizes the layout and behavior to look like a real website.
What it does
Transforms an image or screenshot into an interactive website prototype. It recreates the image's appearance in an editable format that can adapt to different screen sizes.
When to use it
- ✓When you have a visual idea for a website and want to turn it into something editable.
- ✓When you need a starting point for a new web project based on a visual sketch.
- ✓If you saw a design you liked and want to recreate it for editing.
Example of what to ask your AI
“Turn this screenshot into an editable website prototype.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
The AI analyzes the image, identifies elements like text, buttons, and boxes, and recreates them in website code. It also adds the ability to adapt to smaller screens, like those on mobile phones.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add nexu-io/open-design --skill import-screenshot-to-prototypeOr download just the file:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/spec/examples/import-screenshot-to-prototype/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Import Screenshot To Prototype
Workflow
- Inspect the screenshot and identify layout regions, controls, typography scale, color roles, and content hierarchy.
- Ask for the target viewport only if it cannot be inferred.
- Rebuild the screenshot as a clean
index.htmlartifact with semantic sections and reusable CSS tokens. - Preserve the visual intent, but replace unreadable or unavailable text with realistic editable content.
- Add responsive behavior for at least one mobile width.
- Self-critique visual fidelity, text fit, and editability before final.
Output Contract
Produce index.html and a short import-notes.md that lists inferred decisions.
FAQ
What is a prototype?
It's an initial, editable version of a website or app, used to test the design and functionality before building the final version.
What are 'sensible components'?
These are parts of the design (like buttons or menus) that the AI tries to recreate intelligently so they can be easily edited and function well.
What is 'responsive behavior'?
It's the ability of the prototype to adjust and look good on different screen sizes, such as computers, tablets, and phones.
Details
Original description by the author
Use this plugin when the user provides a screenshot or image reference and wants it reconstructed as an editable OpenDesign prototype with sensible components, layout, and responsive behavior.
repo: nexu-io/open-design
Popularity
- GitHub stars
- 101k
- Ranking position
- #654
- License
- Apache-2.0
- Updated
- 10/16/2026
Comments
- …
More skills from this repository
sample-plugin
Makes your agent create a metadata file for tests. It helps ensure code works correctly in different situations.
nexu-io/open-design
aster-atelier
Helps your agent create an artistic website with a classic look. It uses elegant imagery, blue skies, and serif fonts for a cinematic feel.
nexu-io/open-design
audio-jingle
Makes your agent generate audio like jingles and sound effects. It can create music and voices, saving the result as an audio file.
nexu-io/open-design
blog-post
Helps your agent write long articles or blog posts. It includes space for images, quotes, and author information.
nexu-io/open-design
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC