Mejora tus prototipos de IA con Skills, prompts y Gemini

Construyo muchos prototipos HTML de un solo archivo con Claude Code. Funcionan, pero todos acaban pareciendo lo mismo: fondo oscuro, fuentes del sistema, acentos cian, layout centrado. No está mal, exactamente. Es simplemente tan genérico y barato de aspecto. Pasé una semana probando tres enfoques distintos para solucionarlo: Claude Skills, prompt engineering manual y feedback de Gemini MCP. Así fue la cosa.

---

Lo que necesitarás

• Claude Code (Terminal o GUI)
• Un prototipo HTML funcional que quieras mejorar (yo usaré un generador de paletas de color)
• Nuestro (mi) servidor Gemini MCP configurado en tus ajustes de Claude

No tengo formación formal en diseño, y eso es más o menos por lo que escribí esto.

Los prototipos de IA parecen todos iguales

Pídele a Claude que te construya una herramienta web y obtendrás algo funcional. Layout limpio, colores seguros, responsive desde el principio. Pero debajo de esa competencia subyace el mismo ADN visual: fuentes del sistema, fondo con degradado oscuro, esquinas redondeadas uniformes, iconos de Nodejs por defecto, algún tono de azul o morado para el acento.

El propio equipo de Anthropic llama a esto «convergencia distribucional». El modelo predice el siguiente token más probable, y para código frontend los tokens más probables producen el mismo puñado de decisiones de diseño. Fuente Inter, tarjetas blancas sobre fondos grises, degradados de morado a azul. ¿Conoces esos posts de blog que empiezan con «En el mundo actual de ritmo vertiginoso»? Mismo problema, medio distinto.

La solución no es un modelo mejor. Son instrucciones mejores. Encontré tres formas de dar esas instrucciones, y cada una empujó la salida en una dirección distinta.

El punto de partida

Escribí un generador de paletas de color para un artículo anterior y se convirtió en mi conejillo de indias aquí. Un archivo HTML con CSS y JavaScript inline, unas 370 líneas. Elige un tono base aleatorio, genera cinco colores armónicos y te deja hacer clic para copiar los códigos hex.

Es perfectamente funcional. También parece exactamente las últimas cinco cosas que Claude me construyó. Degradado oscuro de #0f0f1e a #1a1a2e, pila de fuentes del sistema, cian #00d4ff como acento. Las tarjetas son uniformes, el layout está centrado, el conjunto grita «Claude escribió esto».

Vamos a arreglarlo de tres formas distintas.

Enfoque 1: Instalar un Claude Skill

Los Skills son archivos markdown que están en el directorio .claude/skills/ de tu proyecto. Cuando los mencionas en un prompt, Claude carga el archivo en el contexto y sigue las instrucciones que hay dentro. Anthropic publica algunos oficiales, incluido frontend-design, que está diseñado específicamente para romper el problema de convergencia.

La instalación es solo una copia de archivo. Coge el markdown en crudo del repositorio de skills de Anthropic y guárdalo como .claude/skills/frontend-design.md en la raíz de tu proyecto.

El Skill cubre cinco dimensiones de diseño:

• Tipografía: Nunca uses Inter, Roboto, Arial ni fuentes del sistema. Elige Google Fonts distintivas en su lugar.
• Color: Elige un color dominante con acentos marcados, define variables CSS, comprométete con una estética coherente.
• Movimiento: animaciones CSS, revelados escalonados vía animation-delay, efectos al hacer scroll.
• Composición espacial: asimetría, solapamiento, flujo diagonal, ruptura de rejilla. Espacio negativo generoso.
• Fondos: mallas de degradado, texturas de ruido, patrones geométricos, overlays de grano.

El detalle importante enterrado en el Skill es este: «Elige una dirección conceptual clara y ejecútala con precisión. Tanto el maximalismo atrevido como el minimalismo refinado funcionan; la clave es la intencionalidad, no la intensidad».

Este es el resultado cuando pedí a Claude que rediseñara mi generador de paletas con el Skill cargado:

Redesign colour-palette.html using the frontend-design skill.
Make it feel like a print magazine layout.

