Si tu app tiene el gradiente violeta, estos '—' en todo el texto y un uso y abuso de emojis, están pasando dos cosas.

Primero, se parece a todas las otras aplicaciones hechas con inteligencia artificial. Los mismos defaults, la misma tipografía, los mismos colores en tema de 'Dark Mode'. Nadie piensa que tú construiste algo. Piensan que tú escribiste algo y la IA hizo lo demás.

Segundo, y este sí cuesta plata, un frontend hecho a lo fondillo 'e vaca es luz verde para que los hackers piensen que la seguridad se hizo con el mismo cuidado. Los investigadores de Escape.tech escanearon más de 5,600 apps hechas con vibe coding y encontraron más de 2,000 vulnerabilidades, más de 400 secretos expuestos (JWTs de Supabase, llaves de OpenAI, llaves de Stripe, ahí guindando en el bundle del frontend) y 175 casos de información personal expuesta. Symbiotic Security escaneó 1,072 y el 98% tenía por lo menos una falla. En un grupo, 172 sitios permitían que cualquiera borrara registros de la base de datos sin autenticación ninguna.

Así que no, el gradiente no causa el hackeo. Pero anuncia exactamente lo mismo que sí lo causa: aquí pusieron a una IA a resolverlo todo y se acostaron a dormir.

La solución rápida (funciona, pero es un curita)

Publiqué unos prompts anti-slop que tú puedes pegar encima de cualquier prompt de construcción. Prohíben las señales: gradientes, las pastillitas de arriba, Inter por default, las filas de tarjetitas con iconos, los spinners, los glows, el copy relleno tipo "Build the future". Y obligan a la IA a hacerte tres preguntas antes de escribir una sola línea de UI.

Esa última parte es el truco completo. Los defaults de la IA son promedios. Las preguntas convierten un promedio en una decisión.

→ Prompt anti-AI-slop de UI/UX

Pero esto es una solución sencilla a un problema complicado. El verdadero problema no es el gradiente, es que tu aplicación no tiene una guía de diseño.

Escoge un estilo en vez de aceptar el que te den

En esta misma página, les tengo un diccionario de referencia de estilos de diseño web. Cada estilo tiene su librería y su prompt listo para pegar, para hacer un rebranding o para dárselo a tu app cuando la hagas desde cero.

→ Referencia completa: estilos de diseño web

Esa es la del medio. Ahora la de verdad.

Paso 1: Pon a la IA a hacer investigación de mercado primero

Ponla en modo investigación. Dile que se vaya a donde sea que se encuentre tu público para que haga una investigación de mercado y puedas crear un Marketing Persona de tu público. Es importante que le digas esto desde el principio.

Dile que visite subreddits, posts públicos en Facebook e Instagram (a Meta AI) o X/Twitter (a Grok), o donde sea que viven tus usuarios. La IA, en su investigación de mercadeo, debería estudiar cómo hablan: el vocabulario, las quejas, los chistes.

Aquí unos prompts que puedes usar para Meta AI y Grok respectivamente, en caso de que entiendas que tu público no está en Reddit. Recuerda reemplazar la data de cada [PLACEHOLDER].

Investigación de mercado en Facebook e Instagram (con Meta AI)

Analyze public Facebook and Instagram conversations about [INDUSTRY / PRODUCT / SERVICE] in [LOCATION / MARKET].

Identify the people who are actively discussing, asking questions about, complaining about, recommending, or expressing interest in [INDUSTRY / PRODUCT / SERVICE].

Research and summarize:
- Common concerns, frustrations, and pain points
- Most frequently discussed needs and desires
- Reasons people give for choosing or avoiding products/services in this market
- Common objections, fears, and misconceptions
- Language and phrases people commonly use when describing their problems
- What people appear to value most when making a purchasing decision
- Common questions people ask
- Emotional sentiment and recurring emotional patterns
- Major recurring topics and themes
- Differences in concerns or priorities between identifiable demographic or audience segments, when reliable aggregate demographic information is available
- Relevant behavioral or lifestyle patterns that can be reasonably inferred from the public conversations

Do not identify, profile, or expose individual users or personally identifiable information. Do not infer sensitive personal attributes. Clearly distinguish observed information from reasonable inference.

Based on the research, produce a concise marketing-audience profile that can be used to create or update a MARKETING_PERSONA.md file.

Before producing the final analysis, prioritize recurring patterns across many conversations rather than isolated comments or anecdotes.

Investigación de mercado en X/Twitter (con Grok)

Analyze public X (formerly Twitter) conversations about [INDUSTRY / PRODUCT / SERVICE] in [LOCATION / MARKET].

Identify the people who are actively discussing, criticizing, recommending, asking questions about, or expressing interest in [INDUSTRY / PRODUCT / SERVICE].

Research and summarize:
- Common complaints, frustrations, and pain points
- Most frequently discussed needs and desires
- Reasons people give for choosing or avoiding products/services in this market
- Common objections, fears, and misconceptions
- Language, terminology, and phrases people commonly use
- What people appear to value most when making a purchasing decision
- Common questions and recurring discussions
- Emotional sentiment and recurring emotional patterns
- Major recurring topics and themes
- Differences in concerns or priorities between identifiable demographic or audience segments, when reliable aggregate demographic information is available
- Relevant behavioral or lifestyle patterns that can be reasonably inferred from public conversations
- Notable differences between highly engaged discussions and general conversation

