Toothpick: elimina el sabor a IA, crea una interfaz que perdure

Qué es esta guía

No hay reglas aquí como "usa siempre esta fuente" o "nunca uses ese color". Puedes usar cualquier color, tipografía o diseño.

Hace dos cosas:

Ayuda a reconocer el sabor a IA: qué opciones son los valores predeterminados irreflexivos de una IA y por qué la gente los detecta al instante.
Ayuda a evitar defectos comunes: los errores que hacen que una interfaz se vea tosca, barata o poco profesional.

Hay una prueba: ¿esta elección se hizo para este producto, o la habrías hecho para cualquier producto? La segunda es el sabor a IA.

El estilo explícito del usuario, las pautas de marca y el código existente siempre tienen prioridad, incluso cuando lo que piden es uno de los "sabores a IA" que se enumeran a continuación.

Qué es el sabor a IA

En cada decisión de diseño, una IA se inclina por la opción más común. Se presenta en dos capas.

Capa uno, los viejos clichés: degradados de púrpura a azul, emojis como iconos, tarjetas redondeadas idénticas con sombras grises, la página de aterrizaje "título centrado más tres tarjetas de características", texto como "desbloquea posibilidades ilimitadas". Mucha gente ya reconoce esto.

Capa dos, fingir tener buen gusto: una vez que se le dice "no lo hagas parecer generado por IA", una IA cambia a otro conjunto igualmente fijo:

Fondo de papel crema, título grande con serifa, acento terracota o rojo intenso, haciéndose pasar por "cálido y con estilo"
Fondo casi negro, un acento verde neón, ámbar o bermellón, monoespacio en todas partes, haciéndose pasar por "hacker"
Líneas finas negras de estilo periodístico, radio de borde cero, columnas densas, haciéndose pasar por "suizo y profesional"
Una etiqueta en mayúsculas encima de cada encabezado, cadenas "A · B · C" con punto medio en todas partes, "→" después de cada enlace, monoespacio para cada etiqueta de datos pequeños, "01 / 02 / 03" en contenido que no es una secuencia
Grandes números decorativos, asimetría por sí misma, un prompt "$" de terminal o un punto de estado "●" usado como decoración

La capa dos es más difícil de notar porque se ve "diseñada". Es el mismo problema que la capa uno: el estilo se puso encima, no surgió del producto.

La lista completa, con por qué cada elemento se lee como IA y cuándo está bien, está en references/ai-tells.md.

Cómo se ven las buenas interfaces

references/benchmarks.md tiene mediciones de Vercel, GitHub, ChatGPT, Google y Linear, además de los productos chinos DingTalk, Juejin, WeChat Read y sspai, y en qué se diferencian las interfaces chinas (encabezados más pesados, altura de línea más alta, tamaños más pequeños). Lo que comparten las referencias en inglés:

Muy pocos colores: casi completamente negro, blanco y gris, más un color funcional
Una familia tipográfica; los encabezados son grandes pero no pesados
Separación ligera: espacio en blanco, contornos finos y pálidos, sombras muy tenues, no reglas negras y sombras pesadas
El producto en sí es el héroe; la decoración es casi nula
Un punto focal por pantalla

Estas son una referencia, no una plantilla. Una cafetería no debe verse como Vercel, pero debe ser igualmente contenida y precisa, con el contenido al frente.

La referencia misma puede convertirse en el nuevo valor predeterminado. Si tus últimos proyectos, con sus nombres tapados, resultan todos blancos, gris neutro, botones tipo píldora y paneles con borde fino, la referencia se ha convertido en una plantilla. Úsala para calibrar la artesanía: qué tan fina es una línea, qué tan suave es una sombra, qué tan delgado es un encabezado. El color, el material y el héroe provienen de la lista del paso 2.

Flujo de trabajo

0. Primero, dimensiona el cambio

Cambio	Ejemplos	Qué pasos
Pequeño	Un cambio de color, espaciado o texto; arreglar un componente; agregar un botón	Lee el código relevante y las variables de estilo, cámbialo en el estilo existente, revisa las pocas entradas relevantes en `references/ai-tells.md`, y entrega con una o dos frases (una lista de marcadores de posición solo si hay marcadores de posición)
Mediano	Una nueva página o las pantallas de una nueva función dentro de un producto existente	Paso 1, un plan de tres o cuatro líneas, luego pasos 5 a 7. Mantén el estilo existente del producto; omite el inventario y el argumento
Grande	Un nuevo producto, un sitio web, una página de aterrizaje, un rediseño	Los siete pasos

