import-screenshot-to-prototype
Faz seu agente recriar imagens em protótipos editáveis. Ele organiza o layout e o comportamento para que pareça um site real.
O que ela faz
Transforma uma imagem ou captura de tela em um protótipo interativo de site. Ele recria o visual da imagem em um formato que pode ser editado e adaptado para diferentes tamanhos de tela.
Quando usar
- ✓Quando você tem uma ideia visual para um site e quer transformá-la em algo editável.
- ✓Ao precisar de uma base para um novo projeto web a partir de um rascunho visual.
- ✓Se você viu um design que gostou e quer recriá-lo para editar.
Exemplo do que pedir para a IA
“Transforme esta captura de tela em um protótipo de site editável.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A inteligência artificial analisa a imagem, identifica os elementos como textos, botões e caixas, e recria tudo em código de site. Ela também adiciona a capacidade de se adaptar a telas menores, como as de celulares.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add nexu-io/open-design --skill import-screenshot-to-prototypeOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/spec/examples/import-screenshot-to-prototype/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Importar Captura de Tela para Protótipo
Fluxo de Trabalho
- Inspecione a captura de tela e identifique as regiões de layout, controles, escala de tipografia, papéis de cor e hierarquia de conteúdo.
- Peça a viewport de destino apenas se não puder ser inferida.
- Recrie a captura de tela como um artefato
index.htmllimpo com seções semânticas e tokens CSS reutilizáveis. - Preserve a intenção visual, mas substitua texto ilegível ou indisponível por conteúdo editável realista.
- Adicione comportamento responsivo para pelo menos uma largura de celular.
- Autoavalie a fidelidade visual, o encaixe do texto e a editabilidade antes de finalizar.
Contrato de Saída
Produza index.html e um import-notes.md curto que liste as decisões inferidas.
Perguntas frequentes
O que é um protótipo?
É uma versão inicial e editável de um site ou aplicativo, usada para testar o design e a funcionalidade antes de construir a versão final.
O que são 'componentes sensíveis'?
São partes do design (como botões ou menus) que a IA tenta recriar de forma inteligente para que possam ser facilmente editadas e funcionem bem.
O que é 'comportamento responsivo'?
É a capacidade do protótipo de se ajustar e parecer bom em diferentes tamanhos de tela, como computadores, tablets e celulares.
Detalhes
Descrição original do autor
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.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #654
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC