YouMind
Iniciar sesión

La marca HTML: El auge de los resultados basados en inputs

@emmettshine
INGLÉS13 may 2026
437K
201
15
17
401

TL;DR

Las agencias creativas están pasando de entregables estáticos a 'kits atómicos': sistemas de marca legibles por máquina en HTML y JSON que permiten a los agentes de IA ejecutar diseños mientras los humanos se enfocan en el pensamiento original de alto nivel.

Cómo el trabajo creativo está pasando de resultados tradicionales a sistemas tradicionales a resultados impulsados por sistemas atómicos.

La semana pasada enviamos a un fundador un archivo zip con dos carpetas: /human, /agent y un readme.md. Después de un mes de trabajo, dentro de la carpeta del agente, toda su marca estaba codificada como instrucciones mediante archivos YAML, JSON, Markdown, HTML, CSS y SVG. Al recibirlo, metieron el paquete en Cursor, escribieron un prompt y ese mismo día tenían una página de aterrizaje casi completa.

En las últimas semanas, el simple archivo zip se ha convertido en el entregable que nos piden producir. No un sitio web, un producto de software o una biblia de campaña de salida al mercado. Dicho de otro modo, nuestro input es donde reside nuestro valor y lo que ayuda a impulsar el resultado, no nuestros impulsar el resultado, no nuestros outputs.

Esto es bastante nuevo para nosotros y en parte está impulsado por lo que es posible gracias a Claude Design. La capa de UI accesible y los archivos organizados que produce Design han sido un gran avance en @littleplainsxo.

Queríamos contar lo que hemos estado experimentando estas últimas semanas con algunos de los fundadores en fase más temprana con los que hemos estado trabajando en esto.

También hablaremos de dónde vemos que la creatividad humana y el pensamiento original (el "truco de magia") son más valiosos, y por qué esto es cada vez más lo que queremos que nos paguen.

Emmett - inline image

El valor del proyecto se desplaza aguas arriba

Estamos en las primeras fases viendo de primera mano que el trabajo creativo en sí está cambiando, y con él el valor, el plazo y el modelo de precios.

Hace unos días, @alexleiphart y yo estábamos en la oficina intentando explicar este cambio en nuestra forma de trabajar a unos amigos del sector que nos visitaban. Para ilustrar lo que estábamos abordando, dibujamos un diagrama en una pizarra: el valor de un proyecto en el eje vertical y el tiempo del proyecto en la horizontal.

Emmett - inline image

Un dibujo tosco en una pizarra que muestra cómo el valor se está volviendo más inicial / basado en el input.

En los servicios tradicionales, el valor crece lenta y constantemente a medida que se acumulan los entregables se acumulan los entregables. Pagas por el tiempo, recibes los resultados y el valor se acumula durante todo el proyecto. En los últimos meses, lo que estamos viendo se parece más a un embudo puesto de lado.

Para los proyectos en fase temprana, descubrimos que la mayor concentración de valor está al principio: el empuje de 0 a 1: investigación profunda, síntesis experta y las decisiones audaces sobre cómo posicionar una empresa como marca. Para quién es. Qué dice. Cómo suena. Dónde vive en el mercado. Esas decisiones son lo que separa un sistema que se sostiene de uno que no. El embudo se estrecha bruscamente a partir de aquí, porque una vez que el pensamiento está hecho, los resultados se ejecutan sobre la lógica de ese pensamiento.

Nota: observen 'magic-trick.md' al final del diagrama. Volveremos a eso.

El modelo de agencia está cambiando

Durante la mayor parte de la historia del trabajo en el trabajo de agencia, la entrega era estática. Un archivo de diseño, un PDF, una presentación que el cliente consultaba, interpretaba... y de la que gradualmente se desviaba a medida que se creaban nuevos trabajos, se escribían nuevos textos y se contrataban nuevos proveedores y compañeros de equipo.

En las últimas décadas de trabajo creativo digital, cualquiera que haya visto un Brand_Guidelines_FINAL_v3-FINAL-FINAL.pdf conoce el patrón. La marca existía en el mundo después de la entrega en la forma que el equipo del equipo del cliente pudiera mantenerla.

Sin embargo, lo que nosotros y otros en la primera línea del trabajo creativo con agentes hemos estado enviando recientemente es diferente en forma y en intención.

La forma de cada kit que enviamos ahora.

La carpeta /human contiene las directrices de marca en formato tradicional (PDFs, documentos enlazados de Figma, etc.), que siguen siendo valiosas y fundamentales para la gran mayoría de los equipos.

La carpeta /agent es la pieza más interesante.