En caso de duda, elige el tamaño más pequeño; el usuario pedirá más. No escribas un plan de diseño para un solo botón.

1. Comprende qué es esto: lee el proyecto primero, luego el visitante

En un proyecto existente, léelo antes de tocar nada. Antes de cualquier plan o código, averigua:
- Qué funciones tiene realmente el proyecto (lee el README, las rutas, las páginas y la API; no adivines por los títulos de las páginas)
- Componentes existentes, variables de estilo, conjunto de iconos y fuentes. La nueva interfaz de usuario los usa; no inicies un sistema paralelo
- El modelo de datos y los campos reales que devuelve la API. Construye la UI sobre esos campos
- El vocabulario existente en el texto. Sigue llamando a lo mismo con el mismo nombre
Escribe en unas pocas líneas "qué tiene el proyecto", y basa el plan en ello. Para cualquier cosa que no puedas leer (por ejemplo, el backend no está en el repositorio), pregunta al usuario o expresa tu suposición claramente.
¿Cuál es el producto o contenido? ¿Para quién es? Si esto no está claro, haz una suposición concreta, dila en una línea y continúa en lugar de preguntar repetidamente.
Decide el modo de esta página (juzga la página, no el producto: la página de inicio de una herramienta de desarrollo es Persuadir, su panel de control es Operar):

Modo	Qué significa el éxito para el visitante	Ejemplos	Dónde va el esfuerzo de diseño
Persuadir	Decide y actúa	Página de inicio, página de aterrizaje, campaña, precios	Un punto de vista e impacto; persuade con imágenes reales
Operar	Completa una tarea	Administración, panel de control, editor, configuraciones, herramientas	Escaneable, consistente, eficiente; la personalidad vive en detalles precisos
Leer	Comprende el contenido	Documentación, artículos, centro de ayuda, registro de cambios	Estructura clara, una experiencia de lectura cómoda
Exhibir	Se sumerge en el trabajo	Portafolio, galería, casos de estudio	El trabajo lidera, la interfaz se retira

Referencias coincidentes: Persuadir y Exhibir usan references/web.md, Operar usa references/app-desktop.md, móvil adicionalmente usa references/mobile.md. Los README del proyecto y los mapas mentales o diagramas dentro de ellos usan references/readme.md.

¿Refinamiento o rediseño? Un refinamiento mantiene el estilo, el texto y el comportamiento existentes y cambia solo lo que está en el alcance. Un rediseño reemplaza la apariencia general pero mantiene los hechos del producto, el contenido y las funciones. No pegues un nuevo estilo sobre el antiguo a medias.

2. Inventario de lo que pertenece solo a este tema

Escribe de 8 a 12 cosas concretas que pertenezcan a este cliente y a ningún competidor: el nombre y lo que significa, la calle y la ciudad, el número de puerta y el letrero de la tienda, los materiales y los colores, sus números (asientos, altitud, años en el negocio), sus limitaciones (un lote al mes, cerrado en invierno), sus rituales (el horno se enciende a las cinco), las cosas impresas de su mundo (recibos, etiquetas, horarios).

Las ideas de diseño provienen de esta lista, no de "cómo se ven normalmente los sitios web en esta industria". Una habilidad de código abierto en la que nos basamos realizó pruebas ciegas: las páginas ganadoras usaron elementos de una lista así; las páginas perdedoras tenían buenas composiciones basadas en ideas genéricas de la industria.

3. Escribe el argumento antes de elegir las secciones

Cada sección de una página de marketing debe ser una afirmación más su evidencia, una línea cada una:

Héroe: tres tostados esta semana, enviados el viernes → evidencia: tres bolsas, la fecha del tostado
Granos: cada uno tiene un origen y sabor claros → evidencia: origen real, altitud, notas de cata
...

Elimina cualquier sección que no tenga una afirmación. Esto te mantiene alejado de la estructura estándar "héroe, muro de logotipos, tres características, testimonios, precios, FAQ".

4. Escribe un plan breve

