Auditoría de patrones: antes de diseñar algo nuevo, mira lo que el producto ya tiene, quién lo posee y cómo funciona

El caso, en movimiento

01 / 05La carpetaInventario, capturas y mapa de responsables

Lo que ya sabes del sistema, antes de salir a buscar lo que no sabes.

Sistema-de-diseno / Auditorias / filtro-en-linea

• MDinventario-componentes.md
• PNGresultados-busqueda-actual.png
• CSVresponsables-por-pantalla.csv

3 archivos

02 / 05ClaudePrimero tu inventario, después el producto

Revisa lo que hay en la lista y luego busca en la biblioteca, en el código y en los datos de uso.

Claude lee las variantes del patrón

• ✓Chips
• ✓Controles segmentados
• ✓Desplegables de filtro
• ✓Barras laterales con facetas

03 / 05TúSi te toca decidir, pregunta

Si el patrón nuevo cambia otro, Claude pregunta antes de dar la recomendación.

Claude pregunta

¿Incluyo también las pantallas que están a medio migrar?

Sí, con su estadoNo, solo las publicadas

04 / 05La auditoríaCada versión, con su responsable

Se ve de un vistazo cuántas hay, quién las mantiene y cuál se usa más.

filtros en línea · cinco pantallas

Elementos guardados	verde	de la biblioteca, selección múltiple
Resultados de búsqueda	amarillo	de la biblioteca, selección única
Informes	amarillo	de la biblioteca, poco uso
Panel de pedidos	rojo	hecho a mano

05 / 05SkillsGuárdalo como skill

Cualquier diseñador ejecuta la misma comprobación diciendo solo el nombre del patrón.

Claude lee la skill /auditar-patron

• ✓Recibe el nombre de un patrón
• ✓Busca en Figma, en el código y en el uso
• ✓Escribe la comparación lado a lado
• ✓Recomienda qué reutilizar

Configuración

Prueba un plugin

El plugin de Design de Anthropic trae /design-handoff y otras skills del sistema de diseño, ya pensadas para inventariar componentes y cruzar dónde viven. Si tu administrador gestiona los plugins y todavía no está en tu cuenta, sáltatelo: nada de lo que sigue lo necesita.

Conecta tus herramientas

Prepara la carpeta de trabajo

Arrastra a una carpeta la exportación de Figma del sistema de diseño, las capturas de las pantallas que ya conoces y el mapa de responsables del producto, y añádela a Claude con Añadir carpeta. Claude lee de ahí y deja la auditoría en la misma carpeta. Si la haces a menudo, guárdala como un proyecto desde la carpeta del sistema de diseño: el inventario y el mapa de responsables se quedan en cada auditoría.

El prompt

Copia esto en Claude, con la carpeta Sistema-de-diseno / Auditorias / filtro-en-linea añadida:

Antes de proponer un patrón nuevo de filtro en línea para la página de resultados de búsqueda, encuentra todas las pantallas de nuestro producto que usen algo parecido (chips, controles segmentados, desplegables de filtro, barras laterales con facetas). Para cada una, enséñame una captura o un enlace de Figma, dime qué equipo la mantiene y cómo ha funcionado (uso o conversión, si lo tenemos). Dime cuál reutilizar y por qué.

Lo que te deja: la auditoría

Un ejemplo con datos inventados, para que veas el formato:

AUDITORÍA · filtro en línea (datos inventados)
Buscado en: biblioteca de Figma, inventario de componentes y 90 días de uso

Cinco pantallas ya filtran en línea (cuatro con componentes de la biblioteca, una hecha a mano)
  Elementos guardados  · FilterChip / Group · selección múltiple · equipo Cuenta · 2.º en uso
  Resultados           · FilterChip       · selección única   · equipo Búsqueda
  Informes             · desplegable      · selección única   · equipo Datos
  Panel de pedidos     · a mano           · sin biblioteca    · equipo Pedidos