Basándose en el trabajo de la carpeta /human, los archivos YAML, JSON, Markdown, HTML, CSS y SVG están estructurados para que cualquier herramienta de herramientas de agente pueda leerlos y construir a partir de ellos. La marca ahora está codificada como instrucciones, no como documentación, y se basa en nuestras decisiones aguas arriba. Un agente que abre esa carpeta obtiene un sistema holístico sobre el que puede actuar, con un punto de un POV integrado.

El avance de los últimos meses es que el kit es coherente de principio a fin, no solo recuperable individualmente.

Introduzcan este 'sistema atómico' en Claude Design, Code, Cursor (o muchas, muchas otras herramientas) y el ADN de la marca puede expandirse para escribir, diseñar, animar y enviar una página de aterrizaje, una superficie de UI o una campaña de GTM con un alto nivel de calidad, contexto, EQ y especificidad técnica, porque el pensamiento fundacional está incrustado en la estructura de los archivos.

Es la misma marca en dos formatos: uno que los humanos para entender el sistema, y los agentes para extenderlo. El avance del último mes es que ese paquete de información para agentes ahora tiene una dirección unificadora de más alto nivel más clara, y tiene los detalles técnicos de bajo nivel para construir hacia ella.

En Ejemplo:

Recientemente ayudamos a construir el kit atómico para Type (¡vean el sitio real que acaba de lanzarse!), una herramienta de espacio de trabajo de IA colaborativa (gracias @fletchman).

Pusimos el paquete final en Cursor y escribimos un solo prompt: "genmé una página de aterrizaje HTML basada en el sistema de diseño atómico y la estrategia". El modelo recorrió átomos, moléculas y organismos y organismos y produjo una página de aterrizaje completa con fuentes correctas, estados hover funcionales, módulos específicos, movimiento que coincidía con las especificaciones y elementos CSS de las directrices de marca incrustadas. También siguió el posicionamiento de la marca, la estrategia, el tono de voz y las directrices de copy de producción. Fue muy bueno, y contó con la ayuda de un equipo fundador increíble + un poco de magia (ver siguiente sección).

La carpeta de movimiento contiene un archivo JSON que especifica curvas de easing y velocidades de transición específicas de Type. Al pedirle que lo visualizara, Claude Design produjo un componente interactivo que se puede recorrer y sentir el sistema de movimiento en lugar de solo leer sobre él.

Para equipos fundadores liderados por diseño o ingeniería (como Type), el bucle es aún más ajustado. Ellos metieron el kit en su editor, cambiaron uno o dos valores, guardaron y estamos construyendo al instante. Cambien un color primario: actualicen una variable CSS. Cambien una curva de movimiento: editen el JSON. Vuelvan a subirlo a Claude Design y toda la directriz se regenera contra los nuevos valores. El kit es editable en código, en tiempo real, por las personas más cercanas al trabajo.

El mismo kit abierto en Cursor con Opus 4.7. Un prompt: constrúyeme una página de aterrizaje HTML a partir del kit atómico.

Emmett - inline image
Emmett - inline image
Emmett - inline image

magic_trick.md

He aquí por qué un prompt único no suele ofrecer lo que necesitas para lanzar.

Todo lo que el kit de agente produce normalmente es una recombinación de lo que se pone: el posicionamiento, el tono, los componentes, el movimiento. Para eso está construido el kit. El resultado será consistente, con marca, listo para enviar. También gravitará hacia la mediana de lo que los inputs permitieron. La corrección y la originalidad no son lo mismo.

La mayoría de la gente olvida el pequeño repunte al final del diagrama de la pizarra; el truco de magia.

Cuando la capa de ejecución es mayoritariamente agentica, hay un momento cerca del final de un proyecto en el que las cosas empiezan a converger hacia el medio, justo cuando se necesita que hagan lo contrario. El "one-shotting" casi nunca produce avances mágicos (a veces echo de menos la creatividad de las alucinaciones de IA).

Para un estudio de precios premium que trabaja con fundadores que apuestan fuerte, "la mediana" es exactamente lo que la gente nos paga para evitar.

Aquí es donde un humano tiene que volver a entrar con una idea. Un pensamiento creativo real, que quema glucosa, excéntrico, extraño, sudoroso y original que no podría haberse predicho a partir de los inputs.

El tipo de movimiento que inclina el resultado: un concepto de película de lanzamiento basado en un atracón de cine negro del invierno pasado, un momento sublime de producto pensado mientras se pasea, una idea de campaña que guiña a una subcultura basada en una noche muy tarde, un espectacular radical sobre el pliegue inspirado en una pequeña galería de arte en la que se tropezó durante una tormenta en un país extranjero, un texto de valla publicitaria que impacta más de lo que el sistema habría producido por sí solo.

A esto lo hemos estado llamando magic_trick.md internamente, y es solo media broma.