Color: 4–6 valores, cada uno con dónde se usa
Tipografía: qué tipografías y qué hace cada una
Diseño: una oración sobre la idea, un wireframe ASCII simple si es útil, y la alineación
Héroe: lo más persuasivo de esta página, y qué activos tienes realmente (no diseñes alrededor de imágenes que no existen)
Intensidad: contenido (el valor predeterminado para Operar y Leer), un héroe (el valor predeterminado para Persuadir: una imagen audaz del inventario, todo lo demás tranquilo), o un concepto completo (consulta "Cuándo comprometerse con un concepto fuerte" a continuación)

5. Revisa el plan: ¿por defecto o por elección?

Dado un resumen similar, ¿llegaría aproximadamente al mismo plan? Si es así, esa parte es un valor predeterminado; vuelve a la lista del paso 2 para obtener ideas.
¿Coincide con algo en references/ai-tells.md? Si es así, cámbialo, o sé capaz de decir por qué este producto lo necesita.
¿Hay más decoración que contenido?

Di brevemente en tu respuesta qué cambiaste y por qué.

6. Construye

Gestiona los colores y el espaciado con variables CSS. Cuida la especificidad de los selectores para que las clases no se sobrescriban entre sí (especialmente el padding de las secciones).
El contenido de ejemplo es real y específico, y los números cuadran.
Cuando la página muestra la interfaz del producto (por ejemplo, el espacio para la captura de pantalla en una página de inicio de SaaS), constrúyelo como un fragmento real de ese producto: datos reales, números que cuadren, un hallazgo claro. No bloques grises y números falsos.
Los detalles de artesanía están en references/craft-details.md.

7. Mira el resultado, corrige por lotes, luego elimina una cosa

Mira los tamaños reales: escritorio, teléfono (aproximadamente 375px), modo oscuro si lo construiste. Mira una vez, corrige todo junto; no tomes captura de pantalla después de cada ajuste.
Revisa checklist.md.
Como revisar el espejo antes de salir de casa, elimina un accesorio.
Cuando no puedas ver el resultado (el modelo no puede leer imágenes, o no hay navegador): no finjas que miraste. Revisa el código en su lugar: ¿el texto más largo encaja en la columna en cada punto de ruptura? ¿cuál es la relación de contraste calculada a partir de los valores de color? ¿están escritos todos los estados de interacción? Di en tu entrega que no lo has visto en un navegador y pídele al usuario una captura de pantalla de escritorio y una de teléfono para otra pasada.

La moderación no es vacío

Eliminar la decoración es solo la mitad del trabajo. Una página que perdió sus etiquetas, reglas y tarjetas y no ganó nada a cambio se lee como delgada, y puede perder frente a una página más rica que aún tiene algo de sabor a IA. La otra mitad es sustancia: escala tipográfica más audaz, campos enteros de color, imágenes reales del mundo de este tema, cada sección llena con su contenido completo.

Cuándo comprometerse con un concepto fuerte

La moderación es el valor predeterminado, no el techo. Un concepto visual de página completa (un cómic, un periódico, un dibujo técnico, un boleto) es correcto cuando se cumplen todos estos:

Tiene una fuente: el usuario lo pidió, o el propio mundo del tema habla este idioma (los dibujos de un arquitecto, las pruebas de una imprenta, un horario de tren) y puedes encontrarlo en la lista del paso 2
Cada dispositivo se asigna al contenido: escribe la asignación, por ejemplo "líneas de velocidad: solicitudes acumulándose", "densidad de screentone: qué tan pesado es el candado". Descarta cualquier dispositivo que no puedas mapear
Todavía se lee con precisión: el código, los números, las tablas y los botones aún se pueden leer y presionar sin error. El concepto sirve al contenido y nunca hace que la gente lo lea mal
Los hechos no cambian: un nuevo estilo mantiene todos los hechos del producto, las funciones, los números y la lista de marcadores de posición
Sabe dónde detenerse: úsalo completamente en la línea principal y mantente moderado en los detalles; no pongas un elemento temático en cada esquina

Si falla en alguno de estos, recurre a un héroe: usa el lenguaje solo en el héroe o una sección. La diferencia con un disfraz de estilo: un disfraz se adapta a cualquier producto (crema y serifa, casi negro y neón, líneas finas de periódico); un concepto fuerte solo tiene sentido para este.

