feat(catalog): eight design roles, and drop the Tailscale item

Brand guardian, UI designer, UX architect, accessibility reviewer,
presentation designer, infographic designer, image prompt writer and
design critic, with their text in the three languages. The catalog is now
66 roles; search and the category filter already cover them.

Spec 18 drops item 6 (remote access with Tailscale), kept as a numbered
slot so references to the other items stay valid: the phone uses the
account server (28) instead.

Author: httpsphl

app/src/features/catalog/agency.test.tsx

@@ -33,7 +33,7 @@ describe("the Bot agency", () => {
 
     fireEvent.click(within(invite).getByRole("button", { name: "See all bots" }));
     const dialog = await screen.findByRole("dialog", { name: "Bot agency" });
-    expect(await within(dialog).findAllByRole("listitem")).toHaveLength(58);
+    expect(await within(dialog).findAllByRole("listitem")).toHaveLength(66);
   });
 
   test("a crew with only its chief invites the owner to pick bots, and a click adds one", async () => {
@@ -82,7 +82,7 @@ describe("the Bot agency", () => {
     await openCrewWithChief();
     fireEvent.click(screen.getByRole("button", { name: "Bot agency" }));
     const dialog = await screen.findByRole("dialog", { name: "Bot agency" });
-    expect(await within(dialog).findAllByRole("listitem")).toHaveLength(58);
+    expect(await within(dialog).findAllByRole("listitem")).toHaveLength(66);
 
     fireEvent.click(within(dialog).getByRole("button", { name: "Marketing & sales" }));
     expect(within(dialog).getAllByRole("listitem")).toHaveLength(18);
@@ -129,7 +129,7 @@ describe("the Bot agency", () => {
     expect(addCalls(fake)[0]).toMatchObject({ templateId: "code-reviewer" });
 
     fireEvent.click(within(dialog).getByRole("button", { name: "Back to all bots" }));
-    expect(within(dialog).getAllByRole("listitem")).toHaveLength(58);
+    expect(within(dialog).getAllByRole("listitem")).toHaveLength(66);
   });
 
   test("the same role twice gets another name", async () => {

app/src/i18n/en/catalog.ts

@@ -1,5 +1,6 @@
 import { base } from "./catalogBase";
 import { contentAndLearning } from "./catalogContent";
+import { design } from "./catalogDesign";
 import { engineering } from "./catalogEngineering";
 import { marketing } from "./catalogMarketing";
 import { product } from "./catalogProduct";
@@ -49,5 +50,5 @@ export const catalog = {
     pairs: "Works well with",
     technical: "What the bot is told when it starts",
   },
-  roles: { ...base, ...product, ...marketing, ...engineering, ...contentAndLearning },
+  roles: { ...base, ...product, ...marketing, ...engineering, ...contentAndLearning, ...design },
 };

app/src/i18n/en/catalogDesign.ts

@@ -0,0 +1,84 @@
+// Design roles (spec 26.3): what the owner reads about each.
+
+export const design = {
+  "brand-guardian": {
+    name: "Brand Guardian",
+    role: "Keeps everything on brand: writes a short brand guide from your material and checks pieces against it",
+    summary: "Writes a short brand guide from your material and checks that everything follows it",
+    about:
+      "Gathers your logo, colors, fonts and examples into a one-page brand guide, marking what it saw and what it suggests. Then it checks pages, posts and decks against the guide and lists exactly where each one drifts. It never invents a brand fact and never changes a rule without asking you.",
+    when: "When you have a brand and several people or bots make things for it.",
+    pairs: "Designer, who applies the visual fixes, and Writer, who applies the voice fixes.",
+  },
+  "ui-designer": {
+    name: "UI Designer",
+    role: "Builds the visual system of an interface: colors, type, spacing and components, shown on a style page",
+    summary:
+      "Builds the colors, type, spacing and buttons of an interface and shows them on one style page",
+    about:
+      "Chooses a small palette, a type scale and a spacing step, then builds the buttons, fields, cards and messages with all their states on one style page you can see. Every later screen reuses those parts, so the product looks like one thing.",
+    when: "At the start of a product, or when your screens stopped looking like they belong together.",
+    pairs:
+      "Designer, who makes the pages, Frontend Developer, who builds them, and Accessibility Reviewer.",
+  },
+  "ux-architect": {
+    name: "UX Architect",
+    role: "Plans how a product is organized and how people move through it: site maps, user flows and plain wireframes",
+    summary:
+      "Plans how a product is organized and how people move through it, with flows and simple wireframes",
+    about:
+      "Starts from who the people are and what they want to do, groups the content the way they think and draws each flow, including errors, empty states and going back. The wireframes are plain grey screens, so you judge the structure before any decoration. It lists the places people are likely to get lost.",
+    when: "Before you design or build a product, a site or a big new feature.",
+    pairs: "UX Researcher, to test the guesses, and UI Designer, who gives the wireframes a look.",
+  },
+  "accessibility-reviewer": {
+    name: "Accessibility Reviewer",
+    role: "Checks pages and designs so people with different abilities can use them, and explains each fix in plain words",
+    summary:
+      "Checks that your pages work for people with different abilities and explains each fix plainly",
+    about:
+      "Reads the code of a page and checks what can be read there: contrast, image descriptions, form labels, headings, keyboard use, visible focus and information carried by color alone. Each problem comes with who it affects and the exact fix. It says what it cannot check, such as a real screen reader, and never calls a page certified.",
+    when: "Before you launch a page, and after a big change to one.",
+    pairs:
+      "Frontend Developer, who applies the fixes, and UI Designer, who plans for it from the start.",
+  },
+  "presentation-designer": {
+    name: "Presentation Designer",
+    role: "Turns your message into a clear slide deck: the story, one idea per slide and a clean look, shown as screens",
+    summary:
+      "Turns what you want to say into a clear slide deck, one idea per slide, that you can see take shape",
+    about:
+      "Writes the story first, then designs each slide as a screen you see appear in the design area: one idea, a title that states the point, large text and one picture or chart at most. The details go into speaker notes. The slides are screens, not a PowerPoint file.",
+    when: "When you have to present, pitch or teach something and want it clear.",
+    pairs: "Researcher, for facts, Writer, for the words, and Infographic Designer, for charts.",
+  },
+  "infographic-designer": {
+    name: "Infographic Designer",
+    role: "Turns numbers and ideas into clear charts and infographics, drawn as screens, without bending the data",
+    summary: "Turns numbers and ideas into clear charts and infographics, without bending the data",
+    about:
+      "Checks where the numbers come from, then picks the form that makes the message clear and draws it as a screen: honest scales, direct labels, few colors, the source and the date on the picture. It tells you what the picture does not show and never invents a number to fill a gap.",
+    when: "When a table or a report is hard to read and a picture would do it better.",
+    pairs: "Data Analyst, for the numbers, and Presentation Designer, to put it in a deck.",
+  },
+  "image-prompt-writer": {
+    name: "Image Prompt Writer",
+    role: "Writes clear, consistent descriptions that you paste into an image or video generator, and refines them from the results",
+    summary:
+      "Writes clear, consistent descriptions for the image or video generator you use, and refines them",
+    about:
+      "Does not make images itself: it writes the descriptions you paste into the tool you use, with the subject, setting, style, light and framing, in two or three variations. For a set that must look alike, it writes one shared style paragraph. Show it what came out and it changes only the part that caused the problem.",
+    when: "When you use an image or video generator and your results are random or inconsistent.",
+    pairs: "Brand Guardian, to keep the style on brand, and Social Media, for the posts.",
+  },
+  "design-critic": {
+    name: "Design Critic",
+    role: "Reviews screens and pages with a fresh eye and gives a short, ordered list of what to improve, and why",
+    summary:
+      "Looks at your screens with a fresh eye and tells you, in order, what to improve and why",
+    about:
+      "Reads the goal and the screen files and tells you the three things that matter most first: what the eye sees first, whether the main action is clear, spacing, type, contrast and how it works on a small screen. It separates clear problems from matters of taste, says what to keep and does not redesign unless you ask.",
+    when: "When a screen feels off and you cannot say why, or before you ship.",
+    pairs: "Designer, who makes the changes, and Accessibility Reviewer, for access.",
+  },
+};

app/src/i18n/es/catalog.ts

@@ -1,6 +1,7 @@
 import type { Messages } from "../en";
 import { base } from "./catalogBase";
 import { contentAndLearning } from "./catalogContent";
+import { design } from "./catalogDesign";
 import { engineering } from "./catalogEngineering";
 import { marketing } from "./catalogMarketing";
 import { product } from "./catalogProduct";
@@ -46,5 +47,5 @@ export const catalog: Messages["catalog"] = {
     pairs: "Combina bien con",
     technical: "Lo que recibe el bot cuando empieza",
   },
-  roles: { ...base, ...product, ...marketing, ...engineering, ...contentAndLearning },
+  roles: { ...base, ...product, ...marketing, ...engineering, ...contentAndLearning, ...design },
 };

app/src/i18n/es/catalogDesign.ts

@@ -0,0 +1,87 @@
+import type { design as en } from "../en/catalogDesign";
+
+export const design: typeof en = {
+  "brand-guardian": {
+    name: "Guardián de la marca",
+    role: "Mantiene todo fiel a la marca: escribe una guía breve con tu material y revisa las piezas con ella",
+    summary: "Escribe una guía breve de la marca con tu material y revisa que todo la siga",
+    about:
+      "Reúne tu logo, colores, fuentes y ejemplos en una guía de una página, marcando lo que vio y lo que sugiere. Luego revisa páginas, publicaciones y presentaciones con la guía y lista exactamente dónde se aparta cada una. Nunca inventa un dato de la marca ni cambia una regla sin preguntarte.",
+    when: "Cuando tienes una marca y varias personas o bots crean cosas para ella.",
+    pairs: "Diseñador, que aplica los ajustes visuales, y Redactor, que aplica los ajustes de voz.",
+  },
+  "ui-designer": {
+    name: "Diseñador de interfaz",
+    role: "Construye el sistema visual de una interfaz: colores, fuentes, espaciado y componentes, en una página de estilo",
+    summary:
+      "Construye colores, fuentes, espaciado y botones de una interfaz y los muestra en una página de estilo",
+    about:
+      "Elige una paleta pequeña, una escala de fuentes y un paso de espaciado, y construye botones, campos, tarjetas y avisos con todos sus estados en una página de estilo que ves. Cada pantalla siguiente reutiliza esas piezas, y el producto parece una sola cosa.",
+    when: "Al empezar un producto, o cuando tus pantallas dejaron de parecer de la misma familia.",
+    pairs:
+      "Diseñador, que hace las páginas, Desarrollador front-end, que las construye, y Revisor de accesibilidad.",
+  },
+  "ux-architect": {
+    name: "Arquitecto de experiencia",
+    role: "Planifica cómo se organiza un producto y cómo se mueve la gente por él: mapas, flujos y bocetos simples",
+    summary:
+      "Planifica cómo se organiza un producto y cómo lo recorre la gente, con flujos y bocetos simples",
+    about:
+      "Parte de quiénes son las personas y qué quieren hacer, agrupa el contenido como ellas lo piensan y dibuja cada flujo, con errores, pantallas vacías y el volver atrás. Los bocetos son pantallas grises y simples, para que juzgues la estructura antes de cualquier adorno. Lista los lugares donde la gente puede perderse.",
+    when: "Antes de diseñar o construir un producto, un sitio o una novedad grande.",
+    pairs:
+      "Investigador de usuarios, para probar las hipótesis, y Diseñador de interfaz, que da aspecto a los bocetos.",
+  },
+  "accessibility-reviewer": {
+    name: "Revisor de accesibilidad",
+    role: "Comprueba que páginas y diseños sirvan a personas con distintas capacidades y explica cada arreglo en palabras sencillas",
+    summary:
+      "Comprueba que tus páginas funcionen para personas con distintas capacidades y explica cada arreglo",
+    about:
+      "Lee el código de una página y comprueba lo que se puede ver en él: contraste, descripción de imágenes, etiquetas de campos, títulos, uso con teclado, foco visible e información dada solo por el color. Cada problema trae a quién afecta y el arreglo exacto. Dice lo que no puede comprobar, como un lector de pantalla real, y nunca llama certificada a una página.",
+    when: "Antes de lanzar una página y después de un cambio grande en ella.",
+    pairs:
+      "Desarrollador front-end, que aplica los arreglos, y Diseñador de interfaz, que lo planifica desde el principio.",
+  },
+  "presentation-designer": {
+    name: "Diseñador de presentaciones",
+    role: "Convierte tu mensaje en una presentación clara: la historia, una idea por diapositiva y un aspecto limpio, en pantallas",
+    summary:
+      "Convierte lo que quieres decir en una presentación clara, una idea por diapositiva, que ves nacer",
+    about:
+      "Escribe primero la historia y luego diseña cada diapositiva como una pantalla que ves aparecer en el área de diseño: una idea, un título que dice el punto, texto grande y como mucho una imagen o gráfico. Los detalles van a las notas del orador. Las diapositivas son pantallas, no un archivo de PowerPoint.",
+    when: "Cuando tienes que presentar, proponer o enseñar algo y quieres claridad.",
+    pairs:
+      "Investigador, para los datos, Redactor, para las palabras, y Diseñador de infografías, para los gráficos.",
+  },
+  "infographic-designer": {
+    name: "Diseñador de infografías",
+    role: "Convierte números e ideas en gráficos e infografías claros, dibujados como pantallas, sin torcer los datos",
+    summary: "Convierte números e ideas en gráficos e infografías claros, sin torcer los datos",
+    about:
+      "Comprueba de dónde vienen los números, elige la forma que aclara el mensaje y la dibuja como pantalla: escalas honestas, etiquetas directas, pocos colores, la fuente y la fecha en la imagen. Dice lo que la imagen no muestra y nunca inventa un número para tapar un hueco.",
+    when: "Cuando una tabla o un informe es difícil de leer y una imagen lo resolvería mejor.",
+    pairs:
+      "Analista de datos, para los números, y Diseñador de presentaciones, para llevarlo a una presentación.",
+  },
+  "image-prompt-writer": {
+    name: "Redactor de descripciones de imagen",
+    role: "Escribe descripciones claras y coherentes para pegar en un generador de imágenes o vídeo y las mejora con los resultados",
+    summary:
+      "Escribe descripciones claras y coherentes para el generador de imágenes o vídeo que usas y las mejora",
+    about:
+      "No hace las imágenes: escribe las descripciones que pegas en la herramienta que usas, con el tema, el escenario, el estilo, la luz y el encuadre, en dos o tres versiones. Para un conjunto que debe verse igual, escribe un párrafo de estilo para repetir. Enséñale el resultado y cambia solo la parte que causó el problema.",
+    when: "Cuando usas un generador de imágenes o vídeo y los resultados salen al azar o distintos entre sí.",
+    pairs:
+      "Guardián de la marca, para mantener el estilo de la marca, y Redes sociales, para las publicaciones.",
+  },
+  "design-critic": {
+    name: "Crítico de diseño",
+    role: "Revisa pantallas y páginas con ojos nuevos y entrega una lista corta y ordenada de qué mejorar y por qué",
+    summary: "Mira tus pantallas con ojos nuevos y te dice, en orden, qué mejorar y por qué",
+    about:
+      "Lee el objetivo y los archivos de la pantalla y te dice primero las tres cosas que más importan: qué ve primero el ojo, si la acción principal está clara, el espaciado, las fuentes, el contraste y cómo funciona en una pantalla pequeña. Separa lo que es un problema claro de lo que es gusto, dice qué conservar y no rehace la pantalla si no se lo pides.",
+    when: "Cuando una pantalla se siente rara y no sabes decir por qué, o antes de publicar.",
+    pairs: "Diseñador, que hace los cambios, y Revisor de accesibilidad, para el acceso.",
+  },
+};

app/src/i18n/pt-BR/catalog.ts

@@ -1,6 +1,7 @@
 import type { Messages } from "../en";
 import { base } from "./catalogBase";
 import { contentAndLearning } from "./catalogContent";
+import { design } from "./catalogDesign";
 import { engineering } from "./catalogEngineering";
 import { marketing } from "./catalogMarketing";
 import { product } from "./catalogProduct";
@@ -46,5 +47,5 @@ export const catalog: Messages["catalog"] = {
     pairs: "Combina bem com",
     technical: "O que o bot recebe quando começa",
   },
-  roles: { ...base, ...product, ...marketing, ...engineering, ...contentAndLearning },
+  roles: { ...base, ...product, ...marketing, ...engineering, ...contentAndLearning, ...design },
 };