Emmett - inline image

El valor del vocabulario

Recientemente, le preguntaron a Diplo sobre la IA. En su respuesta, habló de cómo los mejores DJ del mundo suelen ser mayores que él por su vocabulario; su vocabulario, su conocimiento acumulado de la música.

Para él, su excelente vocabulario provino de años de despertarse a las cinco de la mañana para rebuscar en cajas de discos en mercadillos, ir casa por casa buscando vinilos oscuros, leer cada pista, conocer a cada bajista de cada disco.

Lo que hace grande a un DJ son esos años de conocimiento acumulado y experiencia acumulada. Ambos le permiten saber qué disco poner, en qué sala, qué noche. "Eso es lo que nos hace buenos. Mi don es que vengo de desenterrar discos viejos."

Emmett - inline image

Un sistema agentico bien producido es el equivalente a una enorme biblioteca de discos perfectamente referenciada. Increíble en sí misma, e inútil sin entender la energía de una multitud, las feromonas de una sala, y la experiencia para hacer lo que nadie esperaba y todos recordaron.

Si el kit atómico es la biblioteca, magic_trick.md es el set que un gran DJ arma para una sala específica en una noche específica. La idea de ayer no es la idea de hoy. La combinación ganadora para cada resultado de marca importante es un kit agentico bien producido y un truco de magia de una idea.

Asegúrense de dejar espacio para ese pensamiento original aguas abajo, o arriesgan a enviar algo correcto que nadie recuerda.

Si solo tienen la idea audazada y ningún sistema que la sustente, enviarán algo memorable que no sobrevivirá más allá del anuncio de lanzamiento.

Pensamiento de sistema y pensamiento original. Una mano lava la otra.

HTML & .MD: De Markdown a marcado

Algo que vale la pena debatir (como hizo Nathaniel Whittemore hace dos días en su excelente podcast, AI Daily Brief) es que creemos que HTML es cada vez más el formato adecuado para este tipo de trabajo.

Un componente expresado en HTML estructurado es analizable por cualquier agente moderno. Un SVG tiene su lógica integrada en la geometría. Un archivo CSS codifica el lenguaje visual a nivel estructural. Estos archivos son instrucciones sobre las que un agente puede actuar directamente. Una exportación de ráster plana — PNG, JPEG, PDF — puede verse, pero no construir a partir de ella.

Cuando estructuramos un sistema como HTML, CSS y SVG, estamos construyendo para cómo los agentes leen y construyen, no solo para cómo los humanos ven. Esa distinción da forma a casi todas las decisiones de resultados que tomamos.

(Para una gran lectura técnica sobre esto, vean Using Claude Code: The Unreasonable Effectiveness of HTML por @thariq.)

Emmett - inline image
Emmett - inline image

Lo que Claude Design Cambió Para Nosotros

Nuestro concepto de kit atómico es anterior a Claude Design. Hemos estado empujando en esta dirección desde principios de este año, y nuestro ensayo Building Brands for Humans and Agents expuso el caso para refactorizar el trabajo de marca en formatos legibles por agentes.

Lo que se siente significativamente diferente ahora es que producir uno de estos kits bien, a la velocidad que exige un sprint, es genuinamente factible, y más impactante.

Claude Design nos ha permitido pensar un sistema más visual, verbal, estratégica y estructuralmente. Podemos trabajar dentro de la misma herramienta, produciendo artefactos en los formatos correctos, sin el paso de conversión manual que solía comerse la mitad trasera de cada proyecto. El trabajo que requería un proyecto de 12 semanas en 2025 ahora puede (a veces) caber en un sprint de 4 semanas sin comprimir el valor. Cuando se hace bien, el valor ha aumentado.

El kit con el que se marcha un cliente es generativo, estructurado, preparado para el futuro y vivo. Los antiguos entregables eran estáticos, requerían mantenimiento manual y eran extremadamente limitados en su capacidad de implementación inmediata.

Emmett - inline image
Emmett - inline image

Lo Que Vendemos: Mundos Atómicos

Cuando un kit atómico es el entregable, el kit no es un activo terminado. Es un sistema que produce activos terminados.

Eso cambia lo que realmente se vende. Lo que se vende es el pensamiento codificado que hace que cada artefacto artefacto, página y producto futuro se sientan como la misma marca.

El kit es una obra original derivada de un pensamiento original. Cada resultado posterior que un cliente genere a partir de él hereda esa originalidad.

Jack Dorsey y Roelof Botha publicaron recientemente "From Hierarchy to Intelligence", argumentando que la próxima generación de empresas se organizará en torno a lo que llaman un "modelo del mundo": una comprensión continuamente actualizada y legible por máquina del negocio en sí misma, lo suficientemente rica como para que la IA pueda actuar directamente sobre ella. Su apuesta es que la comprensión es el foso, y que la profundidad de esa comprensión se acumula a medida que el sistema funciona.