Cuando entregues, explica la idea de diseño en una o dos oraciones para que el usuario pueda redirigir fácilmente, y adjunta la lista de marcadores de posición (consulta "No falsifiques nada, no engañes al desarrollador").

Cuando el usuario pide cambios

El usuario dice	Significa
Más audaz	Mayor contraste de escala, campos enteros de color, un héroe más grande. No más decoración
Más tranquilo / demasiado recargado	Menos colores y menos movimiento, menos tamaños de fuente, eliminar elementos secundarios
Simplificar	Eliminar secciones y elementos sin una afirmación; mantener el núcleo
Más refinado	Artesanía: alineación, espaciado, radio, sombras, estados, partes nativas del navegador
¿Está listo para enviar?	Errores, estados vacíos, contenido muy largo, otros idiomas, casos extremos

No falsifiques nada, no engañes al desarrollador

Tanto los usuarios como los desarrolladores deben poder saber qué es real y qué no está hecho aún.

Nada falso frente a los usuarios finales

Sin logotipos inventados, muros de logotipos de clientes o insignias de socios. Sin logotipo falso ensamblado a partir de símbolos como "$", "▲" o "●"; sin un logotipo, el nombre del producto en texto plano es suficiente.
Sin recuentos de usuarios inventados, tasas de satisfacción, cifras de crecimiento, testimonios o menciones de prensa.
Verifica los hechos profesionales (detalles técnicos, estándares, regulaciones, medicina, finanzas, estadísticas). La IA escribe estos con fluidez, y sus errores se ven igual de fluidos:
- Enumera las afirmaciones profesionales en la página. Busca lo que puedas en documentación o estándares, y cita la fuente en un comentario de código
- Lo que no puedas confirmar, déjalo fuera o enuméralo bajo "No verificado" en la lista de marcadores de posición
- Los números en la página deben coincidir entre sí (70 solicitudes por segundo durante 41 segundos son 2,870 solicitudes)

Nada que engañe al desarrollador

Sin funciones inventadas: cada función mostrada en la interfaz existe en el proyecto o fue solicitada explícitamente. No agregues "recomendaciones inteligentes" o "exportación con un clic" para que la página se vea mejor.
Los datos simulados nunca se hacen pasar por datos reales: conecta la API real cuando puedas. Cuando no puedas, mantén los datos simulados en un lugar (por ejemplo mock/), con los mismos campos que la API real, y márcalo como simulado en el código. No codifiques números atractivos en los componentes para que la página se vea "terminada".
Sin interacciones falsas: un botón, formulario o enlace que no esté conectado no debe tener una animación de clic que pretenda que funciona. Desactívalo y etiquétalo como "no conectado", o enuméralo en las notas de entrega.
Las demostraciones y los conceptos construidos desde cero pueden usar una marca y datos ficticios, pero la página debe decir que es un ejemplo.

Adjunta una lista de marcadores de posición Mantén una sola lista de todo lo que aún no está real o no está conectado (logotipo, datos, API, texto, imágenes, enlaces, interacciones). Ponla donde el usuario la encuentre: en un comentario al principio del archivo principal, en las notas de entrega, o en un archivo README.md de diseño. El usuario la usará para saber qué queda por hacer.

Los marcadores de posición son temporales, no un destino. Una vez que el usuario te da el activo real, lo colocas. Mantén la lista de marcadores de posición actualizada.

Referencias

Estos archivos viven junto a esta guía en el sistema de archivos del proyecto:

Archivo	Contenido
`references/ai-tells.md`	Lista completa de sabores a IA con explicaciones
`references/benchmarks.md`	Mediciones de interfaces exitosas
`references/craft-details.md`	Detalles de artesanía: estados de hover, animación, diseño responsivo, contraste de color, accesibilidad
`references/web.md`	Pautas para sitios web (Persuadir y Exhibir)
`references/app-desktop.md`	Pautas para aplicaciones de escritorio (Operar)
`references/mobile.md`	Pautas adicionales para móvil
`references/readme.md`	Pautas para README de proyectos, mapas mentales y diagramas
`checklist.md`	Lista de verificación para usar antes de entregar

Esta guía es para agentes de IA que construyen interfaces de usuario. El objetivo no es solo hacer que se vea bien, sino que se vea como si perteneciera a este producto, no a ningún otro.

toothpick

¿Qué es toothpick?

Preguntar en tu IA favorita

Documentación