import-screenshot-to-prototype
Use this plugin when the user provides a screenshot or image reference and wants it reconstructed as an editable OpenDesign prototype with sensible components, layout, and responsive behavior.
Informations de source
- Dépôt
- nexu-io/open-design
- Dernière activité de la source
- 18 août 2026 à 07:09
- Langue détectée de SKILL.md
- anglais
- Étoiles
- 96 674
- Forks
- 11 234
Options d'installation
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Vérifiez les fichiers source
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
Explorateur de fichiers
2 fichiersAffichage de SKILL.md
SKILL.md
Instructions source · Aperçu en lecture seule- name
- import-screenshot-to-prototype
- description
- Use this plugin when the user provides a screenshot or image reference and wants it reconstructed as an editable OpenDesign prototype with sensible components, layout, and responsive behavior.
- license
- MIT
- metadata
- {"author":"open-design-spec","version":"0.1.0"}
# 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.
Voir sur GitHub