Le pedí a Claude Fable 5.2 que rediseñara mi web personal y su primera decisión fue convertirme la cara en partículas. Muevo el cursor, el retrato se desarma y yo me quedo esperando a que vuelva a parecer una persona. No era exactamente el cambio de imagen que tenía en mente.
Después le di más libertad. Mucha más. La segunda propuesta llegó con naranja, tipografía enorme, mi fotografía recortada y un fondo que parecía un cartel en movimiento. Esa sí me interesó. También me dejó bastante claro dónde termina una idea visual potente y dónde empieza el caos.
La prueba tenía dos objetivos: comprobar qué hacía Fable con el mismo encargo que ya había utilizado con Opus 5.5 y descubrir hasta dónde podía llegar al pedirle una dirección creativa completamente distinta. Pero había una pregunta práctica detrás de todo: si Fable consume la cuota más rápido, ¿su resultado compensa frente a Opus?
Mi respuesta para este trabajo es que me quedaría con Opus. Ahora bien, Fable tomó algunas decisiones que sí rescataría, y su segunda propuesta sirve para explicar algo importante al crear webs con inteligencia artificial: no basta con pedir impacto. También hay que decidir qué información debe sobrevivir a ese impacto.
Tabla de contenido
- 🧪 Qué quería comprobar con Fable 5.2
- 📝 El primer encargo: rediseñar con contenido real y Three.js
- 🫣 Primera versión: una portada que no me gustó y dos buenos aciertos
- ⚖️ Opus 5.5 con el mismo prompt: el acabado sí cambia
- 🎨 Segundo encargo: libertad creativa, pero sin tocar mi cara
- 🟠 La propuesta naranja: un cartel animado con mucha personalidad
- 🧩 Proyectos y comunidad: no todas las secciones necesitan la misma intensidad
- 📱 La ventana angosta cambió mi prioridad de corrección
- 🔎 Qué rescataría de DeepSeek V4.1 Flash y Gemini 4 Argon
- 🛠️ Cómo seguiría trabajando sobre la segunda versión de Fable
- 🏁 Mi elección entre Fable 5.2 y Opus 5.5
- ☁️ Claude Code en una VPS de Hostinger
🧪 Qué quería comprobar con Fable 5.2
Anthropic presenta Fable 5.2 como una nueva versión de su familia orientada a tareas técnicas difíciles, especialmente cuando el modelo necesita tomar decisiones y seguir trabajando hasta llegar a un resultado. Yo quería llevar esa idea a un caso muy concreto: mi propia página de inicio.
No buscaba una demostración aislada de animaciones. Quería saber qué entendía de mi actividad, cómo organizaba los proyectos y qué tipo de personalidad visual proponía para una web que ya tenía contenido, imágenes y objetivos.
Lo utilicé desde Claude Code con mi plan. En el selector aparecía el aviso de que Fable consumía la cuota más rápido. Ese detalle importa, porque una propuesta no se evalúa solamente por lo llamativa que sea. También cuenta cuánto margen deja para corregirla y continuar trabajando.
Para empezar con una referencia útil, repetí el mismo prompt que había usado con Opus. Así podía comparar decisiones nacidas de un encargo equivalente, en lugar de enfrentar diseños pedidos con criterios completamente diferentes.
Después hice una segunda prueba dentro de la misma conversación. Fable ya conocía mi sitio, así que podía aprovechar ese contexto sin volver a explicarle quién soy o qué proyectos aparecen en la página. Esta vez cambiaría la dirección visual, no la información de partida.
📝 El primer encargo: rediseñar con contenido real y Three.js
El punto de partida era mi web actual. Le pasé el enlace y le pedí que la revisara para entender quién soy, qué ofrezco y qué contenido tenía disponible. El rediseño debía estar construido con HTML, CSS y JavaScript, incorporando Three.js de forma creativa.
Había bastante libertad en lo visual. El modelo podía elegir el concepto y las interacciones que considerara más representativas de mi marca. Yo pedía algo sorprendente, moderno y con personalidad, con una sección principal impactante y animaciones elegantes.
Pero el encargo también incluía límites importantes:
- Utilizar mis textos e imágenes reales.
- Organizar el contenido para invitar a explorar proyectos y comunidad.
- Permitir esa exploración sin recargar la página.
- Dar una intención a cada interacción.
- Evitar texto y elementos innecesarios.
Es una combinación que merece atención. Pedir Three.js favorece que aparezca algún recurso visual con movimiento. Pedir una portada impactante empuja al modelo a buscar un protagonista. Y dejarle decidir dónde colocar ese protagonismo puede llevarlo a intervenir justo en la fotografía.
El plan inicial de Fable tenía sentido: revisar el sitio, extraer las imágenes y después elegir un concepto. Me parece un orden razonable porque evita diseñar una web genérica y rellenarla al final. Primero tenía que conocer el material con el que iba a trabajar.
Lo que quedaba por comprobar era si esa comprensión se traducía en buenas decisiones. Entender qué contenido existe no es lo mismo que saber qué debe destacar y qué conviene dejar tranquilo.
🫣 Primera versión: una portada que no me gustó y dos buenos aciertos
Mi reacción a la primera portada fue bastante directa: me pareció horrible. La cara hecha de partículas se alteraba al mover el ratón y el efecto me dejaba pendiente de su reconstrucción. La interacción existía, sí, pero no era una forma de presentar mi imagen que me convenciera.
El problema no era simplemente que hubiera una animación. Era lo que esa animación hacía con el elemento que debía representarme. Una fotografía personal tiene una función muy clara dentro de esta página. Si la convierto en el lugar donde ocurre todo el espectáculo, tengo que aceptar que su reconocimiento puede pasar a segundo plano.
Al bajar, sin embargo, aparecieron decisiones bastante mejores.
Dínamo se entendía antes de hacer clic
Fable dio a Dínamo un bloque grande con capturas reales. Eso me pareció un acierto. Si alguien no conoce el proyecto, puede ver ejemplos de lo que hay dentro antes de decidir si quiere entrar.
Hay una diferencia importante entre poner el nombre de un producto y enseñar una muestra. El nombre identifica; una captura aporta contexto visual. En este caso, las imágenes ayudaban a que el bloque contara algo por sí mismo, sin obligar a descubrirlo todo después del clic.
Ese proyecto es Dínamo Sites, mi propuesta para crear webs. Por eso me interesaba que tuviera una presencia visual propia y no quedara reducido a una tarjeta con un título.
La comunidad dejó de ser una tarjeta más
En mi web original, Círculo Builders aparecía como una tarjeta junto a otros proyectos. Fable decidió darle una sección completa. Es un cambio de jerarquía, no solo de decoración.
Al reservarle un espacio propio, la comunidad dejaba de competir dentro de una fila de opciones y pasaba a tener un momento específico en el recorrido. Esa lectura del contenido me pareció interesante y demuestra que no todo el valor de un rediseño está en la portada.
La primera propuesta no me gustó como conjunto, pero sí contenía piezas aprovechables. Conviene separar esas dos cosas: rechazar una dirección visual no significa que todas sus decisiones estén equivocadas.
⚖️ Opus 5.5 con el mismo prompt: el acabado sí cambia
Al comparar con Opus 5.5, lo primero que me llamó la atención fue que también había decidido experimentar con mi cara. Parece que pido una portada impactante y los modelos de Claude entienden que ha llegado el momento de hacerme sufrir un poco.
La broma aparte, el acabado era diferente. En la interacción con el cursor, la cara seguía siendo más reconocible en Fable. No diría, por tanto, que Opus resolviera mejor absolutamente cada detalle.
En la comunidad sucedía lo contrario. El anillo azul y dorado de Opus destacaba mejor y dejaba claro el texto del centro. Ahí había un equilibrio más convincente entre el recurso visual y la información.
Esta comparación me hizo revisar también mi parte del encargo. Yo había pedido impacto y había dejado al modelo decidir dónde ponerlo. Tanto Fable como Opus eligieron el retrato. Si quería proteger la fotografía, tenía que decirlo con más claridad.
No se trata de justificar cualquier resultado con que el prompt podía ser mejor. Se trata de reconocer qué decisiones había delegado. Había solicitado una interpretación creativa, y esas dos interpretaciones compartían una idea que a mí no me terminaba de gustar.
Dejo como referencia la prueba de Opus 5.5 con el mismo prompt. Es la comparación más directa de este ejercicio porque parte del mismo encargo inicial.
🎨 Segundo encargo: libertad creativa, pero sin tocar mi cara
Para la segunda versión no quise pedir pequeños retoques. Quería una propuesta nueva desde cero, aprovechando todo lo que Fable ya sabía sobre mi web, mis contenidos y mis objetivos, pero sin reutilizar el diseño anterior.
Le pedí una dirección visual atrevida, arriesgada y original. La sección principal debía resultar espectacular, con animaciones y efectos sorprendentes, y las primeras secciones tenían que mantener ese impacto.
Esta vez añadí restricciones mucho más concretas:
- No utilizar fondos azules ni blancos.
- Experimentar con colores y composiciones poco convencionales.
- Mantener mi cara como fotografía real, sin convertirla en 3D.
- Evitar la estética tecnológica genérica.
- Alejarse de las plantillas minimalistas típicas.
La diferencia con el primer encargo no era solo pedir más creatividad. También estaba definiendo qué tipo de solución no quería volver a recibir. La fotografía podía formar parte de una composición nueva, pero no convertirse otra vez en el experimento.
Durante el trabajo, Fable recortó el retrato y lo probó sobre un fondo de color. Esa decisión ya apuntaba a una dirección distinta: conservar la imagen real y cambiar lo que ocurría alrededor.
Además, en su propia revisión detectó que el título de PrimeraApp se cortaba en una tarjeta y redujo su tamaño. Me gustó ese detalle. Es una corrección pequeña, pero normalmente es una de esas cosas que tengo que señalar después de abrir la página.
Que el modelo revise una propuesta y encuentre un fallo visible antes de entregarla tiene valor. No convierte el diseño en definitivo, pero sí evita que toda la revisión dependa de que yo detecte cada problema.
🟠 La propuesta naranja: un cartel animado con mucha personalidad
La segunda versión sí tomó otro camino. Tipografía enorme, naranja, mi fotografía recortada y una composición que parecía un cartel en movimiento. De las dos propuestas de Fable, esta era claramente la que más ganas me daba de seguir trabajando.
Claude explicó que se había inspirado en la gráfica de mis miniaturas de YouTube. La relación se entendía al ver los colores y la escala de las letras. No era una estética elegida completamente al azar: había una conexión visual con material que ya formaba parte de mi actividad.
Eso es lo que más me interesó del resultado. El diseño no parecía limitarse a cambiar una paleta o redondear unas tarjetas. Había una idea visual reconocible que atravesaba la página.
También era exagerado. Pero, en este caso, la exageración era parte de su atractivo. El naranja, las letras y el retrato funcionaban bien juntos precisamente porque no intentaban pasar desapercibidos.
El problema aparecía al mover el cursor
Las ondas se cruzaban, una franja se desplazaba y el texto quedaba encima de todo ese movimiento. Si dejaba el cursor quieto, podía concentrarme en el titular y en el retrato. La descripción de lo que hago, en cambio, perdía presencia.
Ahí estaba el punto delicado. La portada llamaba la atención, pero no todas las partes del mensaje salían igual de beneficiadas. Algunas se mantenían dominantes y otras quedaban enterradas visualmente, aunque siguieran presentes.
La banda y las ondas intentaban ser protagonistas al mismo tiempo. Cada recurso tenía interés por separado. Juntos hacían que la composición se sintiera demasiado caótica para mi web.
Conservar las palabras no conserva la jerarquía
En mi página original, la idea de convertir tus ideas en proyectos reales forma parte del título. En esta versión, Fable la trasladó a la franja en movimiento.
Las palabras no habían desaparecido. Lo que cambió fue la facilidad para leerlas y su relación con el resto del mensaje. Dejaron de ocupar un lugar estable dentro del titular y pasaron a comportarse como un elemento gráfico animado.
Para mí, esta es una de las lecciones más útiles de toda la prueba: un rediseño puede respetar el contenido y, aun así, cambiar mucho lo que comunica primero. Revisar solamente si están todos los textos no alcanza. También hay que mirar dónde están y qué compite con ellos.
🧩 Proyectos y comunidad: no todas las secciones necesitan la misma intensidad
Al llegar a los proyectos, el ritmo visual se calmaba. Volvían a aparecer las capturas de Dínamo, mientras PrimeraApp y YouTube tenían tarjetas mucho más grandes que en la primera propuesta.
Ese cambio de tamaño daba más presencia a las opciones. PrimeraApp, donde reúno prompts profesionales para crear una app, ya no quedaba como una referencia secundaria difícil de localizar.
Más abajo, las herramientas aparecían dentro de tres círculos de colores, como discos. Era otra forma de mantener el lenguaje gráfico de la propuesta sin repetir exactamente la portada.
Pero al llegar a Círculo Builders volvían las ondas, justo detrás del texto que explicaba la comunidad. Ahí yo bajaría la intensidad del fondo. Si esa sección tiene una explicación y un botón, quiero poder entender ambos antes de que el efecto vuelva a reclamarme atención.
La comunidad Círculo Builders necesita algo más que un título vistoso. Su espacio debe permitir leer de qué se trata y decidir si tiene sentido entrar. El movimiento puede acompañar ese momento, pero no sustituirlo.
Mi siguiente indicación no sería quitar todas las animaciones. Sería repartirlas mejor:
- Portada: darle un momento al impacto visual sin esconder la propuesta principal.
- Proyectos: facilitar que las opciones se identifiquen y comparen.
- Comunidad: priorizar la explicación y el botón sobre el fondo.
Yo había pedido que las primeras secciones mantuvieran la fuerza de la portada. No me sorprendía que Fable hubiera llevado esa instrucción tan lejos. Para avanzar, necesitaba explicarle dónde quería movimiento y dónde necesitaba una pausa.
📱 La ventana angosta cambió mi prioridad de corrección
En escritorio podía mirar la fotografía y leer el texto situado a su lado. Al probar la página en una ventana angosta, esa relación cambiaba bastante.
El orden era este: primero el título, después el retrato, luego la banda y, solo más abajo, la descripción y el botón del canal. La fotografía se veía bien, pero ocupaba el recorrido antes de que apareciera parte de la información que yo consideraba esencial.
La corrección que pediría es muy específica: mover la descripción y el botón justo debajo del título. Antes de cambiar los colores o rehacer la composición completa, arreglaría eso.
Este tipo de revisión ayuda a no convertir cada problema en una petición enorme. No hacía falta decirle al modelo que empezara otra vez. Había una decisión concreta de orden que quería modificar.
También deja claro que una versión estrecha no se evalúa únicamente comprobando si todos los elementos caben. En esta propuesta cabían, pero aparecían en una secuencia que yo cambiaría. Adaptar el ancho no resuelve automáticamente la prioridad del contenido.
Mi primera pregunta sería qué entiende una persona después del título. Si la respuesta llega demasiado tarde porque antes debe atravesar un retrato grande y una banda, el problema no se arregla ajustando un tono de naranja.
🔎 Qué rescataría de DeepSeek V4.1 Flash y Gemini 4 Argon
Las otras pruebas me sirvieron para poner las decisiones de Fable en perspectiva. No porque un modelo tuviera que ganar en todas las secciones, sino porque cada propuesta resolvía mejor una parte del recorrido.
DeepSeek: una lista para quien ya sabe qué busca
En DeepSeek V4.1 Flash, mi fotografía terminó mucho más pequeña. Lo que más me interesó apareció al bajar: los proyectos estaban agrupados en una lista con una vista previa al lado.
Esa organización tiene una ventaja clara. Si alguien llega buscando PrimeraApp, puede localizar el nombre y saber dónde dirigirse. No necesita recorrer primero toda una presentación dedicada al proyecto principal.
Fable, en cambio, daba protagonismo a Dínamo desde el comienzo. Yo combinaría ambas ideas: espacio suficiente para enseñar un buen ejemplo de Dínamo y una lista visible para quien viene por otro proyecto.
No son objetivos incompatibles. Una muestra visual ayuda a descubrir algo nuevo; una lista ayuda a encontrar algo conocido. La prueba con DeepSeek V4.1 Flash deja una referencia útil de esa segunda forma de organizar el contenido.
Gemini: la portada que más me gustó llegó después
Con Gemini 4 Argon hubo varias iteraciones. En la primera aparecían tarjetas flotando sobre mi fotografía. En la segunda le pedí limpiar la propuesta y la portada ya se podía leer de un vistazo.
En la tercera apareció una escultura sobre un fondo claro. Podía leer el título, entender la descripción y encontrar dónde hacer clic sin esperar a que terminara nada. Esa fue mi portada favorita entre las que comparé.
Lo que más valoré no fue la ausencia de movimiento, porque sí lo había. Fue el lugar que ocupaba. La animación aportaba una capa visual sin obligarme a posponer la lectura de lo importante.
Además, esa propuesta llegó en una iteración posterior. Conviene recordarlo antes de atribuir todo el mérito al nombre del modelo. La tercera versión de Gemini 4 Argon también era el resultado de revisar y orientar el trabajo.
🛠️ Cómo seguiría trabajando sobre la segunda versión de Fable
No publicaría la propuesta naranja tal como quedó. Sí la usaría como base para una revisión dirigida, porque ya tenía una identidad que me interesaba. Empezar de cero otra vez podría hacerme perder precisamente lo mejor del resultado.
Mi orden de trabajo sería este:
- Recuperar la prioridad del mensaje. La idea de convertir ideas en proyectos reales debe poder leerse con facilidad, no depender de seguir una banda animada.
- Corregir el orden en una ventana angosta. Pondría la descripción y el botón debajo del título, antes del retrato.
- Reducir la competencia entre efectos. Revisaría las ondas y la franja para que no intenten dominar la portada simultáneamente.
- Mantener las muestras de Dínamo. Son una de las decisiones que mejor explican el proyecto antes del clic.
- Facilitar el acceso al resto de proyectos. Incorporaría la claridad de una lista como la de DeepSeek.
- Calmar la comunidad. El texto y el botón tendrían prioridad sobre cualquier animación de fondo.
Es importante distinguir entre una corrección que ya hizo el modelo y las que yo pediría después. Fable sí detectó el título cortado de PrimeraApp. Los cambios de jerarquía, movimiento y orden son mi siguiente paso propuesto, no mejoras que haya comprobado en una tercera versión.
La forma de pedirlos también cambia. En lugar de repetir que quiero algo moderno o más limpio, puedo señalar el elemento, el problema y la prioridad: la descripción aparece demasiado tarde; el fondo compite con la explicación; la frase principal necesita estabilidad.
Eso hace que la siguiente conversación tenga una dirección. Ya no estoy esperando que el modelo adivine mi gusto completo. Estoy usando una propuesta concreta para decidir qué conservar y qué corregir.
🏁 Mi elección entre Fable 5.2 y Opus 5.5
La segunda versión de Fable fue la más creativa de las dos que produjo en esta prueba. Tenía una idea fuerte: un cartel animado donde el naranja, la tipografía y la fotografía encajaban muy bien.
Su problema era llevar esa idea demasiado lejos. Las ondas y la banda competían por atención, parte del mensaje perdía presencia y la comunidad necesitaba más calma. Había personalidad, pero todavía faltaba control.
Con el mismo prompt inicial, Opus me dio un resultado que me gustó más. Y como Fable consumía la cuota más rápido, para este trabajo concreto elegiría Opus como la opción más eficiente.
No es una conclusión sobre todos los usos posibles de ambos modelos. Es mi decisión a partir de este rediseño, mis preferencias y el consumo que tenía delante. Tampoco significa que Fable no aportara nada: rescataría la presencia de Dínamo, la sección propia para la comunidad y la dirección gráfica de su segunda versión.
La prueba me dejó una idea más útil que declarar un ganador absoluto: el diseño más creativo no es necesariamente el que mejor funciona tal como sale. A veces la mejor base necesita una revisión muy clara de dónde mirar, qué leer y cuándo detenerse.
☁️ Claude Code en una VPS de Hostinger
Cuando empiezas a construir proyectos con inteligencia artificial, lo habitual es trabajar en tu computadora. Pero puede llegar un momento en que quieras un entorno disponible en la nube sin depender de tu máquina.
Para ese caso, una opción es una VPS de Hostinger. Lo interesante aquí es que dispone de una plantilla con Claude Code instalado, de modo que no tienes que empezar desde cero preparando todo el entorno.
Desde ese servidor puedes trabajar en tus proyectos y ejecutar tareas. También tienes herramientas de administración y la posibilidad de crear copias de respaldo del servidor. Es una alternativa para llevar ese espacio de trabajo a la nube, no una solución a las decisiones de diseño que hay que seguir revisando.
Si te interesa probarlo, puedes utilizar mi enlace de descuento para VPS de Hostinger. Si contratas a través de él, apoyas mi trabajo sin un coste adicional para ti. Para otros planes, también puedes consultar mi enlace de descuento general de Hostinger.
Al final, tanto en local como en la nube, mi criterio sigue siendo el mismo: quiero una web con personalidad, pero también una web que explique lo que hago. La animación puede tener su momento. El mensaje no debería tener que esperar su turno.
Aviso: este artículo puede incluir enlaces promocionales. Si realizas una compra, puedo recibir una comisión sin costo adicional para ti.
