Forma: construyendo un canvas de diseño editable
Un prototipo local de herramienta de diseño que explora qué pasa después de que la IA genera un componente: revelar su estructura, inspeccionarlo en 3D y seguir editando.
Creé Forma para explorar una pregunta: ¿qué debería pasar después de que una IA te entrega un diseño? Quería un componente que pudiera desarmar, entender y modificar en el mismo espacio de trabajo.
Forma es un prototipo local funcional. El canvas, la inspección de capas, los controles de apariencia y la edición de píxeles a gradientes son reales. La generación de IA en vivo no estaba conectada para esta demostración.
Mira el concepto
La secuencia empieza con un componente “Deep focus” preparado y su animación de carga y revelado. Abro sus capas en 3D, giro la pila, cambio el relleno y el radio de las esquinas; luego tomo una muestra de una imagen, ajusto el color y la luminancia, muevo un punto del gradiente y cambio su tipo.
Construir mediante la conversación
Dirigí el trabajo en Codex desktop, refinando el producto en ciclos cortos de implementación, interacción en el navegador y feedback visual. Los pedidos se hicieron más específicos al poder usar el canvas: una interfaz gris carbón más discreta, barras laterales plegables, navegación más clara, tipografía más cohesionada y mejor alineación.
Figma y Paper fueron referencias para la experiencia de edición. Quería la relación familiar entre un árbol de capas, un canvas y un inspector, con espacio para explorar cómo un componente revela su estructura.
El revelado se convirtió en una forma de pasar de la geometría subyacente al contenido terminado. La vista 3D amplió esa idea: una pila compacta para orientarse y una vista expandida en “sándwich” para inspeccionar cada capa. Un refinamiento fue invertir el orden de profundidad para que el fondo sólido de la raíz quedara detrás del contenido en vez de ocultarlo.
El componente preparado se convierte en contenido editable del canvas. La generación que se muestra aquí es simulada.
La separación de capas revela la anatomía del componente; arrastrar gira la vista.
El muestreo de píxeles evolucionó hacia otro workflow de edición. En vez de detenerme en una paleta extraída, quería ajustar los colores y la luminancia muestreados, reposicionar puntos y probar distintos tipos de gradiente.
El muestreo de imágenes alimenta un gradiente editable, con controles de color, luminancia y posición de los puntos.
Herramientas y validación
La app usa React 19 y TypeScript con Vite, Tailwind CSS, controles shadcn/Radix e íconos Lucide. Motion gestiona las animaciones; las transformaciones CSS 3D permiten inspeccionar las capas. El muestreo local de imágenes alimenta el editor de gradientes y Zod valida los datos estructurados.
Usé Codex desktop para desarrollar, automatización del navegador para clics, arrastres, capturas de pantalla y verificaciones visuales, y Bun para scripts y tests. El modelo de desarrollo registrado fue gpt-6-astra. La app tiene un adaptador separado para el proveedor OpenAI, pero no estaba conectado durante la grabación.
Para el video, se capturaron pantallas del navegador a unos 9–10 cuadros por segundo y se ensamblaron con Bun y FFmpeg en un archivo H.264 de 1080p con salida a 60fps. No es una captura de pantalla nativa a 60fps; se cortaron las pausas entre escenas.
En la revisión del artículo del 8 de septiembre, pasaron los 76 tests del proyecto de origen, incluidos los de geometría de capas, edición de gradientes, transacciones de documentos y manejo de errores del proveedor. El video del concepto demuestra interacciones seleccionadas, no preparación para producción. No demuestra el comportamiento del proveedor en vivo, sincronización de código en vivo ni un puente MCP.
Tokens y costo
El registro acumulado de la tarea de origen a las 07:32 UTC del 8 de septiembre de 2026 suma 80.448.253 tokens. Es una instantánea acumulada de esa tarea, no un total final o verificado del desarrollo con todos los agentes. El trabajo continuó después; este artículo del portafolio queda fuera de ese alcance.
| Uso registrado | Tokens |
|---|---|
| Entrada, incluida la entrada en caché | 80.197.013 |
| De esa entrada, en caché | 78.707.968 |
| Entrada sin caché | 1.489.045 |
| Salida, incluido el razonamiento | 251.240 |
| Total de entrada + salida | 80.448.253 |
Alrededor del 98,1% de la entrada estaba en caché. Estos contadores incluyen procesamiento repetido del contexto y lecturas de caché, así que no representan esa cantidad de material escrito único. La entrada en caché ya está incluida en la entrada; el razonamiento ya está incluido en la salida. No volví a sumar ninguno de esos subconjuntos. No se ha verificado si se incluyen los agentes secundarios, así que no hay un total completo de tokens del proyecto.
Cuánto costarían esos tokens
US$ 106,16 con las tarifas estándar de la API de GPT-6 Astra. Es una estimación equivalente de API solo para los tokens del registro, no mi factura real de Codex. Los precios oficiales de GPT-6 Astra, consultados el 8 de septiembre de 2026, indican US$ 10 por millón de tokens de entrada sin caché, US$ 1 por millón de tokens de entrada en caché y US$ 50 por millón de tokens de salida.
| Categoría | USD por 1M | Estimación en USD |
|---|---|---|
| Entrada en caché | US$ 1 | US$ 78,71 |
| Entrada sin caché | US$ 10 | US$ 14,89 |
| Salida | US$ 50 | US$ 12,56 |
| Total | — | US$ 106,16 |
La caché cambia los costos: representa el 97,84% de todos los tokens, pero cerca del 74,14% de este costo estimado. Resto la entrada en caché de la entrada total antes de aplicar la tarifa sin caché. El registro indica cero tokens de escritura en caché.
Este cálculo supone procesamiento estándar y ninguna solicitud de más de 272.000 tokens de entrada. Según las reglas publicadas de la API, las solicitudes más largas duplican las tarifas de entrada/caché y multiplican por 1,5 las de salida; el modo Fast duplica las tarifas aplicables. Solo con el modo Fast, el mismo registro costaría US$ 212,32. El registro acumulado no establece la combinación de cada solicitud, así que ninguna cifra reconstruye la facturación real. Estas estimaciones excluyen los cargos de herramientas y el uso fuera del registro.
Costo real del desarrollo: no disponible / no medido por separado. No hay un importe de facturación verificado por proyecto. El concepto no usó ninguna llamada de API de generación en vivo, pero eso no hace que el desarrollo sea gratuito. El uso de la suscripción a Codex no puede tratarse como una factura de API.
Lo que aprendí
Las iteraciones más útiles surgieron al intentar editar el resultado. Un revelado puede explicar la estructura y una pila 3D puede volverla tangible, pero ambos deben conducir a controles que funcionen. Forma me dio un espacio local para explorar esa transición. Conectar y validar el proveedor en vivo sigue siendo un siguiente paso aparte.