Documentación

¿Cómo funciona Forge?

Forge genera código completo a partir de una descripción en lenguaje natural. Describe lo que quieres construir, elige el stack tecnológico y Forge genera el proyecto entero en segundos. Puedes editarlo en el editor en vivo, iterar con más prompts y descargar el código como ZIP.

Tu primer proyecto

Entra en /generate, escribe una descripción de tu proyecto (mínimo 10 caracteres), selecciona el tipo (web, landing page, e-commerce, React app...) y pulsa Generar. En 10-30 segundos tendrás tu primer resultado.

Sé específico

Cuanto más detalle incluyas, mejor será el resultado. En vez de "una web de restaurante", prueba con "una web para un restaurante italiano de lujo en Madrid, con sección de menú, galería de fotos, reservas online y página de contacto. Colores cálidos, tipografía elegante."

Ejemplos de prompts que funcionan bien

• ·"Landing page para una app de meditación. Hero con CTA, sección de beneficios, testimonios, pricing con 3 planes y footer. Diseño minimalista, colores azul y blanco."
• ·"Dashboard SaaS para gestionar clientes. Sidebar con navegación, tabla de clientes con filtros, gráfico de ventas mensual, tarjetas de métricas (ingresos, usuarios activos, conversión). Stack: React + Tailwind."
• ·"Tienda online de ropa deportiva. Catálogo con filtros por categoría y talla, página de producto con galería, carrito lateral, checkout de 2 pasos."
• ·"Portfolio para fotógrafo de bodas. Galería masonry de fotos, sección about, paquetes con precios, formulario de contacto. Diseño oscuro y elegante."

Prompts que no funcionan bien

• ·Demasiado cortos: "una web bonita" o "haz algo chulo" — sin contexto, el resultado será genérico.
• ·Contradictorios: "diseño minimalista con muchos elementos y colores vibrantes" — Forge elegirá uno u otro.
• ·Solo emojis o caracteres: no generan código útil.

Plan gratuito (trial) y Standard

• ·HTML5 + CSS3 — Webs estáticas, landings, portfolios. Sin dependencias, se abre directamente en el navegador.
• ·Web general — HTML con JavaScript vanilla y estilos modernos.
• ·Landing page — Optimizado para páginas de conversión.
• ·E-commerce — Tienda online con carrito y catálogo.
• ·Blog — Estructura de blog con artículos y categorías.
• ·Portfolio — Portfolio personal o profesional.
• ·Dashboard — Panel de administración o métricas.
• ·React App — Aplicación React con componentes y estado.

Plan Pro (stacks avanzados)

• ·Next.js — App con SSR, rutas y estructura lista para Vercel.
• ·Vite + React — SPA moderna con Vite, React y Tailwind.
• ·Vue.js — App Vue 3 con Composition API.
• ·Svelte — App Svelte compilada y ultra rápida.
• ·TypeScript — Proyecto TS tipado con interfaces y tipos.
• ·Node.js API — API REST con Express, rutas y middlewares.

¿Qué son los créditos?

Los créditos son la moneda interna de Forge. Cada acción consume una cantidad fija según su complejidad. Los créditos mensuales se renuevan el 1 de cada mes. Los créditos extra comprados no caducan nunca.

Coste por acción

• ·Web, blog, portfolio, e-commerce: 3 créditos
• ·Landing page: 4 créditos
• ·React app, dashboard, stacks PRO: 5 créditos
• ·Edición simple: 1 crédito
• ·Edición media: 2 créditos
• ·Edición compleja: 3 créditos

Créditos por plan

• ·Trial (15 días): 240 créditos — equivalente al plan Standard.
• ·Standard (20€/mes): 240 créditos/mes.
• ·Pro (53€/mes): 540 créditos/mes.

Proyectos HTML (sin framework)

Descomprime el ZIP y abre index.html en tu navegador. Puedes subirlo directamente a cualquier hosting estático: Netlify, Vercel, GitHub Pages, Cloudflare Pages.

Proyectos con framework (React, Next.js, Vue...)

• ·Descomprime el ZIP en una carpeta.
• ·Abre una terminal en esa carpeta.
• ·Ejecuta: npm install
• ·Ejecuta: npm run dev
• ·Abre http://localhost:3000 (o el puerto que indique la terminal).
• ·Para producción: npm run build → sube la carpeta dist/ o .next/ a tu hosting.

Hosting recomendado

• ·Vercel — Ideal para Next.js. Conecta tu repositorio y despliega en 1 clic.
• ·Netlify — Ideal para sitios estáticos y Vite. Arrastra la carpeta dist/ y listo.
• ·Railway / Render — Ideal para Node.js APIs.

Editor en vivo

Puedes editar el código directamente en el editor integrado. Los cambios se reflejan en el preview en tiempo real. El editor soporta HTML, CSS, JavaScript y TypeScript con resaltado de sintaxis.

Edición con lenguaje natural

Usa el chat para pedir cambios en lenguaje natural. Por ejemplo: "cambia el color del header a azul marino", "añade un formulario de contacto al final", "hazlo responsive para móvil". Forge modifica solo la parte relevante sin reescribir el proyecto entero.

Versiones

Cada generación y edición guarda una versión. Puedes volver a cualquier versión anterior desde el panel de versiones (icono de reloj en el editor).