# Non Stop Studio Web oscura azul tipo builder para generar landing pages/prototipos con IA vía endpoint seguro, preview HTML real, historial local y uso gratuito. ## Masterplan - Crear un “AI web arena” para usuarios hispanohablantes que quieren pedir una landing, SaaS, tienda, portfolio o dashboard desde un prompt y recibir una página HTML completa. - Dar sensación de potencia tipo Bolt: prompt → API IA → normalización local → preview oscuro/azul → auto-guardado en historial. - Mantener la promesa “gratis / sin checkout”: no hay pagos, tarjetas ni bloqueos dentro de la app; `/pricing` explica el plan 0€ y sus límites técnicos. - Funcionar sin cuenta: proyectos persistidos en `localStorage`, con demos iniciales para que Home y Library nunca arranquen vacíos. - Preservar seguridad: el frontend nunca contiene claves privadas; la IA se consume solo vía `POST /api/ai/completion`. ## Tech Stack & Architecture - **App:** SPA estática servida desde `index.html`, copy principal en español. - **UI:** React `19.2.0` por CDN ESM desde `esm.sh`, sin bundler y sin paso de compilación. - **Templates:** `src/jsx.js` exporta `html = htm.bind(React.createElement)`. Todos los componentes usan tagged templates `html\`\`` en vez de JSX. - **Routing:** `react-router-dom@7` con `HashRouter` en `src/App.js`; rutas `#/`, `#/studio`, `#/library`, `#/pricing` para funcionar en hosting estático sin config server. - **Estilos:** Tailwind CDN en `index.html` + tokens CSS y utilidades propias en `styles/main.css`. - **Iconos:** `lucide-react@0.468.0` por CDN ESM con `?deps=react@19.2.0`. - **Estado global:** Zustand `5.0.8` con middleware `persist` en `src/store/useStudioStore.js`. - **Persistencia:** `localStorage`, clave `non-stop-studio-storage`. - **Arquitectura de generación:** - `src/pages/Studio.js` recoge el prompt, llama a `/api/ai/completion`, maneja loading/error/success, crea el proyecto y lo guarda. - `src/lib/generator.js` transforma `prompt + aiText` en `Project`. - Si la IA devuelve HTML válido, `generatedHtml` se usa directamente. - Si la IA no devuelve un documento completo con `...`, `buildGeneratedHtml(project)` crea un fallback local publicable con estética Non Stop. - `src/components/ProjectPreview.js` muestra `project.generatedHtml` o el fallback en un `