Iniciar sesión Empezar gratis

Producir imágenes propias para páginas de instrucciones

Las páginas de instrucciones se juzgan por si las imágenes coinciden con lo que el lector tiene delante, y las fotos de banco de imágenes o las capturas de marketing del fabricante suspenden esa prueba a simple vista. Los equipos sí hacen sus propias capturas, pero luego no anotan nada sobre cómo ni dónde las tomaron, así que cuando la interfaz se mueve la página no se puede reparar sin rehacer el recorrido entero. Capturar es la parte barata; el método existe para que la segunda captura salga barata también.

CATEGORÍA
Producción de contenido
FORMATO
original-visuals-for-procedural-content.md
PASOS
7
PRECIO
Gratis, sin cuenta
CUÁNDO USAR ESTO

Úsalo cuando una página de procedimiento dependa de capturas o diagramas que deben ser exactos ahora y reparables cuando cambie la interfaz.

El archivo de la habilidad

original-visuals-for-procedural-content.md
---
name: original-visuals-for-procedural-content
description: Úsalo cuando una página de procedimiento dependa de capturas o diagramas que deben ser exactos ahora y reparables cuando cambie la interfaz.
---

# Producir imágenes propias para páginas de instrucciones

Las páginas de instrucciones se juzgan por si las imágenes coinciden con lo que el lector tiene delante, y las fotos de banco de imágenes o las capturas de marketing del fabricante suspenden esa prueba a simple vista. Los equipos sí hacen sus propias capturas, pero luego no anotan nada sobre cómo ni dónde las tomaron, así que cuando la interfaz se mueve la página no se puede reparar sin rehacer el recorrido entero. Capturar es la parte barata; el método existe para que la segunda captura salga barata también.

## Qué necesitas antes

- acceso al producto o proceso real en la versión que describe la página
- un montaje de captura fijo: un ancho de ventana, un nivel de zoom, un tema, una cuenta de demostración
- la lista de pasos acordada con la que deben coincidir las imágenes, cerrada antes de empezar a capturar
- un sitio donde guardar los archivos fuente editables, no solo las imágenes exportadas

## Método

1. Fija el entorno de captura antes de tomar nada: un ancho, un zoom, un tema, una cuenta. Las capturas hechas a anchos distintos no se pueden repetir de forma coherente y parecen sacadas de productos diferentes.
2. Puebla la cuenta de demostración con datos verosímiles. Los estados vacíos y el texto de relleno evidente hacen que el lector dude del recorrido, y los datos reales de clientes no se pueden publicar en absoluto.
3. Captura todos los pasos, incluidos los que parecen demasiado obvios para necesitarlo. La captura que falta siempre es el paso en el que el lector se atasca, y volver a por una sola imagen cuesta más que tomarla ahora.
4. Anota en una capa aparte y conserva el archivo fuente. Las flechas incrustadas en una exportación aplanada obligan a recapturar todo cuando una etiqueta se mueve diez píxeles.
5. Recorta a la zona que importa en lugar de a la ventana entera. Las capturas de ventana completa se encogen hasta ser ilegibles en el móvil, que es donde se lee la mayor parte del tráfico de instrucciones.
6. Escribe el texto alternativo describiendo lo que el lector debería ver, no nombrando el archivo. "Pestaña de facturación con el plan anual seleccionado" sirve; "captura de los ajustes" no.
7. Registra la fecha de captura, la versión del producto y la cuenta usada junto a la página. Sin ese registro la actualización se convierte en un proyecto nuevo en lugar de en una edición.

## Qué produce esto

Un conjunto versionado de imágenes anotadas con archivos fuente editables, texto alternativo escrito y un registro de captura que indica versión del producto y fecha.

## Dónde falla esto

- Capturar solo con una ventana de escritorio ancha, de modo que las imágenes resultan ilegibles en los móviles que usa la mayoría de lectores
- Publicar capturas con datos reales de cuentas o con nombres internos, un problema de privacidad que sobrevive a la página
- Aplanar las anotaciones en la exportación y tirar el archivo fuente, con lo que cualquier retoque de la interfaz obliga a recapturar la secuencia entera

