Cargando
Preparando tu workspace y el estado más reciente del proyecto.
Diseña páginas que se adaptan a cada pantalla, organiza sus rutas y contenido, y revisa la estructura del proyecto antes de exportar. Frame convierte tu trabajo visual en código que tu equipo puede editar y mantener.
Lienzo, configuración, blueprint y código no son cuatro capturas inconexas. Son cuatro vistas del mismo estado del proyecto. Recorre las etapas y el espacio de trabajo cambiará ante ti.
Crea secciones responsive, recorre las capas y ajusta el layout sin convertir la página en un flujo de escribir prompts y esperar.
Las rutas, el contenido, las traducciones, las dependencias y las reglas de exportación conviven con el diseño en lugar de convertirse en trabajo de limpieza posterior.
Revisa la estructura que implica el trabajo visual: páginas, datos, límites de rutas, módulos y otras relaciones generadas.
Exporta una estructura React, Tailwind y Next.js a una base de código que tu equipo pueda editar, revisar y seguir desarrollando con su flujo habitual.
El momento útil llega antes de que el diseño esté «terminado» y antes de que ingeniería reciba una entrega estática. Frame mantiene conectadas esas decisiones mientras el producto evoluciona.
Producto y diseño
Compón secciones responsive, reutiliza bloques y mantén visible la estructura mientras la página cambia.
Frontend
Rutas, archivos, dependencias, contenido y traducciones quedan expuestos antes de exportar, no se descubren después.
Equipos SaaS pequeños
Resulta útil cuando un equipo pequeño alterna entre producto, interfaz y frontend sin entregas entre departamentos.
Frame trata la exportación como parte del proceso de diseño. Los archivos, las rutas, las traducciones y las dependencias siguen visibles de antemano, para que el repositorio final continúe el trabajo en lugar de exigir limpiar lo generado.
El sistema de trabajo
Frame no es un lienzo con un botón de generar código. El documento visual, las reglas responsive, el sistema reutilizable, el contenido, la colaboración y el estado de entrega son vistas distintas del mismo proyecto.
01 / 04
La manipulación directa se mantiene cerca del trabajo: capas, marcos, multiselección, guías, ajuste, cuadrículas, edición en línea, atajos y controles precisos en el Inspector.
Trabaja la misma página en distintos viewports con ajustes por breakpoint, dimensionado relativo y flujo de layout sin romper una jerarquía única.
Un lienzo que se comporta como un editor serio
Responsive forma parte del objeto, no de otro archivo de diseño
02 / 04
Convierte decisiones repetidas de interfaz en componentes y estilos compartidos en lugar de duplicar píxeles. Tokens, variantes y reglas visuales del proyecto siguen disponibles mientras editas.
Páginas, navegación, bindings CMS, recursos, redirecciones, metadatos y traducciones siguen siendo parte del proyecto. En Starter o superior, la traducción con IA usa únicamente la propia clave OpenAI del workspace (BYOK), sin clave alternativa financiada por Frame, y requiere revisión antes de publicar.
Componentes, tokens y temas siguen siendo reutilizables
Contenido, rutas y localización siguen visibles
03 / 04
En Starter o superior, invita colaboradores, edita con presencia en vivo, deja comentarios por bloques y lleva revisiones mediante branches en vez de intercambiar capturas.
Los permisos del workspace y las comprobaciones previas a publicar siguen dentro del flujo. El registro de actividad y los puntos de restauración requieren Pro o superior; Team añade controles de gobierno de equipo.
La colaboración ocurre sobre el propio proyecto
Seguridad y gobierno del proyecto siguen dentro del flujo
04 / 04
Blueprint, Handoff orientado a código y comprobaciones de preparación enseñan lo que implica el trabajo visual. Desarrollo puede revisar estructura y restricciones antes de que el proyecto llegue a Git.
Genera salida editable en React, Tailwind y Next.js, previsualiza el resultado y dirige la publicación a proveedores compatibles manteniendo el proyecto exportado fuera de Frame.
Las decisiones de diseño se pueden inspeccionar antes de exportar
Exportar y publicar son rutas de entrega, no lock-in
Todos los planes incluyen el editor visual y la exportación de código React/Tailwind. Elige según los límites de uso y las funciones de colaboración, recuperación y gestión de equipo que necesitas.
01 / plan
€0
Construye, aprende el flujo y publica sitios pequeños sin convertir el editor en una demo.
3
proyectos
1
personas
20
exportaciones / mes
250 MB
almacenamiento
Funciones incluidas
02 / plan
€19
al mes
Más espacio para trabajo individual, clientes y exportaciones frecuentes.
15
proyectos
2
personas
250
exportaciones / mes
2 GB
almacenamiento
Funciones incluidas
03 / plan
€49
al mes
El nivel de trabajo completo para equipos que revisan, colaboran y publican continuamente.
Ilimitado
proyectos
8
personas
Ilimitado
exportaciones / mes
10 GB
almacenamiento
Funciones incluidas
04 / plan
A medida
Controles de equipo para agencias y equipos de producto, sin límites fijos de uso.
Ilimitado
proyectos
Ilimitado
personas
Ilimitado
exportaciones / mes
Ilimitado
almacenamiento
Funciones incluidas
Condiciones comunes
La traducción con IA no está disponible en Free. En los planes de pago, conecta tu propia clave de API de OpenAI (BYOK) al espacio de trabajo. Frame no incluye créditos de IA ni una clave alternativa.
Starter y Pro están disponibles en todo el mundo para particulares y profesionales. Al pagar, indica si compras como particular o como empresa o profesional.
Frame es deliberadamente más específico que una plataforma todo en uno. Su valor está en resolver bien la entrega entre el trabajo visual y el trabajo frontend.
Ninguna de las dos en el sentido tradicional. Frame es un builder visual de frontend: compones la interfaz en un lienzo mientras las rutas, el contenido, las traducciones, las dependencias y la estructura de exportación siguen formando parte del proyecto.
Un proyecto frontend editable basado en las convenciones de React, Tailwind y Next.js. La exportación está pensada para convertirse en trabajo normal de repositorio, no en un resultado limitado al hosting ni en una captura para entregar.
No. El flujo se basa en que conserves la propiedad del código. Frame ayuda a dar forma al proyecto y entregarlo; tu equipo puede seguir modificando el frontend exportado con sus herramientas habituales.
Para diseñadores de producto que entienden las restricciones del frontend, desarrolladores frontend que aprovechan la composición visual y equipos SaaS pequeños donde producto, interfaz e implementación se solapan.
No. Frame es la capa entre la composición visual y la implementación. La exploración detallada puede seguir en herramientas de diseño, y el criterio de ingeniería sigue perteneciendo al IDE y al repositorio.
Sí. Blueprint y Configure muestran lo que implica el lienzo antes de que exista un ZIP: puedes revisar páginas, límites de rutas, modelos de contenido, i18n, archivos y otras decisiones mientras la interfaz sigue evolucionando.
No hay un generador de código que sustituya la revisión del despliegue. Frame valida restricciones conocidas del proyecto y la exportación, pero el equipo debe ejecutar tests, typecheck, revisión de dependencias y seguridad, comprobaciones de accesibilidad y la configuración específica del entorno antes de publicar.