Import screenshot to prototype
Skill nexu-io/open-design/plugins/spec/examples/import-screenshot-to-prototype
🎨 The open-source Claude Design alternative. 🖥️ Local-first desktop app. 🖼️ Your coding agent becomes the design engine: prototypes, landing pages, dashboards, slides, images & video — real files, HTML/PDF/PPTX/MP4 export. 🤖 Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen & 20+ CLIs via BYOK.
npx -y skills add nexu-io/open-design --skill import-screenshot-to-prototypeAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
Use this plugin when the user provides a screenshot or image reference and wants it reconstructed as an editable Open Design prototype with sensible components, layout, and responsive behavior.
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
1.0 KB, as published. Nobody here has run it
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.