Abre tu proyecto en Figma tipo «Make»
- Haz click en el icono de código < >
- Para cada una de las carpetas, haz click con el boton derecho y –> Descargar
- Mueve todo el código a una carpeta, por ejemplo:
/Users/admin/Documents/antigravity_workspaces/landing_page/figma_draft
Genera un screenshot de cada parte de la pagina del diseño en figma.
para eso dale al botón PLAY que esta en la esquina superior derecha
y cuando te aparezca la página entera, ve haciendo capturas a medida que bajas. (yo he reducido el zoom al 50% para que me quepa más en cada screenshot)
Ahora, mueve todos los screenshots a la carpeta /Users/admin/Documents/antigravity_workspaces/keruve_landing_page/figma_landing_page_screenshots
y numera las imagenes por orden
- Abre Google antigravity
- abre el workspace en la carpeta:
/Users/admin/Documents/antigravity_workspaces/landing_page/
- entra en la carpeta:
/Users/admin/Documents/antigravity_workspaces/keruve_landing_page/figma_landing_page/src/app/components/ui
y deja solo estos componentes básicos (el resto no son críticos y mareará a Gemini).
Si en tu diseño hay algun elemento muy especial y critico, déjalo también en los componentes de la carpeta ui/
Ahora en Google Antigravity
abre el workspace /Users/admin/Documents/antigravity_workspaces/landing_page/
en Agent Manager, escribe este prompt:
Tengo este código principal de una landing page en React en la carpeta figma_landing_page/ (Utiliza varios componentes externos como iconos de lucide-react, un acordeón, etc.).
En la carpeta figma_landing_page_screenshots/ tienes screenshots de la landing page (en modo escritorio), para que veas el diseño. Son varios screenshots de la pagina haciendo scroll, desde el Hero que empieza por el numero "1", hasta el footer que termina por el numero "10". Si tienes dudas sobre a que seccion corresponde cada imagen, solo tienes que comprobar el texto.
Necesito que conviertas este código en un único archivo HTML5 index.html que use Tailwind CSS vía CDN.
Simplifica el código: sustituye los componentes importados por HTML estándar equivalente y recrea el diseño visual usando las clases de Tailwind que ya están en el código. No quiero dependencias de React, solo un index.html funcional.
En la carpeta ui tienes los componentes principales, si crees que necesitas algún componente crítico, dímelo y te lo añado a la carpeta.