Uso de Ferret

Proyectos y URL

Un proyecto es una carpeta (normalmente la raíz de tu repositorio). Cada proyecto guarda sus propias URL, así que local, dev y producción están a un clic de distancia.

#Añadir un proyecto

  1. Archivo → Abrir carpeta de proyecto… (⌘O / CtrlO), Añadir proyecto en la barra lateral o Añadir proyecto… en el menú de proyectos de la barra de título.
  2. Elige de dónde viene el proyecto:
    • En este equipo: elige una carpeta.
    • Clonar desde GitHub / GitLab: elige uno de tus repositorios (listados mediante tu sesión de gh o glab) o pega una URL, elige la carpeta superior, y Ferret lo clona y lo abre.
    • Abrir por SSH: elige un host de ~/.ssh/config. La terminal y los agentes se ejecutan en la máquina remota; las revisiones se quedan en este equipo.

El nombre predeterminado es el de la carpeta. Si añades una carpeta que ya está registrada, se abre en su lugar (en macOS y Windows las rutas se comparan sin distinguir mayúsculas y minúsculas). Desde el menú de la barra lateral puedes Renombrar un proyecto o Quitar de la lista. Quitarlo nunca elimina la carpeta.

Las terminales se abren en la carpeta del proyecto y las revisiones se guardan en <project>/.ferret/.

#Guardar URL

  1. Abre la página en el navegador integrado.
  2. Haz clic en + (Guardar URL actual) en la barra de herramientas del navegador. La URL actual aparece ya rellenada.
  3. Escribe un Nombre y haz clic en Guardar.

Cada URL guardada tiene un tipo en Qué revisas: App (la app que estás desarrollando), Diseño (Figma, Penpot, Canva, un prototipo) o Documento / especificación (Google Docs, Notion, Confluence, una especificación en Markdown en GitHub, un PDF). El tipo se deduce de la URL y puedes cambiarlo. Consulta Revisar diseños y documentos, no solo código.

Solo se aceptan URL http:// y https://. Para la URL de una app, si dejas el nombre sugerido, se deduce del host:

HostNombre
localhost, 127.*, ::1, 0.0.0.0, *.localhostlocal
contiene dev, develop, developmentdev
contiene stg, stage, stagingstg
cualquier otroprd
URL guardadas en la barra de herramientas del navegador
URL guardadas en la barra de herramientas del navegador

#Panel de objetivos de revisión

Cambiar de objetivo de revisión y de página sin detener la grabación.

En el modo Feedback, el panel Objetivos de revisión de la derecha muestra todo lo que puedes revisar en el proyecto actual. Cambiar de objetivo no detiene la grabación. Muestra u oculta el panel con Visualización → Mostrar/ocultar objetivos de revisión (⌘⇧K / CtrlShiftK) o con Ocultar panel.

  • Objetivos: las URL guardadas del proyecto. Debajo de cada una hay un árbol con las páginas que has visitado en ese sitio. Los sitios visitados que no están guardados aparecen como grupos propios.
  • Archivos: la carpeta del proyecto. Un archivo se abre como vista previa (Markdown y Mermaid renderizados, el resto de texto en solo lectura), así que también puedes revisar documentación. El lápiz (Abrir en el editor) lo abre en el editor.

Filtrar objetivos filtra a la vez objetivos, páginas y archivos, con la misma búsqueda aproximada que Ir al archivo…. En la lista, ↑ ↓ Enter o 1–9 cambian de objetivo. Abrir URL… abre una URL puntual y Guardar en las URL del proyecto la conserva.

Los objetivos vienen de projects[].urls en settings.json (consulta el ejemplo). Cada entrada necesita una url, un launchCommand (se ejecuta en una terminal, p. ej. para iniciar una app de escritorio) o un windowMatch (la ventana que se graba), y puede tener un purpose (app, design o doc). Elegir un objetivo de ventana lo establece como origen de la grabación, así que no se puede hacer mientras grabas. Las páginas visitadas se recuerdan por proyecto, solo en este equipo (hasta 200).

#Abrir y cambiar de entorno

Haz clic en una URL guardada para abrirla. Si la página actual está bajo otra URL guardada, Ferret conserva la ruta, la query y el hash y solo cambia el origen. Por ejemplo, en http://localhost:3000/pricing?plan=pro, al hacer clic en prd se abre https://example.com/pricing?plan=pro.

Se resalta la etiqueta que corresponde a la página actual (el prefijo más largo). Haz clic derecho en una etiqueta o usa su icono de lápiz para editarla o eliminarla (Eliminar). Cuando se abre un proyecto y no hay URL anterior, se carga su primera URL guardada.

Las etiquetas se agrupan por tipo: primero las URL de la app, luego los diseños y después los documentos, con un separador y un icono para cada tipo. Al cambiar a un diseño o a un documento, o desde uno de ellos, se abre su URL guardada tal cual, sin conservar la ruta.

#Revisar diseños y documentos, no solo código

El feedback no tiene por qué ser sobre código. Todo lo que se abre en el navegador integrado se puede grabar y marcar con el lápiz de la misma manera: un diseño de Figma o Penpot, un prototipo, una especificación en Google Docs o Notion, un documento de diseño en GitHub, un PDF. Guarda esas URL en el proyecto antes de la revisión, junto a local y dev.

  1. Abre Editar proyecto… desde el menú de la barra lateral (o haz clic en + en la barra de herramientas del navegador) y elige Añadir objetivo.
  2. Pega la URL. Un enlace de figma.com pasa a ser Diseño, y uno de docs.google.com o notion.so pasa a ser Documento / especificación, con el nombre Figma o Spec. Si el tipo deducido no es el correcto (por ejemplo, un prototipo en tu propio servidor), cámbialo en Qué revisas.
  3. Abre el objetivo e inicia sesión una vez en el navegador integrado si el sitio lo pide. El navegador conserva sus cookies entre inicios, así que la sesión se mantiene.
  4. Graba como siempre: habla, señala y dibuja sobre el diseño o el documento.

Los hallazgos grabados sobre un diseño o un documento llevan ese tipo en Hallazgos y en feedback.md, y la instrucción que se envía al agente lo indica. Así el agente cambia el diseño o el documento en lugar del código:

  • Si el documento está en el proyecto (una especificación en Markdown, un ADR), el agente edita ese archivo.
  • Si no puede editarlo (un archivo de Figma, un documento de Google Docs), el agente marca el hallazgo como Pregunta del agente con el cambio exacto que hay que hacer, para que lo apliques tú o se lo pases a quien corresponda.

Ejemplo: mientras lees la especificación de precios en Google Docs, rodeas la tabla de planes y dices «el plan Pro ahora cuesta 9.800 yenes, no 8.800». feedback.md incluye el hallazgo bajo el objetivo Spec con Tipo: documento, y el agente responde con la frase corregida para la especificación en lugar de tocar el código de la página de precios. Si grabas la especificación y la app en ejecución en la misma grabación, los hallazgos se separan por objetivo, así que el agente puede actualizar primero la especificación y después el código que la implementa.

También se reconocen las páginas no guardadas de figma.com, docs.google.com, notion.so y hosts similares. Los archivos de la carpeta del proyecto (Markdown, Mermaid) se revisan desde la lista Archivos del panel Objetivos de revisión.

Ayuda a traducir esta página en GitHub (se abre en una pestaña nueva)