Screenshot to Code: herramienta de AI para convertir capturas de pantalla en código front-end limpio.

Introducción general

Screenshot-to-Code es una herramienta de código abierto que utiliza inteligencia artificial para convertir capturas de pantalla, borradores de diseño y diseños Figma en código limpio y funcional. La herramienta es compatible con varias tecnologías front-end, como HTML, Tailwind CSS, React y Vue. Claude Modelos avanzados de IA como Sonnet 3.5 para generar código y soporte para convertir grabaciones de vídeo o pantalla en prototipos funcionales.

Lista de funciones

• Captura de pantalla a códigoConvierte capturas de pantalla y diseños en código HTML, CSS de Tailwind, React o Vue.
• Del vídeo al prototipoConvertir un vídeo o una grabación de pantalla en un prototipo funcional. (funcionalidad experimental)
• Compatible con múltiples pilas tecnológicasSoporte para HTML, Tailwind CSS, React, Vue, Bootstrap y Ionic.
• Apoyo al modelo de IAGeneración de códigos mediante GPT-4 Vision y Claude Sonnet 3.5.
• Prueba en líneaLa versión de prueba en línea está disponible para que los usuarios puedan experimentar la funcionalidad de la herramienta en tiempo real.

Utilizar la ayuda

Proceso de instalación

1. almacén de clonesEjecutar en un terminal git clone https://github.com/abi/screenshot-to-code.git Almacén de clonación.
2. Instalación de dependencias: Después de entrar en el directorio del proyecto, ejecute cd backend && poetry install Instale las dependencias del backend, ejecute cd frontend && yarn Instale las dependencias del front-end.
3. Configuración de claves API: Crear el .env añada la clave de la API de OpenAI y Antrópico Clave API.

   OPENAI_API_KEY=sk-your-key
   ANTHROPIC_API_KEY=your-key
   

4. priming backend: Ejecutar poetry run uvicorn main:app --reload --port 7001 Inicie el servicio back-end.
5. Front End de lanzamiento: Ejecutar yarn dev Inicie el servicio front-end y abra un navegador para acceder a http://localhost:5173.

Proceso de utilización

1. Cargar captura de pantallaSube capturas de pantalla o diseños para convertirlos en la interfaz front-end.
2. Selección de una pila tecnológicaSeleccione la pila tecnológica (por ejemplo, HTML, Tailwind CSS, React o Vue) a partir de la cual se debe generar el código.
3. Generar códigoHaga clic en el botón Generar y la herramienta utilizará el modelo de IA para generar el código front-end correspondiente.
4. Visualización y edición de códigoEl código generado se mostrará en la interfaz y el usuario podrá verlo y editarlo.
5. Descargar códigoUna vez satisfecho, el usuario puede descargar el archivo de código generado.

Función Flujo de operaciones

1. Captura de pantalla a código::
   • Sube una captura de pantalla o un diseño.
   • Seleccione la pila tecnológica para la que necesita generar código.
   • Haga clic en el botón Generar y espere a que el modelo de IA genere el código.
   • Vea, edite y descargue el código generado.
2. Del vídeo al prototipo::
   • Sube un archivo de vídeo o de grabación de pantalla.
   • La herramienta analizará automáticamente el contenido del vídeo y generará un prototipo funcional.
   • Visualice, edite y descargue el código del prototipo generado.
3. Compatible con múltiples pilas tecnológicas::
   • Después de subir una captura de pantalla o un vídeo, selecciona la pila tecnológica deseada.
   • La herramienta es compatible con múltiples pilas tecnológicas como HTML, Tailwind CSS, React, Vue, Bootstrap e Ionic.
4. Apoyo al modelo de IA::
   • La herramienta genera código utilizando modelos avanzados de IA como GPT-4 Vision y Claude Sonnet 3.5.
   • El usuario puede seleccionar el modelo de IA que se utilizará en los ajustes.