Recomendación: reutilizar FilterChip / Group de Elementos guardados.
Motivo: única de selección múltiple de las cinco y la segunda más usada.

Por qué funciona

• Prompt1

  Nombra las variantes que buscar. Chips, controles segmentados, desplegables y facetas son la misma idea con nombres distintos: nombrarlos amplía la búsqueda.

• Prompt2

  Pide el responsable. De todas formas vas a tener que hablar con ese equipo, y la auditoría sirve también como lista de interesados.

• Prompt3

  Apoya la recomendación en datos. «Cómo ha funcionado» convierte la propuesta de un gusto personal en evidencia para la crítica de diseño.

• Fuente

  Pon tu lista de referencia en la carpeta. Claude parte de vuestro inventario de componentes y luego revisa el producto real para ver qué se ha desviado.

Para que el borrador salga mejor

• Practicar

  Pide el plan de consolidación. Añade «si hay que reutilizar una, dime qué otras pantallas deberían migrar a ella» y la auditoría pasa a ser un punto de la hoja de ruta del sistema.

• Practicar

  Añade una captura del destino. Pon una captura de dónde irá el patrón y Claude valora el encaje, no solo el precedente.

Haz que Claude trabaje para ti

La skill del plugin es un punto de partida: se ajusta a vuestras prácticas con unos minutos de conversación. Así la próxima auditoría lleva ya vuestro inventario, el mapa de responsables y vuestras búsquedas de rendimiento.

Convierte lo que hemos hecho en esta tarea en una skill, o edita la skill /design-handoff con mis correcciones.

Hazlo repetible

Que sea el primer paso por defecto

Esta auditoría debería hacerse antes de que ningún patrón nuevo entre en revisión. Guárdala como una skill que todo el equipo de diseño pueda invocar con una línea, cambiando solo el nombre del patrón, para que «¿hemos mirado qué hay ya?» deje de ser una sorpresa en la semana de crítica.

Guarda esto como /auditar-patron. Debe recibir el nombre de un patrón, buscar en Figma, en el código y en Amplitude las versiones que ya existen y escribir la comparación lado a lado, con una recomendación de reutilización, en Sistema-de-diseno/Auditorias/<patron>.md.

Compártelo con tu equipo

Tu /auditar-patron lleva ya el inventario de componentes, el mapa de responsables y las búsquedas de rendimiento. Compártelo para que cada diseñador haga la misma comprobación antes de la crítica y el sistema de diseño deje de crecer con cinco maneras de hacer lo mismo.

Qué cambia para la crítica de diseño

Tienes cada versión existente del patrón inventariada con su responsable y su rendimiento, y una recomendación de cuál reutilizar: la decisión se apoya en evidencia, no en preferencias. Lo hiciste con un patrón de filtro; el mismo enfoque vale para patrones de navegación, estados vacíos y formularios, y cada uno se convierte en una skill que el equipo ejecuta antes de proponer nada nuevo.

Termínalo donde vive el archivo

De cara al futuro

En una agencia de aquí, así se usa

En una agencia, el sistema de diseño de un cliente lo han tocado varias manos: tu equipo, el del cliente, otra agencia anterior. Antes de proponer un componente nuevo, la pregunta que nadie se hace es si ya existe. Con el inventario y la lista de responsables en la carpeta, la respuesta llega en minutos y la propuesta a tu cliente sale mejor: reutilizar lo que ya funciona cuesta menos y es más fácil de mantener.

Antes de proponer un patrón nuevo de [formulario de contacto en varios pasos] para [nombre del cliente], busca en el inventario y en las capturas adjuntas todas las pantallas que usen algo parecido. Dime para cada una qué componente es, si es de la biblioteca o está hecho a mano y quién la mantiene, si lo sabemos. Recomienda cuál reutilizar y qué pantallas habría que migrar. Si falta información, dime cuál.

Decides tú qué se propone al cliente. Claude inventaría y compara; la recomendación final es de la persona de diseño que la defiende.