Agent skill · design visual · nexu-io
import-screenshot-to-prototype
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.
Why this skill is useful
Adds a specific workflow for converting screenshots into editable prototypes, which includes layout and responsive design patterns not commonly known.
What it needs
About 1k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Import Screenshot To Prototype Workflow 1. Inspect the screenshot and identify layout regions, controls, typography scale, color roles, and content hierarchy. 2. Ask for the target viewport only if it cannot be inferred. 3. Rebuild the screenshot as a clean index.html artifact with semantic sections and reusable CSS tokens. 4. Preserve the visual intent, but replace unreadable or unavailable text with realistic editable content. 5. Add responsive behavior for at least one mobile width. 6. 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.
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/import-screenshot-to-prototype