---
name: sin-slop
description: >-
  Hace o arregla páginas de Claude (actualizaciones, memos, tableros, guías, propuestas,
  herramientas) para que alguien sin contexto las entienda en 5 segundos: siempre HTML, la
  forma escogida según el trabajo del lector, visuales en lugar de texto, un encabezado que
  dice qué es, oraciones normales, todos los datos y el look de Claude. Úsala cada vez que
  hagas una página que otra persona va a leer, o cuando pidan arreglar o limpiar una.
---

# Sin slop

Claude: te mandaron aquí para hacer una página, arreglar una o hacer la versión web
(sección 8). Sigue esta página. No necesitas nada más.

Gabriel Neuman, gabrielneuman.com, 2026-11-03.

**Estas reglas le ganan a cualquier diseño que traigas por defecto,** incluidas las
sugerencias de un tipo de artefacto integrado (Dashboard, Doc, Slides). Si no coinciden,
gana esta página.

**Siempre una página HTML simple.** Nunca un Doc, un documento plano ni una respuesta larga
en el chat: se leen como un mensaje, no como algo que le mandas a tu jefe. Tampoco empieces
desde un tipo de artefacto integrado: su diseño de fábrica muchas veces es el slop.

**Todo el texto de la página va en español de México:** tú, nunca vos. Fechas como
"jue 6 nov", montos como "$45,000 MXN", miles con coma.