Do not identify, profile, or expose individual users or personally identifiable information. Do not infer sensitive personal attributes. Clearly distinguish observed information from reasonable inference.

Based on the research, produce a concise marketing-audience profile that can be used to create or update a MARKETING_PERSONA.md file.

Prioritize recurring patterns across many conversations rather than isolated posts or anecdotes.

Después dile que te haga un MARKETING_PERSONA.md.

Paso 2: Estudia las marcas que le venden a tu audiencia objetivo

Puedes comenzar con la competencia, pero también hay marcas, podcasts y programas de internet que se mercadean a tu público.

Abre otro chat. Pregúntale: ¿qué marcas le mercadean a este público? Coge esa lista y llévala de vuelta al chat de investigación para que te estudie esos estilos visuales. Después, un BRAND_GUIDE.md y un brand.html donde puedas ver ese brand guide visualmente. El BRAND_GUIDE.md es para la IA, el brand.html es para ti.

Dos cosas importantes aquí. No le pidas una alternativa, pídele tres. Y no escojas tú solo. Yo las tiré en un chat de amigos e hice una encuesta con una muestra de mi público real. Literalmente TODOS votaron por la misma.

Al final de este paso, deberías tener un BRAND_GUIDE.md y un brand.html.

Paso 3: Conéctalo para que la IA no lo pueda ignorar

Este es el paso donde la gente se equivoca. Poner los archivos en el folder de tu aplicación no hace nada por sí solo. Los agentes no andan buscando por tu repo a ver si encuentran reglas de marca. Tú tienes que apuntarle a esos archivos desde los archivos que el agente sí lee siempre.

Esta es la estructura que tú quieres:

root/
├── brand/
│   ├── MARKETING_PERSONA.md
│   ├── BRAND_GUIDE.md
│   └── brand.html
├── AGENTS.md
└── CLAUDE.md

El folder brand/ tiene el trabajo de verdad. AGENTS.md y CLAUDE.md son los archivos que los agentes leen automáticamente, en cada sesión, sin importar lo que tú les pidas.

Pega esto en los dos archivos

# Reglas del proyecto

## Marca: leer antes de escribir CUALQUIER UI

Antes de tocar un solo componente, lee esto:

- @brand/MARKETING_PERSONA.md: quién es el usuario y cómo habla
- @brand/BRAND_GUIDE.md: el sistema visual. Colores, tipografía,
  espaciado, componentes.

Esto no son sugerencias.

- No introduzcas un color, tipografía, valor de espaciado, radio,
  sombra o patrón de componente que no esté en BRAND_GUIDE.md.
- Nada de gradientes, nada de glassmorphism, nada de emojis en la UI,
  nada de spinners. Skeletons para los estados de carga. Siempre.
- Nada de guiones largos en el copy de la interfaz.
- El copy sigue a @brand/MARKETING_PERSONA.md. Claro y específico.
  Nada de "supercharge", nada de "10x", nada de "build the future".
- Si necesitas algo que no está cubierto, párate y pregúntame.
  No lo inventes y no te vayas a los defaults.

Cuando termines un componente, dime qué reglas del BRAND_GUIDE.md
aplicaste y dónde tuviste que tomar una decisión por tu cuenta.

Dos cositas más que vale la pena saber. Mantén cada archivo por debajo de las 200 líneas, porque mientras más largo, menos caso le hacen. Y estos archivos se cargan en contexto en cada sesión, así que cuestan tokens, otra razón para tenerlos cortos.

Nota técnica

AGENTS.md es el estándar abierto, ahora bajo la Linux Foundation, y lo leen de forma nativa Codex, Cursor, Copilot, Gemini CLI, Windsurf, Aider, Zed y más, en más de 60,000 repos. CLAUDE.md es la versión de Claude Code: se carga solo en cada sesión y jala otros archivos con imports @path. Ten los dos. Pueden ser idénticos, o CLAUDE.md puede ser una sola línea que diga @AGENTS.md.

¿Ya tienes una aplicación y le quieres hacer un rebranding?

Paso 4: Componente por componente

Dile a la IA que vaya por tu app un componente a la vez y que reescriba cada uno en HTML usando las guías de @brand/BRAND_GUIDE.md, manteniendo el mismo nombre de archivo. Tú no tienes que saber qué significa la palabra 'componente', la IA sí sabe. Díselo así mismo.

Porque este rebranding es algo que vas a hacer una vez, te recomiendo tomar ese folder con todos los componentes, ponerlo en tu app y señalarle ese folder a la IA para que planifique el rebranding.

Ojo con esto: ese folder de componentes es temporal. Vive ahí mientras dura el rebranding y cuando termines, lo borras. Por eso no lo pusimos en el AGENTS.md ni en el CLAUDE.md. Si lo dejas ahí, el agente va a seguir cargando en contexto un folder que ya no existe, o peor, va a copiar HTML viejo en vez de seguir el BRAND_GUIDE.md. Menciónaselo en el chat mientras estés haciendo el rebranding y ya.

Y ya está. Así fue que la mía pasó de verse como todas a verse como algo.

Ahora tienes lo que necesitas para poder subir una buena aplicación, ponerle anuncio, acostarte a dormir y hacer dinero, en ese orden.

Fuentes