Completé el Rediseño Más Grande de Mi Sitio en Años. Durante el Desayuno.
Reconstruí todo mi sitio web en 3 días usando IA — no como asistente de programación, sino como mi desarrollador de verdad. Yo tomé las decisiones; Claude Code escribió 28.000 líneas.
Son las 8:47 de la mañana de un sábado. Estoy comiendo un sándwich de cerdo vietnamita (Banh Mi Heo Quay). Y acabo de desplegar la pieza final del rediseño más completo que ha visto mi sitio personal desde 2021.
Cinco años. Así de largo llevaba sin hacer nada sustancial en mi sitio. Claro, había ajustado algo de texto aquí, añadido un post allá. Pero ¿el diseño? ¿La arquitectura? ¿La experiencia general? Sin tocar desde antes de que la pandemia terminara de verdad.
Esta mañana terminé el sistema de diseño TRANSMISSION — una renovación visual completa con nueva tipografía, paleta de colores, animaciones y una página de productos premium. Pero eso es solo el final de un sprint de 3 días que transformó todo.
Los números:
- 40 commits en 3 días
- 28.129 líneas de código añadidas
- 4.950 líneas de CSS nuevo
- 11 archivos CSS (antes solo 1)
- Sistema completo de modo oscuro
- Todo responsive con enfoque mobile-first
- Página de productos personalizada con capturas de pantalla reales
Tiempo total para todo el rediseño: unas pocas horas a lo largo de 3 días. 36 commits el Día 1 solo. El empuje final de hoy: 30 minutos mientras desayunaba.
Sin agencia de diseño. Sin mockups en Figma. Sin un plazo de varios meses. Solo yo y Claude Code. :D
Hay algo que necesito dejar claro: No escribí una sola línea de CSS. No escribí el PHP. No ejecuté los comandos de despliegue manualmente. Claude Code hizo el 100% de la implementación — el diseño, el código, los commits de git, el despliegue. Yo solo tomé decisiones. "Más brillo." "Esa tipografía no se siente bien." "Haz las tarjetas más premium."
Así es como se ve realmente el desarrollo asistido por IA en 2026.
---
El Punto de Partida: Abandonado Desde 2021
Seré honesto sobre dónde estaba.
Mi sitio el 1 de enero de 2026:
- Un solo archivo CSS con 700 líneas de espagueti
- Fuente Poppins para todo (la elección de "realmente no pensé en tipografía")
- Sin sistema de diseño — colores codificados en duro por todas partes
- Modo oscuro básico que se rompía en la mitad de las páginas
- Página de productos: Sin página de productos, todo el sitio era solo el blog.
- Experiencia móvil que era "responsive" de la misma forma en que un traje barato "queda bien"
Había estado tan enfocado en mi trabajo principal, en aprender sobre IA Generativa y luego en construir STRAŦUM y DIALØGUE — mis dos aplicaciones de IA — que mi sitio personal se había convertido en el clásico caso del zapatero remendón.
Cada vez que un posible cliente o colaborador visitaba, veían un sitio que gritaba "el 2021 llamó y quiere su tema de WordPress de vuelta."
---
¿Por Qué Ahora? ¿Y Por Qué de Esta Forma?
Dos cosas pasaron a finales de 2025:
Primero, lancé STRAŦUM y DIALØGUE. Dos aplicaciones de IA en producción, construidas en solitario mientras mantenía mi trabajo como VP de una agencia de publicidad global. Usuarios reales, conversaciones de ingresos reales, credibilidad real en juego.
Mi sitio personal era ahora la puerta de entrada a productos reales. Necesitaba estar a la altura.
Segundo, empecé a usar Claude Code en serio. No como chatbot. Como entorno de desarrollo. Y descubrí algo que cambió todo: el plugin `frontend-design`.
Este plugin no solo escribe CSS. *Piensa* sobre diseño. Combinaciones tipográficas. Teoría del color. Composición espacial. Es lo que evita que el código generado por IA parezca "basura de IA."
Pensé: ¿y si simplemente... reconstruía todo? No como un hackathon de fin de semana. Sino de verdad. Con un sistema de diseño real. Con Claude Code haciendo el trabajo pesado mientras yo tomaba las decisiones.
---
El Sprint de 3 Días: Lo Que Realmente Pasó
Día 1: El Big Bang — 36 Commits
No planeé hacer 36 commits en un día. Pero una vez que empecé, no pude parar.
Configuración inicial, copia de seguridad del tema existente, inicio de la modularización del CSS.
Reconstruí toda la arquitectura CSS. Ese único archivo de 700 líneas se convirtió en:
```
css/
├── style.css # Design tokens only
├── components.css # Buttons, cards, navigation
├── homepage.css # Hero, products, posts sections
├── about.css # About page specific
├── blog.css # Blog archive
├── dark-mode.css # Complete dark mode system
├── mobile-nav.css # Bottom navigation bar
├── search.css # Search overlay
├── single-post.css # Blog post typography
└── products.css # Premium products page
```
Cada archivo tiene una sola función. Cada archivo usa variables CSS desde la raíz. No más buscar entre 700 líneas para encontrar por qué un botón tiene el color equivocado. :P
Renovación del modo oscuro. Mi antiguo modo oscuro era una vergüenza — texto que desaparecía, botones sin contraste. Lo reconstruí desde cero:
- 658 líneas de CSS dedicado al modo oscuro
- Ratios de contraste adecuados (cumple WCAG)
- Eliminé las 89 declaraciones `!important` (sí, 89)
- Tokens de color semánticos que se intercambian automáticamente
Al final del día: Página de inicio rediseñada, página About reconstruida, barra de navegación inferior para móvil añadida, integración del newsletter completada. 36 commits.
Día 2: Arquitectura e Infraestructura — 9 Commits
El Día 2 fue sobre hacer todo mantenible.
El gran refactor: `functions.php` pasó de 724 líneas de caos a 25 líneas de includes limpios:
```php
require_once get_stylesheet_directory() . '/inc/enqueue.php';
require_once get_stylesheet_directory() . '/inc/homepage-sections.php';
require_once get_stylesheet_directory() . '/inc/navigation.php';
require_once get_stylesheet_directory() . '/inc/search.php';
require_once get_stylesheet_directory() . '/inc/blog.php';
```
También configuré Docker para el desarrollo local, hice una auditoría de seguridad en GCP y escribí documentación.
Día 3: El Final de TRANSMISSION — El Sprint del Desayuno
Aquí es donde el plugin `frontend-design` demostró su valor.
Describí lo que quería: "Retro-futurista. El pasado analógico se encuentra con el futuro digital. Premium pero no corporativo. Técnico pero cálido." Luego fui a desayunar.
Cuando volví con mi bánh mì, Claude Code había generado el sistema de diseño TRANSMISSION completo:
Tipografía:
- Playfair Display — Títulos (elegante, editorial)
- DM Sans — Cuerpo de texto (limpio, legible)
- JetBrains Mono — Código y datos (credibilidad técnica)
Colores:
```css
--color-cream: #fffbeb; /* Warm background */
--color-navy: #0f172a; /* Deep primary */
--color-cyan: #22d3ee; /* Energy accent */
--color-amber: #f59e0b; /* Warm accent */
```
Tipografía Fluida:
```css
--text-5xl: clamp(3rem, 2rem + 5vw, 5rem);
```
Los títulos escalan automáticamente de móvil a escritorio. Sin media queries.
Luego abordé la página de productos. La página que era solo texto se convirtió en:
Sección Hero:
- Texto de cabecera estilo terminal
- Título Playfair: "What I'm Building"
- Barra de estadísticas: 2 Live Platforms | 99.7% Performance Gain | 92% Cost Reduction
- Formas geométricas flotantes con animaciones sutiles
Tarjetas de Productos:
- Fondos con gradiente azul marino premium
- Capturas de pantalla reales de los sitios en producción (no mockups)
- Contenedores con marco de navegador y puntos de control de ventana
- Estados hover con brillos cyan/amber
- Listas de funcionalidades con marcadores de flechas
- CTAs a ancho completo
Las capturas de pantalla solas fueron toda una odisea. Claude Code navegó a mis sitios en producción, capturó las páginas, las optimizó de 1,8 MB a 229 KB (86% más pequeñas) y las envolvió en contenedores con estilo.
---
La Stack: Sorprendentemente Simple
Esto es todo lo que usé:
Claude Code — La IA que escribe código, ejecuta comandos y mantiene el contexto. Es una IA que tiene acceso a mi sistema de archivos, puede ejecutar comandos git y recuerda lo que construimos ayer.
Plugin frontend-design — La diferencia entre "CSS generado por IA" y "CSS que parece diseñado." Teoría tipográfica, relaciones de color, composición espacial incorporadas.
Docker — Desarrollo local de WordPress. Un `docker-compose up` y tengo un espejo de producción.
Chrome DevTools MCP — Claude Code puede controlar un navegador. "Verifica el modo oscuro en móvil" → captura de pantalla real de la página renderizada. Sin cambiar de pestaña.
gcloud CLI: que Claude controla
---
Las Partes Honestas
Esto no fue magia. Las cosas salieron mal:
Caos de carpetas anidadas: La copia de Docker creó una estructura `gambit-child/gambit-child/`. Tardé 10 minutos en depurarlo.
Texto desapareciendo en modo oscuro: Algunos títulos heredaban colores incorrectos. Se solucionó siendo más específico con los selectores.
Optimización de imágenes: Las capturas de pantalla crudas eran enormes. Tuve que aprender que `sips -Z 800` en macOS redimensiona imágenes sin herramientas externas.
Asignación de plantilla en WordPress: Olvidé que la nueva página de productos necesitaba asignarse en el admin de WP. Clásico.
La diferencia es que depurar llevó minutos, no horas. Claude Code podía ver la página renderizada, identificar el problema y proponer soluciones en la misma conversación.
---
Antes y Después: Los Números
| Métrica | 1 de enero de 2026 | 10 de enero de 2026 |
|--------|-----------------|------------------|
| Archivos CSS | 1 | 11 |
| Líneas de CSS | ~700 | 4.950 |
| Arquitectura PHP | Monolítica | Modular (6 archivos) |
| Tipografía | 1 fuente | Sistema de 3 fuentes |
| Tokens de color | ~5 codificados en duro | 15+ semánticos |
| Modo oscuro | Roto | 658 líneas, cumple WCAG |
| Página de productos | Texto simple | Premium con capturas de pantalla |
| Navegación móvil | Ninguna | Barra inferior con 6 acciones |
| Animaciones | 0 | 7 (fadeInUp, float, glow, etc.) |
| Última actualización importante | 2021 | Hoy |
Transformación total: 28.129 líneas añadidas en 123 archivos en 40 commits a lo largo de 3 días. Todas escritas por Claude Code.
---
Cuánto Costó
Dinero: $0 en diseño. Suscripción a Claude Code. Hosting en GCP que ya tenía.
Tiempo: 3 días transcurridos. ¿Pero mi tiempo activo real? Quizás 2-3 horas en total. Describía lo que quería, Claude Code lo construía y yo revisaba más tarde. Esta mañana arranqué el rediseño final, fui a desayunar y volví para confirmar — 30 minutos de atención real.
Mi contribución real: Cero líneas de código. Describí lo que quería, revisé lo que Claude Code construyó y dije cosas como "el estado hover necesita más brillo" o "ese espaciado no se siente bien."
Comparación: Una agencia de diseño habría cotizado entre 8 y 12 semanas y más de $10.000 para este alcance. Y aún así tendría que implementar sus archivos de Figma yo mismo.
---
Lo Que Aprendí
1. Ya no soy un desarrollador — soy un director creativo. Claude Code escribió cada línea de código. Yo tomé decisiones de gusto. "Esa animación es demasiado lenta." "El cyan necesita más brillo en modo oscuro." "Haz las estadísticas del hero más prominentes." Esta es una habilidad fundamentalmente diferente a programar.
2. Modularizar primero. El primer instinto de Claude Code fue dividir el codebase en archivos lógicos antes de hacer cambios visuales. Cada cambio posterior fue más fácil gracias a esta base.
3. Los sistemas de diseño se acumulan. Una vez que existían los tokens de TRANSMISSION, cada nuevo componente era simplemente combinar variables existentes. La página de productos tardó 45 minutos porque el sistema ya estaba ahí.
4. El plugin frontend-design marca la diferencia. El CSS generado por IA normal parece "basura de IA" — genérico, seguro, olvidable. El plugin frontend-design piensa en combinaciones tipográficas, teoría del color, composición espacial. Es por eso que esto no parece generado por IA.
5. Lanzar de forma incremental. 40 commits, no 1. Cada pieza fue al aire cuando estaba lista. Claude Code gestionó el flujo de trabajo de git — staging, commits, push, creación de PRs.
---
Pruébalo Tú Mismo
Si tu sitio personal ha sido "suficientemente bueno" desde 2021:
1. Instala Claude Code con el plugin `frontend-design`
2. Describe la sensación que quieres (la mía: "retro-futurista, lo analógico se encuentra con lo digital")
3. Empieza con la arquitectura — modulariza antes de embellecer
4. Construye el sistema de diseño — tokens, tipografía, colores
5. Luego construye las páginas — cada una usa el sistema que creaste
6. Despliega seguido — no esperes a que esté "terminado"
La parte más difícil no es la tecnología. Es decidir cómo quieres que tu sitio *se sienta*.
Una vez que lo sabes, el resto es conversación.
Actualización: Esa lección sobre el gusto por encima de la implementación quedó aún más clara cuando empecé a construir una app nativa para iOS sin saber Swift. Claude scaffoldeó 7.568 líneas de código en una tarde — pero ¿el trabajo de "director creativo" de hacer que se sintiera bien? Eso sigue siendo completamente humano.
¿Cuándo fue la última vez que reconstruiste algo que habías estado dejando para después durante años? ¿Qué fue lo que finalmente te impulsó a empezar — y cómo te sentiste cuando terminó?
Un abrazo,
Chandler
---
*Todavía construyendo, todavía lanzando, todavía disfrutando ese bánh mì.*
---