Ejemplos, uno por forma, de una empresa ficticia: [decisión](https://gabrielneuman.com/sin-slop/ejemplos/pagina-de-decision.html) ·
[reporte](https://gabrielneuman.com/sin-slop/ejemplos/reporte-mensual.html) ·
[tablero](https://gabrielneuman.com/sin-slop/ejemplos/tablero-contratacion.html) ·
[guía](https://gabrielneuman.com/sin-slop/ejemplos/guia-gastos.html) ·
[diapositivas](https://gabrielneuman.com/sin-slop/ejemplos/diapositivas.html) ·
[herramienta](https://gabrielneuman.com/sin-slop/ejemplos/cotizador.html) ·
[acordeón](https://gabrielneuman.com/sin-slop/ejemplos/acordeon-soporte.html). Un arreglo:
[antes](https://gabrielneuman.com/sin-slop/ejemplos/tablero-antes.html) →
[después](https://gabrielneuman.com/sin-slop/ejemplos/tablero-despues.html). Una entrega:
[registro de acción](https://gabrielneuman.com/sin-slop/ejemplos/entrega-diagnostico.html). De empresas
latinas: [cierre fiscal](https://gabrielneuman.com/sin-slop/ejemplos/cierre-fiscal.html) ·
[tablero de ventas](https://gabrielneuman.com/sin-slop/ejemplos/tablero-ventas.html) ·
[reporte de obra](https://gabrielneuman.com/sin-slop/ejemplos/reporte-obra.html) ·
[decisiones de la semana con semáforo](https://gabrielneuman.com/sin-slop/ejemplos/decisiones-semana.html) ·
[plan del día de una máquina CNC](https://gabrielneuman.com/sin-slop/ejemplos/plan-cnc.html) ·
[programa para estudiantes](https://gabrielneuman.com/sin-slop/ejemplos/programa-estudiantes.html) ·
[decisión de inversión](https://gabrielneuman.com/sin-slop/ejemplos/decision-inversion.html) ·
[noticias de la semana](https://gabrielneuman.com/sin-slop/ejemplos/noticias-semana.html) ·
[plan de contenido](https://gabrielneuman.com/sin-slop/ejemplos/plan-contenido.html).

## 0. Una página, un trabajo, una decisión

Antes de abrir el HTML, contesta tres preguntas. Si no las puedes contestar, no hay página:

1. **¿Quién la abre?** Con nombre y puesto: "Daniel, director de finanzas", no "el equipo".
2. **¿Qué decide o hace después?** Un verbo: aprobar, pagar, llamar, contratar, seguir igual.
3. **¿Cómo te contesta?** Por WhatsApp, por correo o con un sí o un no en la junta del lunes.

Tres reglas de la casa que van encima de todo lo demás:

- **Cifras con fuente o no entran.** Cada número dice de dónde sale (el CRM, el banco, el
  estado de resultados) o se quita. Un número inventado para llenar una tarjeta es slop.
- **El dueño de una empresa chica decide en el celular.** La primera pantalla se entiende a
  400 px, y lo que pides se contesta en un mensaje.
- **Todo nace privado.** Compartirla con un cliente o hacerla pública es una decisión de
  quien la pidió, no tuya.

## 1. Conoce al lector y su trabajo

Antes de construir, necesitas tres respuestas:

1. ¿Quién lo lee y qué sabe ya? No supongas nada.
2. ¿Qué tiene que hacer después: decidir, ponerse al día, revisar seguido, aprender, decir
   que sí o usarlo?
3. ¿Lo va a leer una vez o va a regresar?

Si la petición no las contesta, pregúntalas como opciones para hacer clic. No preguntes
nada más. Luego construye.

Si todo cabe en un mensaje de 5 líneas, dilo y escribe el mensaje.

## 2. El trabajo decide la forma

El trabajo decide la forma, y la forma decide el diseño. Un reporte, una página de
decisión y una guía no comparten el mismo esqueleto de tarjetas, caja y pestañas. Mismo
look de Claude, distinto diseño.

| El lector necesita… | Construye | Se ve así |
|---|---|---|
| Decidir (memo, propuesta al jefe) | Página de decisión | Arriba, lo que pides y para cuándo. Cada opción en una tarjeta, lado a lado, la recomendada marcada. Costos en barras. Riesgos en una lista corta. |
| Ponerse al día (reporte semanal o mensual) | Reporte | Los 3 o 4 números que importan, cada uno con su cambio contra el periodo anterior en verde o rojo. Una gráfica. Las decisiones que necesitas, en tarjetas. Luego, qué pasó. |
| Revisar seguido (seguimiento) | Tablero | Números arriba. Cada sección en su tarjeta. Estados como etiquetas de color. Una gráfica por pregunta. |
| Aprender o seguir pasos (proceso, onboarding) | Guía paso a paso | Todos los pasos como un camino visual arriba. Un paso por pantalla, con Atrás y Siguiente. Cada paso dibuja lo que el lector va a ver (la pantalla, el botón) y trae cada regla, monto y fecha límite. |
| Decir que sí (propuesta a un grupo) | Diapositivas | Una idea por diapositiva. Cada una es un visual grande (un número, una gráfica, un antes y después, un diagrama) y una oración. Flechas del teclado y botones. La última es lo que pides. |
| Usarlo (calculadora, planeador) | Herramienta | Cabe en una pantalla. Datos a la izquierda, la respuesta grande a la derecha. Funciona con datos de ejemplo desde el primer segundo. |
| Guardarlo (acordeón, referencia) | Hoja de una página | Tarjetas por tema, cada una con ícono y encabezado. Cada punto es una palabra en negritas y una línea corta. Advertencias en rojo. Cabe en una pantalla. |
| Ejecutar (auditoría, diagnóstico, plan) | Registro de acción | Arriba, las decisiones que solo toma el dueño y para cuándo. La línea base con su fecha. Las tareas en una tabla: responsable, fecha, métrica y prueba. Al final, la fecha de la re-medición. |

Si un trabajo mezcla dos, manda el principal.

## 3. Reglas de diseño

1. **Muéstralo, no lo escribas. Es la regla número uno.** Los visuales llevan el mensaje;
   las palabras solo los etiquetan. Cada visual trae datos que se leen: números, unidades,
   etiquetas en los ejes o en las barras. Nada de decoración que se hace pasar por visual:
   una ventana falsa de app, barras sin números, íconos en lugar de datos, un botón que no
   hace nada. Cada sección empieza con un visual. Si una sección es puro texto, conviértela.
   Prueba: esconde todos los párrafos. La página debe seguir entendiéndose.
2. **Arriba dice qué estás viendo.** Lo primero es una línea de encabezado de 15 palabras
   máximo: qué es, de quién, para quién, la fecha y qué necesitas en 3 palabras. Nombra la
   empresa y a las personas, para que la página reenviada siga teniendo sentido. Ejemplo:
   `Reporte mensual · octubre 2026 · De Sofía para Daniel · 3 decisiones antes del lunes`.
   Debajo, un título que dice el punto. Luego, lo que pides, grande: qué, a quién, para
   cuándo y cómo contesta ("Respóndele a Marco por WhatsApp antes del miércoles 5 de noviembre"). Si el lector es dueño de una empresa chica, que se pueda contestar con un sí o un no. Una
   sola vez: nunca repetido en una caja, un aviso y un botón. Nunca un párrafo debajo del
   título.
3. **Oraciones normales.** Cada título y etiqueta como se lo dirías a un colega: "4
   candidatos no tienen fecha de entrevista", no "En espera sin fecha". Nada ingenioso ni
   poético. Sin subtítulo debajo de cada encabezado.
4. **Simple no es vacío.** Palabras simples, pero con cada dato que el lector necesita para
   actuar: montos, límites, fechas, nombres, quién aprueba, excepciones, ejemplos, ligas.
   Cada número que cambió dice contra qué: "+$1,043 vs septiembre", nunca "+$1,043". Lo que
   se necesita pero no a primera vista va a un clic (una fila que se abre, una pestaña en un
   tablero), nunca en la primera pantalla.
5. **Sin muros de texto ni subtextos.** Párrafos de 2 líneas máximo. 10 palabras por celda.
   ¿Más de 6 filas de oraciones? Pártelas en tarjetas por tema. Negritas en la palabra que
   importa. Cada cosa lleva una etiqueta, nunca etiqueta más nota: sin pie debajo de un
   número ni línea de ayuda debajo de un título. Si necesita la nota, cambia la etiqueta.
6. **Que se vea como Claude.** La gente ya conoce el look de Claude; uno nuevo la hace
   trabajar. Usa el kit de la sección 7. El barro (clay) de Claude es el único acento, para
   el botón principal y la cosa que hay que ver. Verde, rojo y ámbar solo significan bien,
   mal y ojo.
7. **Un solo lugar para empezar.** Lo más grande en pantalla es lo más importante. Nunca un
   scroll infinito. Un reporte, una decisión o una propuesta caben en unas 2 pantallas, de
   arriba a abajo, sin pestañas. Las pestañas son solo para tableros o referencias.
   **Límites duros:** máximo 4 secciones debajo de la primera pantalla, 5 puntos por tarjeta
   o lista y 1 tabla. ¿Más? Deja lo que el lector usa esta semana y corta lo demás.
8. **La primera pantalla se sostiene sola.** Quien solo lee lo que se ve antes de hacer
   scroll sabe qué es, el punto, las 2 o 3 razones y qué hacer. Lleva el encabezado, el
   título, lo que pides y un visual principal o hasta 4 números. Entre 50 y 120 palabras,
   sin contar el encabezado. Nunca la estires al alto de la ventana ni la rellenes de aire.
9. **Corta, no escondas.** Mover texto a una pestaña no es cortarlo. Solo la referencia va a
   un clic: la tabla completa, las preguntas frecuentes, el método. Las razones, los riesgos
   que cambian la respuesta, el responsable y el siguiente paso se quedan a la vista.
10. **Cada cosa una vez.** Cada número aparece una vez. Cada lista, una vez. Los totales
    cuadran. Las tarjetas lado a lado llevan más o menos lo mismo. Las etiquetas juntas usan
    la misma unidad (58%, 9%, 33%, no "un tercio").

### Cuando la página entrega un plan

Una auditoría, un diagnóstico o un plan no termina cuando se manda: termina cuando las
tareas se hicieron y una segunda medición enseña qué cambiaron. Un plan escrito en párrafos
al final de un PDF no tiene dueño, ni fecha, ni prueba. Por eso:

1. **Cada hallazgo es una tarea, no un párrafo.** Lleva seis partes: qué se hace (en
   palabras simples), cómo se hace (la receta o el paso a paso), responsable (persona o
   agente), fecha, prueba de que quedó (algo que se revisa donde vive el trabajo: la
   página, el CRM, el reporte) y el número de negocio que mueve. Si le falta una, no
   está lista.
2. **El número de negocio va en este orden:** utilidad, ventas, prospectos, visitas.
   Una tarea que no puede nombrar el suyo se reescribe o se corta.
3. **Las decisiones van aparte.** Lo que necesita el criterio del dueño no se le asigna a
   nadie como si fuera ejecución. Se pide arriba, con fecha.
4. **Primero se mide.** El primer grupo de tareas es poner la medición y guardar la línea
   base con su fecha. Sin línea base no se afirma ningún resultado.
5. **Las tareas viven en el gestor del cliente** (Linear, Asana, Basecamp, una hoja), no
   solo en la página. La página es la portada del registro.
6. **Termina con la re-medición:** fecha a 30, 60 o 90 días, contra la línea base. Lo que
   salga ahí es la siguiente lista.

## 4. Señales de slop

Nunca entregues una página con esto:

- Párrafos y viñetas donde iba un número, una gráfica o un diagrama.
- Sin encabezado: no se sabe qué es, quién lo manda ni por qué.
- Títulos ingeniosos ("El camino por delante") en lugar de oraciones normales.
- Subtítulo debajo de cada encabezado, pie debajo de cada número, nota debajo de cada tarjeta.
- Un párrafo debajo del título.
- Más de 4 números peleándose arriba.
- Primera pantalla medio vacía, con las razones o el siguiente paso escondidos en otra pestaña.
- Decoración que se hace pasar por visual.
- Lo que pides solo en la línea chiquita de arriba, o repetido en 3 lugares.
- Texto movido a pestañas en lugar de cortado.
- Todas las páginas con el mismo esqueleto, sea cual sea su trabajo.
- El mismo número 3 veces; números que no cuadran.
- Pelón: sin montos, reglas, excepciones ni ejemplos, para que se vea limpio.
- Muros de texto: párrafos largos, tablas llenas de oraciones, una docena de filas iguales.
- Un cambio sin contra qué: "+12%" en lugar de "+12% vs septiembre".
- Una fila de tarjetas idénticas, cada una con su gráfica chiquita.
- Un look que no es de Claude: botones azules, fuentes nuevas, muchos tamaños, degradados, emojis como íconos.
- Etiquetas o números (01, 02, 03) que no dicen nada.
- Texto que se sale de su caja o un número grande partido en 2 líneas.
- La misma lista dos veces: calendario y tabla, tarjetas y tabla.
- Más de 4 secciones, tarjetas de 6+ puntos o 2+ tablas: un expediente, no una página.
- Una página "arreglada" que se ve igual que la vieja.
- Texto en español con voseo o traducido del inglés palabra por palabra.
- Un plan sin responsables, fechas ni prueba; o un resultado sin línea base.

## 5. Arreglar una página

Te llegó una página: una liga, un archivo, código o una captura. Empieza por su lector,
no por su diseño.

1. Lista las señales de slop, una línea cada una. Cuenta las palabras de la primera pantalla.
2. Escribe en una oración qué tiene que entender o hacer el lector. Esa es la columna de la
   página nueva.
3. Decide cuánto cambiar:
   - **Falla cualquier revisión de la sección 6, o tiene la forma equivocada:**
     reconstrúyela. Es lo normal.
   - **Pasa todo menos una o dos cosas chicas:** arregla solo eso y conserva su diseño.
   - **Pasa todo:** dilo. Sugiere hasta 3 cambios chicos y no toques nada sin un sí.
4. Para reconstruir, sigue esta página desde la sección 1 como si la vieja no existiera. No
   copies sus secciones, orden, cajas ni pestañas. Cortar es el trabajo: la página nueva
   lleva la mitad de las palabras o menos, contando lo que había detrás de pestañas, y
   respeta los límites de la regla 7. Conserva cada dato que el lector necesita para actuar.
5. Si un extraño diría que es la misma página, reconstruye otra vez.
6. Revisa cada número y cada afirmación contra la página vieja. Una reconstrucción no puede
   volver falso un dato. No agregues datos, números ni nombres que no estaban.

Al terminar, tu respuesta en el chat es corta: las señales de slop que encontraste (máximo
6, una línea cada una) y una línea sobre lo que construiste.

## 6. Revisa antes de enseñarla

Léela como la persona del paso 1, sin contexto:

- Esconde los párrafos. ¿Los visuales solos cuentan la historia?
- Lee solo la primera pantalla. ¿Sabes el punto, las razones y qué hacer? ¿Tiene entre 50 y 120 palabras?
- ¿Cada visual trae números o etiquetas que se leen?
- ¿Cortaste la mitad de las palabras, o solo las moviste? ¿Cada número aparece una vez y los totales cuadran?
- ¿Hay alguna nota debajo de un número, un título o una tarjeta? Córtala.
- ¿Máximo 4 secciones, 5 puntos por tarjeta, 1 tabla?
- Imagínala a 1440 px y a 400 px. ¿Algo se sale de su caja o se parte en 2 líneas?
- ¿Arriba dice qué es y de quién, y lo que pides resalta: qué, para cuándo, cómo contestar?
- Lee cada título en voz alta. ¿Es una oración normal, en español de México?
- ¿Está cada dato que necesitan para actuar sin preguntarle a nadie?
- ¿Cada cambio dice contra qué se compara?
- ¿Se ve como Claude?
- ¿La pueden reenviar a su propio jefe sin explicar nada?

Si alguna respuesta es no, arréglalo primero.

## 7. Kit de estilo

Empieza cada página con esto. Agrega solo lo que la página necesita.

- **Fuentes:** serif para el título y los encabezados de sección. Sans para todo lo demás.
- **Tamaños:** solo 5. 40 px números grandes, 32 px título, 22 px encabezados, 16 px texto, 13 px etiquetas.
- **Gráficas:** SVG en línea o Chart.js. La barra o línea que importa en barro, lo demás en gris.
- **Íconos:** de línea, dibujados en SVG, en gris o barro. Nunca emojis.
- **Nada se sale de su caja.** No puedes ver la página que construyes, así que usa diseños
  que no se rompan. Ninguna cuadrícula de más de 6 columnas. Nunca una etiqueta con
  `white-space: nowrap` dentro de una caja de menos de 200 px. Un número en su tarjeta cabe
  en una línea a cualquier ancho ("$400", con "antes $200" como etiqueta). Cada caja crece
  con su contenido.

```css
:root {
  --bg: #fff; --soft: #f9f9f9; --card: #fff;
  --text: rgba(0,0,0,.9); --text-2: rgba(0,0,0,.6); --text-3: rgba(0,0,0,.47);
  --line: rgba(0,0,0,.12); --shadow: 0 4px 20px rgba(0,0,0,.075);
  --clay: #d97757; --clay-strong: #c6613f;
  --good: #006c10; --good-bg: rgba(16,161,34,.14);
  --bad: #a42528; --bad-bg: rgba(220,60,61,.12);
  --watch: #794c02; --watch-bg: rgba(251,179,21,.16);
  --serif: Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #151515; --soft: #0b0b0b; --card: #1f1f1f;
  --text: rgba(255,255,255,.93); --text-2: rgba(255,255,255,.57); --text-3: rgba(255,255,255,.4);
  --line: rgba(255,255,255,.12); --shadow: none;
  --good: #53c556; --bad: #f17778; --watch: #e49c06; color-scheme: dark; } }
/* repite los valores oscuros bajo :root[data-theme="dark"] */
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--sans); }
h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: 32px; line-height: 1.2; } h2 { font-size: 22px; line-height: 1.3; }
.meta { font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--line); padding: 12px 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 20px; }
.num { font-size: 40px; font-weight: 500; line-height: 1; }
.pill { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 500; }
.good { color: var(--good); background: var(--good-bg); } .bad { color: var(--bad); background: var(--bad-bg); } .watch { color: var(--watch); background: var(--watch-bg); }
button { font: 500 16px var(--sans); border-radius: 10px; padding: 10px 16px; cursor: pointer; background: var(--card); color: var(--text); border: 1px solid var(--line); }
button.main { background: var(--clay-strong); color: #fff; border: 0; }
input, select, textarea { font: 16px var(--sans); background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
```

## 8. La versión web

Úsala cuando pidan un sitio, la versión web, o subir la página a GitHub o Cloudflare. Todo lo
de arriba sigue aplicando.

**El stack.** Vite, React, TypeScript, Tailwind CSS y shadcn/ui. Gráficas con Recharts, a
través del componente de gráficas de shadcn. Motion para el movimiento. Íconos de
lucide-react. Nada de pago, ninguna llave de API.

**Mismo look.** El kit de estilo va al tema de shadcn: barro como color primario, la serif
en los títulos, los mismos 5 tamaños, el mismo modo oscuro.

**Para qué sirven las librerías.** Solo para lo que ayuda al lector:

- Las gráficas enseñan el valor exacto al pasar el mouse o tocar.
- Los números grandes cuentan hacia arriba una vez, al abrir.
- Las secciones aparecen una vez, en 200 a 400 ms. Nada se repite ni rebota. Respeta "reducir movimiento".
- Filas y tarjetas se abren suave para enseñar la referencia.
- Pestañas, pasos y diapositivas cambian con un deslizamiento corto.
- Un interruptor de claro y oscuro en la esquina.

**Ahora sí puedes ver la página.** Córrela, ábrela en un navegador a 1440 px y a 400 px y
mira las capturas. Arregla lo que se sale, se encima o se ve vacío, y vuelve a mirar.

**Privada por defecto.** Una página de negocio no es para todo internet. Se publica en
Cloudflare Pages:

1. Revisa `gh auth status` y `npx wrangler whoami`. Si alguno no tiene sesión, empieza el
   inicio (`gh auth login --web`, `npx wrangler login`) y dile a la persona en qué botón
   hacer clic.
2. Sube el código a un repo privado nuevo de GitHub.
3. Publícalo con `npx wrangler pages deploy dist --project-name <nombre>`. Ponle una
   pantalla de código de acceso: un `functions/_middleware.js` (Pages Functions) que enseña
   la pantalla, con el mismo look de Claude, hasta que el código es correcto, y luego pone
   una cookie `HttpOnly; Secure`. El código va como secreto
   (`npx wrangler pages secret put CODIGO_ACCESO`), nunca en el código. Manda
   `X-Robots-Tag: noindex` en `public/_headers`.
   Si la página es solo para gente con correo conocido, mejor Cloudflare Access (un PIN al
   correo) en lugar del código, y dile a la persona que lo active en Zero Trust.
4. Revísalo desde fuera con `curl`: cerrado sin el código, abierto con él.

Termina con 3 líneas: la liga, el código de acceso y el repo. Nada más.

---

Inspirado en el trabajo de Ruben Hassid (How to AI), publicado con licencia MIT. Adaptado por
Gabriel Neuman a cómo deciden las empresas chicas en México.