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.