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⚠ インストールには open-source 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.