---

De la biblioteca de habilidades de QuQi - https://www.quqi.io/es/skills/original-visuals-for-procedural-content
Descarga gratis · sin cuenta, sin correo

Qué necesitas antes

  • acceso al producto o proceso real en la versión que describe la página
  • un montaje de captura fijo: un ancho de ventana, un nivel de zoom, un tema, una cuenta de demostración
  • la lista de pasos acordada con la que deben coincidir las imágenes, cerrada antes de empezar a capturar
  • un sitio donde guardar los archivos fuente editables, no solo las imágenes exportadas

Método

  1. 01 Fija el entorno de captura antes de tomar nada: un ancho, un zoom, un tema, una cuenta. Las capturas hechas a anchos distintos no se pueden repetir de forma coherente y parecen sacadas de productos diferentes.
  2. 02 Puebla la cuenta de demostración con datos verosímiles. Los estados vacíos y el texto de relleno evidente hacen que el lector dude del recorrido, y los datos reales de clientes no se pueden publicar en absoluto.
  3. 03 Captura todos los pasos, incluidos los que parecen demasiado obvios para necesitarlo. La captura que falta siempre es el paso en el que el lector se atasca, y volver a por una sola imagen cuesta más que tomarla ahora.
  4. 04 Anota en una capa aparte y conserva el archivo fuente. Las flechas incrustadas en una exportación aplanada obligan a recapturar todo cuando una etiqueta se mueve diez píxeles.
  5. 05 Recorta a la zona que importa en lugar de a la ventana entera. Las capturas de ventana completa se encogen hasta ser ilegibles en el móvil, que es donde se lee la mayor parte del tráfico de instrucciones.
  6. 06 Escribe el texto alternativo describiendo lo que el lector debería ver, no nombrando el archivo. "Pestaña de facturación con el plan anual seleccionado" sirve; "captura de los ajustes" no.
  7. 07 Registra la fecha de captura, la versión del producto y la cuenta usada junto a la página. Sin ese registro la actualización se convierte en un proyecto nuevo en lugar de en una edición.

Qué produce esto

Un conjunto versionado de imágenes anotadas con archivos fuente editables, texto alternativo escrito y un registro de captura que indica versión del producto y fecha.

Dónde falla esto

  • Capturar solo con una ventana de escritorio ancha, de modo que las imágenes resultan ilegibles en los móviles que usa la mayoría de lectores
  • Publicar capturas con datos reales de cuentas o con nombres internos, un problema de privacidad que sobrevive a la página
  • Aplanar las anotaciones en la exportación y tirar el archivo fuente, con lo que cualquier retoque de la interfaz obliga a recapturar la secuencia entera

Usa esta skill en tu propia IA

El archivo es markdown simple, con el nombre y el disparador en su frontmatter. Cuando un asistente sabe cargar skills por su cuenta, es ese frontmatter lo que lee para decidir que esta le aplica.

Claude Code Guárdala como ~/.claude/skills/original-visuals-for-procedural-content/SKILL.md y Claude la carga solo cuando lo que haces coincide con el disparador. Ponla en .claude/skills dentro de un proyecto si la debe tener todo el equipo.
Claude Sube el archivo en la sección de skills de tus ajustes. Una vez ahí se aplica solo en cualquier conversación donde encaje el disparador, sin que tengas que acordarte.
ChatGPT No hay un formato de skills donde instalarla, así que pega el contenido del archivo en las instrucciones de un Proyecto o de un GPT personalizado. Así se aplica a todos los chats de ese proyecto y no solo a aquel donde lo pegaste.
Cualquier otro Pega el markdown en el chat antes de tu pregunta. Funciona en cualquier asistente, solo hay que volver a pegarlo cada vez.

Más en Producción de contenido