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.
Informações da origem
- Repositório
- nexu-io/open-design
- Última atividade na origem
- 18 de agosto de 2026 às 07:09
- Idioma detectado do SKILL.md
- inglês
- Estrelas
- 97.471
- Forks
- 11.317
Opções de instalação
Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.
Revise os arquivos de origem
Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.
Explorador de arquivos
2 arquivosExibindo SKILL.md
SKILL.md
Instruções da origem · Visualização somente leitura- 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.
Ver no GitHub