Referencia completa para principiantes del Editor de Traducción de DevSpeak. Documenta cada control: la barra de funciones con Búsqueda Web, Salida (Prosa/XML), Modelo y Proyecto; los parámetros Público Objetivo, Contexto Técnico, Formato de Salida y Tono; las acciones Optimizar, Traducir Texto, IA Rápida y Detener Generación; el cajón de adjuntos (PNG, JPG, WEBP, PDF, TXT, MD, con límites de tamaño por archivo y por petición); los modos de salida Vista previa, Dividido y Código; el panel Iterar y Refinar; y la paleta de comandos, con valores por defecto y niveles de suscripción.
Todos los Controles del Editor de Traducción
El Editor de Traducción es donde ocurre la mayor parte del trabajo en DevSpeak.
Parece un editor de texto de dos paneles, pero casi todas las superficies que
los rodean cambian lo que recibe el modelo, a veces de forma drástica. Mover el
deslizador de tono cuatro puntos puede convertir una reescritura de un párrafo
en una especificación de doce secciones.
Este tutorial recorre la interfaz control por control. De cada uno obtienes qué
hace, cuál es su valor por defecto y una razón concreta para cambiarlo.
Lo que Aprenderás
ensayo y error
bloqueo
Requisitos Previos
a lado
Tiempo Estimado
~12 minutos
Paso 1 — Ubícate en la Cabecera y la Barra Lateral
La cabecera contiene controles de navegación y de cuenta, no de traducción. De
izquierda a derecha: el título Editor de Traducción, una etiqueta de guardado
que alterna entre _Sin guardar_, _Guardando…_, _Guardado_ y _Error al guardar_,
enlaces a Panel y Documentación, un selector de idioma que alterna EN / ES, y
el menú de tu avatar.
El menú del avatar tiene tres entradas: Ajustes de la Cuenta, un interruptor
Modo Claro / Modo Oscuro que persiste entre sesiones, y Cerrar Sesión.
La barra lateral izquierda cambia de espacio de trabajo. Se colapsa a una
columna de iconos con el chevron de su base.
| Entrada | Qué abre | Plan requerido |
| --------------------- | ------------------------------------------------------- | ------------------------------------------------------------------ |
| Traducir Texto | Este editor | GRATIS |
| Traducir Archivos | Trabajos de traducción de documentos por lotes | VIBECODER |
| Proyectos | Context Projects: instrucciones y activos reutilizables | VIBECODER |
| Historial | Tus traducciones guardadas | GRATIS |
| Notas | El espacio de trabajo de Notas | ENTERPRISE |
| Claves API | Gestión de claves de la API pública | Todos los planes (GRATIS y VIBECODER: 1 clave, 50 solicitudes/mes) |
Claves API es un acceso directo. El lugar principal para crear y gestionar
tus claves de API, y para conectar tu propia clave de proveedor, es
Ajustes de la Cuenta → Credenciales.
Las entradas bloqueadas siguen visibles con una insignia PRO. Al hacer clic
se abre el modal de precios en lugar de fallar en silencio: es deliberado, para
que veas qué existe antes de pagarlo.
Bajo la navegación hay una terminal de Estado del Sistema que transmite en vivo
lo que hace el editor. Es la forma más rápida de distinguir una generación lenta
de una detenida.
Paso 2 — Configura la Barra de Funciones
La barra de funciones es la fila justo encima de los cuatro parámetros. Estos
cuatro controles cambian _cómo_ se ejecuta la petición, no _qué_ dice el
documento. Los cuatro se desactivan mientras hay una generación en curso.
Búsqueda Web es un interruptor, apagado por defecto. Encendido, DevSpeak
recupera resultados web en vivo y ancla la siguiente generación en ellos.
Enciéndelo cuando la petición dependa de algo que cambió hace poco: la versión
mayor actual de una librería, un RFC recién publicado, una página de precios.
Déjalo apagado para trabajo de dominio interno, donde la recuperación añade
latencia sin añadir precisión.
Salida es un selector de dos opciones: Prosa o XML. Prosa es el
valor por defecto y produce Markdown para personas. XML produce un documento
determinista y legible por máquinas; úsalo cuando el resultado lo consuma un
script y no una persona.
Modelo elige el modelo de la siguiente generación. El valor por defecto es
Auto (recomendado), que elige un modelo para cada petición sin que tengas
que hacerlo tú. Si quieres un modelo concreto, abre la lista y fíjalo; la lista
muestra los modelos disponibles para tu cuenta, agrupados por la empresa que los
construyó.
El control cerrado muestra la marca de la familia del modelo seleccionado junto
a la etiqueta Modelo, para que veas de un vistazo quién construyó el modelo
que vas a ejecutar. Las marcas no aparecen dentro de la lista desplegada,
porque un desplegable nativo no puede mostrar iconos en sus opciones.
Tu elección persiste entre sesiones. Si has conectado tu propia clave de
proveedor en Ajustes de la Cuenta → Credenciales, aparece un grupo adicional
Tu proveedor justo después del grupo Automático, antes de los grupos de
modelos.
No todos los modelos leen imágenes. Si vas a adjuntar una captura o un
diagrama, deja el selector en Auto o fija un modelo que sepas que lee
imágenes: un modelo fijado que no lee imágenes rechaza la petición en lugar de
ignorar el adjunto en silencio.
Proyecto adjunta un Context Project a la petición, de modo que sus
instrucciones y activos guardados se aportan como grounding sin volver a subir
nada. Este control requiere VIBECODER y solo aparece cuando ya has creado al
menos un proyecto: si no lo ves, esa es la razón.
Paso 3 — Configura los Cuatro Parámetros de Traducción
Estos cuatro controles moldean el documento en sí. Son los que conviene acertar.
Público Objetivo — por defecto Dev Senior. Elige entre _Dev Junior_,
_Dev Senior_, _Líder Técnico_, _SRE_ e _Ingeniero de Datos_. Cambia cuánto se
explica, no qué se cubre. Una especificación para Dev Junior define términos y
detalla el razonamiento; una para Líder Técnico abre con compromisos y
secuenciación.
Contexto Técnico — por defecto Backend. Elige entre _Backend_,
_Frontend_, _Móvil_, _Datos/ML_ y _DevOps_. Es el control que se confunde con la audiencia.
La audiencia decide quién lo lee; el contexto decide qué capa se discute. La
misma petición de inicio de sesión produce una discusión de sesiones y
almacenamiento de tokens bajo Backend, y una de estado de componentes y
redirecciones bajo Frontend.
Formato de Salida — por defecto Especificación Técnica. Siete opciones:
| Formato | Úsalo cuando |
| -------------------------- | -------------------------------------------------------------- |
| Especificación Técnica | Necesitas un documento que describa el cambio completo |
| Tickets de Jira | El trabajo debe dividirse en elementos asignables por separado |
| Diseño de API | El entregable son endpoints, payloads y códigos de estado |
| RFC | La decisión debe argumentarse y revisarse antes de construirse |
| Modelo de Datos | El entregable son entidades, campos y relaciones |
| Prompt | La salida alimentará a otro sistema de IA |
| Optimizar | Quieres mejorar tu texto, no convertirlo en un documento |
Tono — un deslizador de 0 a 100, por defecto 50, con la etiqueta
_Conciso_ a la izquierda y _Detallado_ a la derecha, y una lectura porcentual en
vivo.
El tono no es un dial continuo. Hay un corte de comportamiento tajante en 50:
corrige el registro y devuelve algo de longitud parecida a lo que le diste.
No inventa secciones.
encabezados, criterios de aceptación y casos límite que nunca mencionaste. El
número exacto controla entonces cuánto detalle recibe cada sección.
Si una traducción vuelve pareciendo una versión ligeramente editada de tu
entrada, revisa este deslizador antes de culpar al modelo.
Punto de Control
Antes de ejecutar nada, confirma que puedes señalar:
numérica
Paso 4 — Escribe y Optimiza tu Entrada
El panel izquierdo se titula Entrada No Técnica. Su cabecera lleva un
enlace Limpiar Campos, un contador Palabras en vivo, el botón
Optimizar, un botón para deshacer, otro para copiar y otro para
cortar el texto de entrada, y la pista de teclado ⌘↵ para generar. La
cabecera se adapta al ancho del propio panel, no al de la ventana: al estrechar
el divisor, los elementos secundarios desaparecen por orden de importancia y
Optimizar, deshacer, copiar y cortar se mantienen en una sola línea.
El botón de cortar (el icono de tijeras) hace copiar y limpiar en un solo
paso: escribe la entrada en tu portapapeles y vacía el cuadro. Si el navegador
rechaza el acceso al portapapeles, el texto se queda donde está, así que cortar
nunca pierde trabajo.
En cuanto escribes algo, aparece una pequeña ✕ en la esquina superior
derecha del área de texto. Vacía el cuadro de texto y nada más, y devuelve el
cursor para que puedas empezar de nuevo al instante. Limpiar Campos, en la
cabecera, es la acción mayor: pide confirmación y reinicia todo el espacio de
trabajo — texto, adjuntos y la salida generada. El botón Limpiar del grupo
de acciones (Paso 5) hace lo mismo. Tras cualquiera de ellas, el botón de
deshacer o ⌘Z recupera el texto de entrada; los adjuntos y la salida generada
no se pueden recuperar.
Escribe de forma informal. De eso trata todo el producto:
``text
We need users to be able to sign in with their Google account
instead of making another password. Should work on mobile too.
`
Optimizar es una operación distinta de traducir, y es la distinción más útil
del editor. Reescribe tu entrada en el sitio: mejor gramática, tono más firme,
frases más claras, mismo significado. No produce una especificación y no toca el
panel de salida. Úsalo cuando tus notas fueron dictadas, escritas con prisa o
redactadas en tu segundo idioma. Optimizar está disponible en todos los planes.
No hay un límite estricto de caracteres, pero pasados unos 10.000 DevSpeak
interrumpe con un aviso de tamaño y ofrece resumir la entrada primero. Ese
umbral existe porque las entradas muy largas diluyen las instrucciones en lugar
de enriquecerlas.
Adjuntos
El cajón Adjuntos está bajo el área de texto y aparece abierto por
defecto. Arrastra archivos o haz clic para explorar. Los formatos admitidos son
PNG, JPG, WEBP, PDF, TXT y MD. Cada archivo puede pesar hasta 10 MiB,
pero una sola petición admite como máximo 10 archivos y unos **3,1 MB de
adjuntos en total**. Unos pocos archivos
grandes alcanzan el total antes que el límite por archivo, y DevSpeak te pide
entonces que quites uno. Cada archivo preparado aparece como una ficha con su
propio botón de eliminar.
Los adjuntos son contexto, no instrucciones. Un PDF del contrato de API actual o
una captura de la pantalla existente le dan al modelo los detalles que tu prosa
deja implícitos. Recuerda la restricción de visión del Paso 2: una imagen solo
ayuda si el modelo seleccionado puede leerla.
Paso 5 — Ejecuta la Traducción
El grupo de acciones está a la derecha de la fila de parámetros.
Traducir Texto es la acción principal y ejecuta la traducción completa. El
atajo ⌘↵ (Ctrl+Enter en Windows y Linux) hace lo mismo desde dentro del área
de texto. El icono de flecha circular a su lado repite la misma generación,
útil tras ajustar un solo parámetro.
IA Rápida es un interruptor, no un botón. Encendido, DevSpeak vuelve a
traducir automáticamente poco después de que dejes de cambiar algo:
escribir, mover el tono, cambiar de formato. Convierte el editor en una vista
previa en vivo. Apágalo con entradas largas, donde cada pulsación encolaría otra
generación.
Detener Generación sustituye a IA Rápida mientras hay una generación en curso.
Aborta la petición de inmediato.
Limpiar borra la entrada, los adjuntos y el resultado. Pide confirmación
primero, porque después solo se puede recuperar el texto de entrada (con
deshacer); los adjuntos y el resultado no.
Mientras el modelo trabaja, el panel de salida muestra un progreso por fases, y
el pie registra Latencia en milisegundos y Estado como _Procesando_,
_Refinando_ o _Inactivo_.
Paso 6 — Lee y Edita la Salida
El panel derecho arranca en Esperando señal de generación... y se llena cuando
llega la traducción. Su barra de herramientas tiene cuatro elementos.
La etiqueta de formato repite el Formato de Salida que seleccionaste. El
indicador Sintaxis informa de lo que realmente llegó, _Markdown_ o _XML_,
leído del propio contenido y no de tu petición, de modo que sigue siendo
honesto si ambos discrepan.
El control segmentado Vista previa / Dividido / Código cambia cómo lees el
documento. Vista previa lo renderiza, Código abre un editor Markdown y Dividido
muestra ambos con desplazamiento sincronizado. **Vista previa es el valor por
defecto.** En Código y Dividido el documento es editable directamente, y una barra de utilidades
Markdown ofrece negrita, cursiva, encabezados, listas, citas, bloques de código,
tablas y un formateador.
La salida XML no tiene selector de vista ni barra de utilidades: se renderiza en
solo lectura con resaltado de sintaxis, porque un documento legible por máquinas
no debería editarse a mano en el sitio.
El icono de copiar copia el documento completo al portapapeles.
Entre los paneles hay un divisor arrastrable. Muévelo para favorecer el lado en
el que estés trabajando; el editor recuerda la posición. Por debajo de 768 px
los paneles se apilan en vertical y el divisor pasa a ser horizontal.
Paso 7 — Refina en Lugar de Regenerar
El panel Iterar y Refinar aparece al pie del panel de salida en cuanto hay
un resultado. Es la tercera y última etapa del flujo, y la que más se pasa por
alto.
El refinamiento edita el documento generado, no tu entrada original. Pide el
cambio en lenguaje corriente:
`text
Add a section covering what happens when a user already has a
password account with the same email address.
`
Pulsa Enter para enviar; Shift+Enter inserta un salto de línea. Cada ronda
devuelve un documento de reemplazo completo en lugar de un parche, así que el
resultado se mantiene coherente en vez de acumular párrafos añadidos.
Cada ronda se guarda como una instantánea en un historial de versiones con
marca de tiempo y un resumen breve de lo que cambió. Revertir restaura una
versión anterior, y guarda eso como una instantánea nueva, de modo que revertir
nunca destruye una ronda posterior.
El refinamiento requiere VIBECODER. El panel sigue visible en el plan
GRATIS con una insignia PRO encima, para que veas el flujo antes de
adquirirlo. Las rondas mensuales están limitadas por plan: 25 en VIBECODER, 100
en DEVELOPER, ilimitadas en ENTERPRISE.
Paso 8 — Aprende los Dos Atajos que Importan
Pulsa ⌘K o ⌘P (Ctrl+K / Ctrl+P) para abrir la paleta de comandos. Busca
acciones —Generar Traducción, Copiar Resultado—, destinos de navegación y, cuando
hay un resultado Markdown abierto, los comandos de formato. Es la vía más rápida
a cualquier punto del editor sin tocar el ratón.
El otro que usarás constantemente es ⌘↵` para generar desde dentro del área de
texto.
Por último, ten presente lo que _no_ está en el editor: las **Instrucciones
Personalizadas viven en Ajustes de la Cuenta → Perfil**, no aquí. Son preferencias
permanentes —«usa siempre TypeScript», «prefiere composición funcional»—
aplicadas a cada traducción, hasta 10.000 caracteres, y requieren VIBECODER.
Esa misma página guarda tus valores por defecto de Público Objetivo, Contexto
Técnico, Formato de Salida y verbosidad, que son los que inicializan la fila de
parámetros cada vez que se carga el editor.
Punto de Control
Ya deberías poder:
completo
Solución de Problemas
La salida es más corta que mi entrada
El tono está por debajo de 50, lo que pone a DevSpeak en modo reescritura.
Muévelo a 50 o más para obtener un documento completo.
La especificación discute la capa equivocada del stack
Cambia Contexto Técnico, no Público Objetivo. La audiencia controla cuánto se
explica; el contexto controla qué capa se discute.
El desplegable Proyecto no está en la barra de funciones
Requiere VIBECODER _y_ al menos un Context Project existente. Crea uno desde la
entrada Proyectos de la barra lateral y aparecerá.
Parece que mi captura adjunta fue ignorada
Revisa el control Modelo. Algunos modelos no leen imágenes. Vuelve a poner el
selector en Auto, o fija un modelo que lea imágenes, y vuelve a ejecutar.
El panel Iterar y Refinar está atenuado y muestra una insignia Pro
El refinamiento iterativo requiere VIBECODER. Al hacer clic en el panel se abre
el modal de precios.
El editor se reejecuta cada vez que escribo
IA Rápida está encendido. Apágalo en el grupo de acciones.
Resumen
Has aprendido a:
Próximos Pasos
[Tu Primera Traducción con DevSpeak](/tutorials/getting-started/your-first-translation)
[anclando traducciones en un Context Project](/tutorials/mcp/ground-translations-on-a-context-project)
[Automatiza con la CLI](/tutorials/api-and-cli/automate-with-the-cli)