Preparando tu workspace y el estado más reciente del proyecto.
Frame une la velocidad visual de un builder con la estructura que los desarrolladores esperan de un repositorio. Crea páginas responsive, define rutas y contenido, revisa el blueprint y exporta código que tu equipo pueda mantener.
Una interfaz enfocada para equipos que necesitan que el proyecto alrededor de la página tenga sentido.
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.
Diseña / publica / conserva
Diseña la página visualmente y conserva la estructura real del proyecto hasta llegar a código React editable.
Compón la interfaz directamente.
El control visual permanece conectado con la estructura subyacente.
Crea secciones responsive, recorre las capas y ajusta el layout sin convertir la página en un flujo de escribir prompts y esperar.
Diseña / publica / conserva
Diseña la página visualmente y conserva la estructura real del proyecto hasta llegar a código React editable.
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.
Configurar proyecto
Código / estructura del proyecto
Define el repositorio antes de exportar
Rutas
4 páginas
Texto e i18n
2 idiomas
Contenido
3 colecciones
Dependencias
11 paquetes
Estructura de archivos
Next.js / app
Destino de exportación
Next.js + Tailwind
Alias
@/*
Revisa la estructura que implica el trabajo visual: páginas, datos, límites de rutas, módulos y otras relaciones generadas.
Blueprint del proyecto
5 secciones
4 rutas
3 modelos
42 claves
18 módulos
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.
components/sections/hero.tsx
Código editable, no residuos generados.
export function Hero() {\n return (\n <section className=\"grid min-h-[72vh] ...\">\n <div>\n <p>{copy.eyebrow}</p>\n <h1>{copy.title}</h1>\n <Button href=\"/start\">Empezar</Button>\n </div>\n </section>\n );\n}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.
Compón secciones responsive, reutiliza bloques y mantén visible la estructura mientras la página cambia.
Rutas, archivos, dependencias, contenido y traducciones quedan expuestos antes de exportar, no se descubren después.
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.
export function Hero() {\n return (\n <section className="grid ...">\n <Headline />\n <ProductPreview />\n </section>\n );\n}El mismo estado del proyecto, antes y después de exportar.
Diseño, estructura, rutas, contenido, assets, exportación y checks viven en la misma superficie. No tienes que ir saltando entre pantallas sueltas para entender el estado real del proyecto.
Mapa vivo del proyecto
project.frame / synced
Edita piezas y páginas con overrides por viewport sin perder la jerarquía.
Ve navegación, estructura del sitio e i18n dentro del mismo flujo.
Genera un proyecto editable con React, Tailwind y estructura Next.js.
Recursos, imágenes, texto y bindings quedan enlazados al proyecto.
Historial, comentarios y edición en tiempo real según el plan.
Export, accesibilidad y seguridad revisados antes de lanzar.
Un único panel, cuatro planes y los límites que realmente cambian cómo trabajas. Compara colaboración, capacidad y controles de entrega en una sola vista.
Panel de planes
04 planes / una superficie de comparación
01 / Límites y capacidades
Comparar en una sola vista
Un único panel, cuatro planes y los límites que realmente cambian cómo trabajas. Compara colaboración, capacidad y controles de entrega en una sola vista.
Free
Para probar el editor y publicar trabajo personal pequeño.
Abrir dashboardStarter
Para trabajo individual y colaboraciones ligeras.
Abrir dashboardPro
Para equipos que iteran, revisan y exportan con frecuencia.
Abrir dashboardTeam
Para workspaces grandes que necesitan más controles.
Abrir dashboard02 / Límites y capacidades
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.