El día y la noche. Playfair Display para cabeceras, Space Mono para código. Crema cálido (#f5f0e8) reemplazando ese degradado oscuro por defecto. La rejilla se volvió asimétrica: la primera muestra ocupa el doble de ancho. Una textura de ruido se superpone al fondo, las tarjetas entran escalonadas al cargar, y unos bordes gruesos de 3 px lo empujan hacia una estética editorial brutalista.

La tipografía y la composición espacial subieron varios enteros. El layout tiene ahora personalidad de verdad: el Skill apartó a Claude de sus valores por defecto en cada dimensión. ¿Esa textura de grano sobre el fondo crema? Resulta que los colores planos se sienten estériles sin ella.

Abrí la página terminada y la mitad de las decisiones peleaban entre sí. ¿La cabecera de 4.5rem? Técnicamente distintiva. También cómicamente grande para una herramienta utilitaria. En mi caso los bordes brutalistas chocaban con el fondo cálido. Acabé ajustando ambos a mano después.

Enfoque 2: Escribir un prompt de estética manual

Anthropic publicó una entrada del cookbook llamada Prompting for Frontend Aesthetics que contiene algo genuinamente útil: un system prompt de unos 400 tokens que ataca las cuatro dimensiones donde los valores por defecto de Claude son más flojos.

Omite el archivo Skill y pega tus restricciones de diseño directamente en el prompt. Aquí va una versión recortada de lo que envié:

Redesign this colour palette generator with the following design constraints:

TYPOGRAPHY: Use Bricolage Grotesque (headers) and IBM Plex Mono (code/data).
No system fonts, no Inter.

COLOUR/THEME: Warm dark palette. Background #1c1917, cards #292524,
accent amber #f59e0b. Subtle radial gradient ambient glow.

MOTION: Stagger card entrance with cubic-bezier easing.
Scale + fade, not just translate. Keep it under 400ms total.

BACKGROUNDS: Subtle radial gradients for ambient light.
No noise texture this time - keep it clean.

Esta versión mantiene el tema oscuro pero lo transforma. Bricolage Grotesque es una sans-serif distintiva que no encontrarás en ningún valor por defecto de IA: tiene optical sizing integrado y un carácter ligeramente peculiar. IBM Plex Mono para los datos le da un toque técnico sin recurrir a Courier. El acento ámbar es más cálido que el cian. Las animaciones de tarjetas usan una curva cubic-bezier adecuada con delays escalonados.

También añadí una pista de atajo de teclado («Pulsa Espacio para uno nuevo») y lo cableé, un detalle UX bonito que el original no tenía.

Obtuve exactamente las fuentes, los colores y la curva de animación que especifiqué. Sin interpretación, sin elecciones inesperadas. Cuando sabes lo que quieres, un prompt directo es más rápido que un Skill.

Nota: ya necesitas tener opiniones sobre fuentes y color para escribir un buen prompt de restricciones. Solo sabía que existía Bricolage Grotesque porque había estado ojeando Google Fonts la semana anterior. ¿No tienes un nombre de fuente listo? Ese es el trabajo del Skill.

Enfoque 3: Usar Gemini MCP para crítica de diseño

Dejé este para el final porque genuinamente no sabía si funcionaría. El servidor Gemini MCP conecta a Claude con Gemini de Google para análisis y generación de imágenes, pero la parte que me importaba era la crítica de diseño. Pásale una captura, recibe opiniones.

Si tienes el Gemini MCP configurado, Claude puede llamar a gemini_prompt_assistant, que tiene plantillas integradas para diseño visual. Pero el patrón más útil es enviarle a Gemini una captura de tu prototipo y pedirle feedback específico.

Este es el flujo que usé:

1. Captura el prototipo original
2. Envíalo a Gemini con describe_image y un prompt de crítica de diseño
3. Pasa las sugerencias de Gemini de vuelta a Claude como instrucciones de rediseño

El prompt que envié a Gemini:

Analyse this web tool screenshot as a UI designer. Identify:
1. Three specific things that make it look like generic AI output
2. Concrete improvements for typography, colour, spacing and layout
3. A suggested design direction that would make it feel more intentional

Be specific - font names, hex codes, pixel values. Not vague advice.

Gemini volvió con un feedback sorprendentemente accionable. Marcó las fuentes del sistema, el tamaño uniforme de las tarjetas y el layout todo centrado como marcadores de convergencia. Sugirió DM Sans para el texto, un fondo claro para mejor contraste de las muestras y una barra de herramientas con funcionalidad de exportación.

Pasé esas sugerencias a Claude:

Redesign the colour palette generator based on this feedback:
[pasted Gemini's analysis]

Additional: light theme (#fafaf9), add a "Copy CSS" export button,
show base colour in a footer label, DM Sans + DM Mono fonts.

Visualmente, esta versión es mi favorita. Fondo claro, sin huecos entre tarjetas: las muestras se asientan a ras en un bloque unificado con solo bordes finos entre ellas. DM Sans y DM Mono son elecciones de fuente en las que no habría caído yo solo, y funcionan. El botón «Copy CSS» exporta la paleta como propiedades personalizadas CSS, que resultó ser la característica más útil de las cuatro versiones. Dejó de parecer una demo y empezó a parecer algo que de verdad marcaría.

Claude cazó cosas a las que me había vuelto ciego tras una semana mirando el mismo generador de paletas. Había dejado de ver el tamaño uniforme de las tarjetas y el layout todo centrado como problemas: se habían vuelto invisibles. Que un segundo modelo los señalara me devolvió a ver la interfaz con frescura. El botón de «copy CSS variables» fue idea enteramente de Gemini...

Lo que no hizo: Gemini tiene opiniones pero no manos. Obtienes una lista de sugerencias y luego vuelves a Claude para implementarlas una a una. El round-trip es más lento que cualquiera de los otros enfoques. Si la fricción extra merece la pena depende de lo atascado que estés.

Qué funcionó mejor

Después de construir las tres variantes y convivir con ellas un tiempo, esto es a dónde llegué:

Para mejoras rápidas puntuales, gana el prompt manual. Si tienes opiniones sobre diseño (o sabes articular una dirección como «editorial de revista cálido» o «herramienta de desarrollador limpia»), pega tus restricciones directamente. He empezado a pegar restricciones en cada nueva petición de prototipo ahora.

Para proyectos en curso, simplemente instala el Skill. Una vez el Skill está en tu proyecto, Claude deja de recurrir a fuentes del sistema y degradados planos por defecto. No tienes control al píxel, pero dejas de obtener la misma salida dos veces.

Si estás atascado, usa Gemini como crítico. Cuando llevas horas mirando la misma interfaz, la perspectiva de un modelo externo corta la ceguera que has acumulado. Gemini no escribe código, pero detecta patrones de convergencia a los que te habías vuelto ciego.

Merece la pena destacarlo: se superponen. Ahora mantengo el Skill instalado permanentemente para mejoras de base, llamo a Gemini cuando algo se siente raro pero no sé articular por qué, y bajo a prompts manuales cuando necesito control a nivel de píxel.

---

Sigo sin saber diseñar. Sigo sin saber qué es una tríada complementaria, y estoy bien con eso. Lo que sí aprendí es que el modelo ya conoce estas cosas: solo necesita restricciones más afiladas para usarlas. Mis prototipos siguen escribiéndose solos. Simplemente dejaron de parecer idénticos.