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/ 100推荐值
导入这个 Skill
选择你的 coding agent，复制项目级或个人级安装命令。
导入当前项目.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导入个人环境~/.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导入当前项目.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导入个人环境~/.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导入当前项目.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导入个人环境~/.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导入当前项目.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导入个人环境~/.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导入当前项目.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导入个人环境~/.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 -yNative Gemini CLI
gemini skills install https://github.com/nexu-io/open-design.git --scope workspace --path plugins/spec/examples/import-screenshot-to-prototype⚠ 安装命令使用开源 skills CLI。执行前请检查来源、脚本和权限。
Skill 指令
在 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.