Web & Frontendlow risk

import-screenshot-to-prototype

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.

nexu-io/open-design·plugins/spec/examples/import-screenshot-to-prototype/SKILL.md
60/ 100Recommendation

Install this skill

Choose your coding agent and copy a project or personal installation command.

Pinned to the indexed commit
Project installation.agents/skills/import-screenshot-to-prototype
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/spec/examples/import-screenshot-to-prototype -a codex -y
Personal installation~/.agents/skills/import-screenshot-to-prototype
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/spec/examples/import-screenshot-to-prototype -a codex -g -y
Manual folder.agents/skills/import-screenshot-to-prototypeOfficial docs ↗
Project installation.claude/skills/import-screenshot-to-prototype
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/spec/examples/import-screenshot-to-prototype -a claude-code -y
Personal installation~/.claude/skills/import-screenshot-to-prototype
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/spec/examples/import-screenshot-to-prototype -a claude-code -g -y
Manual folder.claude/skills/import-screenshot-to-prototypeOfficial docs ↗
Project installation.agents/skills/import-screenshot-to-prototype
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/spec/examples/import-screenshot-to-prototype -a github-copilot -y
Personal installation~/.copilot/skills/import-screenshot-to-prototype
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/spec/examples/import-screenshot-to-prototype -a github-copilot -g -y
Manual folder.agents/skills/import-screenshot-to-prototypeOfficial docs ↗
Project installation.agents/skills/import-screenshot-to-prototype
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/spec/examples/import-screenshot-to-prototype -a cursor -y
Personal installation~/.cursor/skills/import-screenshot-to-prototype
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/spec/examples/import-screenshot-to-prototype -a cursor -g -y
Manual folder.agents/skills/import-screenshot-to-prototypeOfficial docs ↗
Project installation.agents/skills/import-screenshot-to-prototype
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/spec/examples/import-screenshot-to-prototype -a gemini-cli -y
Personal installation~/.gemini/skills/import-screenshot-to-prototype
npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/spec/examples/import-screenshot-to-prototype -a gemini-cli -g -y
Native Gemini CLIgemini skills install https://github.com/nexu-io/open-design.git --scope workspace --path plugins/spec/examples/import-screenshot-to-prototype
Manual folder.agents/skills/import-screenshot-to-prototypeOfficial docs ↗
⚠ Installation uses the open-source skills CLI. Inspect the source and permissions before running the command.

Skill instructions

View source on GitHub ↗
# 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.