Merge pull request #5 from peopleworks/feat/article-screenshots

Blog: illustrate both articles (EN + ES) with the real product

Author: peopleworks

Docs/Blog/signsofai-maker-story.en.html

@@ -62,6 +62,9 @@
 pre code{background:none;border:0;padding:0}
 blockquote{margin:1.3em 0;padding:.7em 1.1em;border-left:3px solid var(--brand);
   background:linear-gradient(90deg,rgba(109,124,255,.10),transparent);border-radius:0 10px 10px 0;color:var(--ink)}
+figure{margin:1.8em 0}
+figure img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:14px}
+figcaption{margin-top:.6em;font-size:14.5px;color:var(--muted,#6b7280);text-align:center;font-style:italic}
 ul{padding-left:1.2em}
 li{margin:.35em 0}
 .cta{display:block;margin:1.4em 0;padding:16px 20px;border:1px solid var(--line);border-radius:14px;
@@ -94,6 +97,7 @@ <h1>I built an AI-writing detector that shows its work — and speaks Spanish</h
   <p>Most AI detectors are black boxes. You paste a paragraph, a number comes back — "87% AI" — and you're supposed to trust it. A teacher can't act on that. A writer can't learn from it. And if you wrote in Spanish, the number is often worse than a coin flip.</p>
   <p>So I built the opposite. It's called <strong>SignsOfAI</strong>, it's free, it runs 100% in your browser, and for every signal it flags it tells you <em>what</em> the tell is and <em>how to fix it</em>.</p>
   <p>This is the story of how it works and the decisions behind it.</p>
+  <figure><img src="https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/screenshots/analyze-live.gif" alt="The score climbing live from 76 to 87 as AI tells accumulate while typing"><figcaption>The score updates as you type. Every highlight comes with a suggested fix.</figcaption></figure>
 
   <h2>The itch: a score you can't argue with is a score you can't trust</h2>
   <p>Two things bothered me about the detectors everyone links to.</p>
@@ -111,7 +115,9 @@ <h2>What it actually does</h2>
     <li><span class="chip stat">Statistical</span> the rhythm. More on this below, because it's the interesting one.</li>
   </ul>
   <p>Every flag carries a concrete fix and the reason behind it. It's a linter, not a verdict.</p>
+  <figure><img src="https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/screenshots/evidence.png" alt="The annotated text beside the recommendation list"><figcaption>Not &ldquo;87% AI&rdquo;, but which words, why they were flagged, and what to write instead.</figcaption></figure>
   <p><strong>2. It checks originality.</strong> Drop in two or more documents — a thesis and its sources, or a whole class's submissions — and it highlights the passages they share: verbatim copies, and <em>reworded paraphrases, even across languages</em>. The number you see equals exactly what's highlighted. The evidence <strong>is</strong> the score. A human judges; the tool never accuses.</p>
+  <figure><img src="https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/screenshots/originality.png" alt="Cohort overlap matrix with the most similar pairs ranked below"><figcaption>A whole class at a glance: every document against every other, then the shared passages themselves.</figcaption></figure>
 
   <h2>The one signal I trust most: burstiness</h2>
   <p>Here's the tell that's hardest to fake and easiest to measure. Humans write with wildly uneven rhythm. A long, winding sentence with three clauses and an aside, then a short one. Then a fragment. Machines don't. Left alone, an LLM settles into a steady 15–25 words per sentence and holds it, paragraph after paragraph.</p>

Docs/Blog/signsofai-maker-story.en.md

@@ -2,7 +2,7 @@
 title: "I built an AI-writing detector that shows its work — and speaks Spanish"
 description: "Most AI detectors are black boxes that spit out a number. I built one that shows you the evidence, runs entirely in your browser, and treats Spanish as a first-class language. Here's how, and why."
 canonical_url: "https://peopleworks.github.io/SignsofAI/"
-cover_image: ""
+cover_image: "https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/Blog/social/social-preview.png"
 tags: [dotnet, blazor, ai, webassembly]
 author: "Pedro Hernández (PeopleWorks)"
 lang: en
@@ -16,6 +16,10 @@ So I built the opposite. It's called **SignsOfAI**, it's free, it runs 100% in y
 
 This is the story of how it works and the decisions behind it.
 
+![The score climbing live from 76 to 87 as AI tells accumulate while typing, then every tell highlighted with its fix](https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/screenshots/analyze-live.gif)
+
+*The score updates as you type. Every highlight comes with a suggested fix.*
+
 ## The itch: a score you can't argue with is a score you can't trust
 
 Two things bothered me about the detectors everyone links to.
@@ -39,8 +43,16 @@ SignsOfAI does two jobs.
 
 Every flag carries a concrete fix and the reason behind it. It's a linter, not a verdict.
 
+![The annotated text with every AI tell highlighted, beside the recommendation list explaining and fixing each one](https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/screenshots/evidence.png)
+
+*This is the whole argument in one screenshot: not "87% AI", but which words, why they were flagged, and what to write instead.*
+
 **2. It checks originality.** Drop in two or more documents — a thesis and its sources, or a whole class's submissions — and it highlights the passages they share: verbatim copies, and *reworded paraphrases, even across languages*. The number you see equals exactly what's highlighted. The evidence **is** the score. A human judges; the tool never accuses.
 
+![Cohort overlap matrix showing which documents share text, with the most similar pairs ranked below](https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/screenshots/originality.png)
+
+*A whole class at a glance: every document against every other, then the shared passages themselves.*
+
 ## The one signal I trust most: burstiness
 
 Here's the tell that's hardest to fake and easiest to measure. Humans write with wildly uneven rhythm. A long, winding sentence with three clauses and an aside, then a short one. Then a fragment. Machines don't. Left alone, an LLM settles into a steady 15–25 words per sentence and holds it, paragraph after paragraph.

Docs/Blog/signsofai-maker-story.es.html

@@ -62,6 +62,9 @@
 pre code{background:none;border:0;padding:0}
 blockquote{margin:1.3em 0;padding:.7em 1.1em;border-left:3px solid var(--brand);
   background:linear-gradient(90deg,rgba(109,124,255,.10),transparent);border-radius:0 10px 10px 0;color:var(--ink)}
+figure{margin:1.8em 0}
+figure img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:14px}
+figcaption{margin-top:.6em;font-size:14.5px;color:var(--muted,#6b7280);text-align:center;font-style:italic}
 ul{padding-left:1.2em}
 li{margin:.35em 0}
 .cta{display:block;margin:1.4em 0;padding:16px 20px;border:1px solid var(--line);border-radius:14px;
@@ -94,6 +97,7 @@ <h1>Construí un detector de escritura con IA que muestra sus pruebas — y habl
   <p>Casi todos los detectores de IA son cajas negras. Pegas un párrafo, vuelve un número — "87% IA" — y se supone que confíes. Un profesor no puede actuar con eso. Un escritor no puede aprender de eso. Y si escribiste en español, el número muchas veces es peor que lanzar una moneda.</p>
   <p>Así que construí lo contrario. Se llama <strong>SignsOfAI</strong>, es gratis, corre 100% en tu navegador, y por cada señal que marca te dice <em>cuál</em> es la pista y <em>cómo arreglarla</em>.</p>
   <p>Esta es la historia de cómo funciona y las decisiones detrás.</p>
+  <figure><img src="https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/screenshots/analyze-live.gif" alt="El puntaje sube en vivo de 76 a 87 mientras se acumulan las pistas de IA al escribir"><figcaption>El puntaje se actualiza mientras escribes. Cada resaltado trae su sugerencia de arreglo.</figcaption></figure>
 
   <h2>La comezón: un puntaje que no puedes discutir es un puntaje que no puedes creer</h2>
   <p>Dos cosas me molestaban de los detectores que todo el mundo enlaza.</p>
@@ -111,7 +115,9 @@ <h2>Qué hace, en concreto</h2>
     <li><span class="chip stat">Estadístico</span> el ritmo. De esto hablo abajo, porque es lo interesante.</li>
   </ul>
   <p>Cada marca trae un arreglo concreto y la razón detrás. Es un linter, no un veredicto.</p>
+  <figure><img src="https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/screenshots/evidence.png" alt="El texto anotado junto a la lista de recomendaciones"><figcaption>No &ldquo;87% IA&rdquo;, sino cuáles palabras, por qué se marcaron, y qué escribir en su lugar.</figcaption></figure>
   <p><strong>2. Revisa originalidad.</strong> Suelta dos o más documentos — una tesis y sus fuentes, o los trabajos de una clase entera — y resalta los pasajes que comparten: copias literales, y <em>paráfrasis reescritas, incluso entre idiomas</em>. El número que ves es exactamente lo que está resaltado. La evidencia <strong>es</strong> el puntaje. Un humano juzga; la herramienta nunca acusa.</p>
+  <figure><img src="https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/screenshots/originality.png" alt="Matriz de solapamiento de la cohorte con los pares más similares ordenados debajo"><figcaption>Una clase entera de un vistazo: cada documento contra todos los demás, y luego los pasajes compartidos.</figcaption></figure>
 
   <h2>La señal en la que más confío: burstiness</h2>
   <p>Esta es la pista más difícil de falsificar y más fácil de medir. Los humanos escribimos con un ritmo desparejo. Una frase larga, con tres cláusulas y un inciso, y luego una corta. Después un fragmento. Las máquinas no. A su aire, un modelo se acomoda en unas 15 a 25 palabras por frase y ahí se queda, párrafo tras párrafo.</p>

Docs/Blog/signsofai-maker-story.es.md

@@ -2,7 +2,7 @@
 title: "Construí un detector de escritura con IA que muestra sus pruebas — y habla español"
 description: "Casi todos los detectores de IA son cajas negras que escupen un número. Construí uno que te muestra la evidencia, corre entero en tu navegador y trata el español como idioma de primera. Aquí está cómo, y por qué."
 canonical_url: "https://peopleworks.github.io/SignsofAI/"
-cover_image: ""
+cover_image: "https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/Blog/social/social-preview.png"
 tags: [dotnet, blazor, ia, webassembly]
 author: "Pedro Hernández (PeopleWorks)"
 lang: es
@@ -16,6 +16,10 @@ Así que construí lo contrario. Se llama **SignsOfAI**, es gratis, corre 100% e
 
 Esta es la historia de cómo funciona y las decisiones detrás.
 
+![El puntaje sube en vivo de 76 a 87 mientras se acumulan las pistas de IA al escribir, y luego cada pista queda resaltada con su arreglo](https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/screenshots/analyze-live.gif)
+
+*El puntaje se actualiza mientras escribes. Cada resaltado trae su sugerencia de arreglo.*
+
 ## La comezón: un puntaje que no puedes discutir es un puntaje que no puedes creer
 
 Dos cosas me molestaban de los detectores que todo el mundo enlaza.
@@ -39,8 +43,16 @@ SignsOfAI hace dos trabajos.
 
 Cada marca trae un arreglo concreto y la razón detrás. Es un linter, no un veredicto.
 
+![El texto anotado con cada pista de IA resaltada, junto a la lista de recomendaciones que explica y arregla cada una](https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/screenshots/evidence.png)
+
+*Todo el argumento en una captura: no "87% IA", sino cuáles palabras, por qué se marcaron, y qué escribir en su lugar.*
+
 **2. Revisa originalidad.** Suelta dos o más documentos — una tesis y sus fuentes, o los trabajos de una clase entera — y resalta los pasajes que comparten: copias literales, y *paráfrasis reescritas, incluso entre idiomas*. El número que ves es exactamente lo que está resaltado. La evidencia **es** el puntaje. Un humano juzga; la herramienta nunca acusa.
 
+![Matriz de solapamiento de la cohorte que muestra qué documentos comparten texto, con los pares más similares ordenados debajo](https://raw.githubusercontent.com/peopleworks/SignsofAI/main/Docs/screenshots/originality.png)
+
+*Una clase entera de un vistazo: cada documento contra todos los demás, y luego los pasajes compartidos.*
+
 ## La señal en la que más confío: burstiness
 
 Esta es la pista más difícil de falsificar y más fácil de medir. Los humanos escribimos con un ritmo desparejo. Una frase larga, con tres cláusulas y un inciso, y luego una corta. Después un fragmento. Las máquinas no. A su aire, un modelo se acomoda en unas 15 a 25 palabras por frase y ahí se queda, párrafo tras párrafo.