Lo mismo se aplica al trabajo creativo que hacemos.

Un kit atómico es un modelo de marca. Una comprensión estructurada y legible por máquina de qué es la marca, para quién es, cómo suena y cómo se ve. La profundidad de esa comprensión es lo que la hace valiosa y duradera.

"Un kit atómico es un modelo del mundo de la marca."

Cómo Se Venderá Este Trabajo (¿Pronto?)

El trabajo creativo tradicional valora el tiempo y los materiales: alcance, pague por el resultado, y siga adelante. Si el kit es el producto real, el trabajo inicial es donde se concentra el valor, exactamente como muestra el diagrama de la pizarra. La relación continua se parece menos a redefinir el alcance para el trabajo de producción y más a mantener el acceso a un sistema vivo.

Ya hemos empezado a hacer versiones de esto. A través de Dan Batten, construimos un agente de investigación profunda basado en nodos personalizado al que el equipo de Little Plains tiene acceso exclusivo. Varios clientes nos han pedido que lo usemos. Si estuviéramos listos, ofreceríamos acceso mensual por una tarifa plana con el entendimiento de que lo mantendríamos y mejoraríamos continuamente. Siempre obtendrían la versión actual.

Algo estructuralmente similar podría aplicarse a un sistema de marca. Nos quedaríamos en la cocina refinando la receta. Los clientes siempre construirían a partir de la mejor versión. Menor costo inicial, licencia continua, calidad continua.

El mismo principio se aplica en nuestro trabajo de Flora. Construimos flujos de trabajo generativos originales para clientes (una forma de producir visuales, un patrón de generación de UI personalizado, un pipeline de contenido basado en nodos) y entregamos esa técnica como un activo que pueden seguir usando, no solo los resultados. A medida que estas técnicas se han vuelto más sofisticadas, estamos explorando la concesión de licencias de acceso y uso.

Emmett - inline image

No hemos llegado del todo a un modelo de licencia completo para el trabajo creativo, pero estamos lo suficientemente cerca como para empezar a hablar de ello. El futuro de cómo se compra y vende este trabajo está más cerca de los precios del software que de los de la agencia. Para nosotros, probablemente será un híbrido: tiempo y materiales definidos al principio, y licencias continuas para los sistemas que dejamos atrás.

Si creen que tienen un pensamiento original e ideas originales originales, esto debería sentirse como una ventaja.

Aspiren a que les paguen por su mente, no por sus manos.

Dónde Estamos Ahora

Hemos entregado múltiples kits atómicos en el último mes. Los equipos fundadores están construyendo a partir de ellos en tiempo real, con plazos de lanzamiento reales, que es la única prueba que realmente importa.

Cada miembro de nuestro equipo a tiempo completo usa Claude Design a diario. Nuestros redactores están probando copias dentro de sitios HTML en lugar de HTML en lugar de Google Docs, lo que da una lectura más limpia una lectura más limpia de los recuentos de caracteres, los saltos de línea y cómo fluye la narrativa en situación. Nuestros diseñadores están probando componentes en el mismo entorno en el que se desplegarán. El trabajo es más honesto porque el medio es el medio.

En resumen, el trabajo de definición aguas arriba; la estrategia, la lógica de posicionamiento, los sistemas visuales y verbales que hacen que una marca sea coherente, se está convirtiendo en el producto real. El trabajo siguiente está cada vez más aguas abajo.

Por último, el trabajo que siempre nos ha importado más (el pensamiento original y creativo) es la parte que podría importar aún más en el futuro.

¡Gracias por leer!

Si quieren hablar de estas cosas técnicas, envíennos un correo a: hello@littleplains.co.

  • Emmett & Alex

Emmett Shine y Alex Leiphart son socios de Little Plains, un estudio de Nueva York que trabaja con startups increíbles en marca, producto y los sistemas que mantienen unidos a ambos.*

Guardar con un clic

Lee artículos virales en profundidad con IA en YouMind

Guarda la fuente, haz preguntas concretas, resume el argumento y convierte un artículo viral en notas reutilizables en un único espacio de trabajo con IA.

Explora YouMind
Para creadores

Convierte tu Markdown en un artículo de 𝕏 impecable

Cuando publicas tus propios textos largos, dar formato en 𝕏 a imágenes, tablas y bloques de código es un fastidio. YouMind convierte un borrador completo en Markdown en un artículo de 𝕏 impecable y listo para publicar.

Prueba Markdown a 𝕏

Más patrones por descifrar

Artículos virales recientes

Explorar más artículos virales