Caret

https://github.com/user-attachments/assets/93e273d4-aed3-45cd-bb5e-c5b587691017

Tus páginas se renderizan en un lienzo. Haz clic en un titular y vuelve a escribirlo, haz clic derecho en un color y elige uno nuevo, y el cambio se escribe en el archivo que hay detrás. El lienzo nunca fue una imagen de tu diseño. Es el diseño, en ejecución.

Ese diseño vive en tu repositorio como React real, en .caret/, en git, revisable en una solicitud de extracción. El código fuente de tu propia aplicación permanece intacto hasta que sincronizas. Así, una corrección que haces una vez sigue ahí mañana, en lugar de ser regenerada la próxima vez que pidas algo.

• Edita en la página: texto, color, imágenes y tamaño, escritos en el archivo
• Pide los cambios más difíciles: pinta una región, descríbela con palabras
• Tres versiones a la vez: genera, compara, conserva una
• Crea también los recursos: logotipos, fotografías, texturas, fondos animados
• Sincroniza en tu aplicación: en cualquier framework, en ambas direcciones
• Trae tu propio modelo: una suscripción que tengas o una clave de API
• O entrega la sincronización a tu propio agente: Claude Code y Codex funcionan a través de MCP

Gratis, se ejecuta en tu máquina, sin cuenta. Necesita Node.js instalado para el lienzo en vivo. Este repositorio contiene el código fuente, los problemas y las descargas. Solía estar dividido en dos desde que Caret era un fork de VS Code; el código fuente se movió aquí, y precious112/caret sigue siendo el antiguo hogar.

---

Descargar

Plataforma	Descarga
macOS, Apple Silicon (M1/M2/M3…)	Caret-macOS-arm64.zip
macOS, Intel	Caret-macOS-x64.zip
Windows, instalador	Caret-Windows-Setup-x64.exe
Windows, instalador Arm	Caret-Windows-Setup-arm64.exe
Windows, portátil	Caret-Windows-Portable-x64.exe
Linux, Debian/Ubuntu	Caret-Linux-amd64.deb
Linux, Fedora/RHEL	Caret-Linux-x86_64.rpm
Linux, AppImage	Caret-Linux-x86_64.AppImage

Las compilaciones de macOS están firmadas y notarizadas por Apple: descarga, descomprime, arrastra Caret.app a Aplicaciones, haz doble clic. Sin advertencias.

Windows: lo que verás y en qué hacer clic

Las compilaciones de Windows aún no están firmadas con código, por lo que Windows trata el instalador como desconocido. Eso puede producir hasta tres advertencias separadas. La aplicación es segura, y nunca necesitas desactivar tu antivirus. Cada advertencia tiene un botón que te permite continuar:

1. Cuando la descarga termine, el navegador puede decir que el archivo "no se descarga comúnmente".
   • Chrome: haz clic en la descarga, luego ⋯ → Conservar → Conservar de todos modos
   • Edge: … → Conservar → Mostrar más → Conservar de todos modos
2. Cuando ejecutes el instalador, SmartScreen dice "Windows protegió tu PC". Haz clic en Más información → Ejecutar de todos modos.
3. Si el archivo nunca aparece en Descargas, Defender lo puso en cuarentena al llegar. Abre Seguridad de Windows → Protección contra virus y amenazas → Historial de protección, encuentra la entrada de Caret, elige Restaurar, luego ejecuta el instalador y haz el paso 2.

Si Defender sigue eliminando el archivo de todos modos, desactiva la protección en tiempo real solo para la instalación:

1. Seguridad de Windows → Protección contra virus y amenazas → Administrar configuración, desactiva Protección en tiempo real.
2. Descarga y ejecuta el instalador.
3. Vuelve a activarla. Windows también la reactiva por sí solo después de un tiempo, así que no puedes olvidarla desactivada.

¿Prefieres la terminal? Esto hace lo mismo que el paso 2 de las advertencias anteriores:

Unblock-File "$HOME\Downloads\Caret-Windows-Setup-x64.exe"

Linux

No se necesita firma: sudo dpkg -i el .deb, sudo rpm -i el .rpm, o chmod +x el AppImage y ejecútalo.

También necesitas Node.js

El lienzo en vivo de Caret ejecuta un servidor de desarrollo local, por lo que Node.js debe estar instalado o el lienzo no se cargará. Todo lo demás funciona sin él, lo que hace que sea fácil de pasar por alto: la aplicación se abre, el chat responde, y solo el lienzo se queda en "cargando vista previa" para siempre.

Instala la compilación LTS desde nodejs.org y estarás bien. Si quieres el mínimo exacto, es Node 20.19+, o 22.12+ en la línea 22, que es el requisito de Vite más que el nuestro.

Comprueba lo que tienes:

node --version

---

Editar en la página

Haz clic derecho en cualquier texto, color o imagen y cámbialo allí. Caret lo escribe en el archivo propio de la página en .caret/ y la página se recarga.

Elige un color y Caret lo compara con tus tokens de diseño. Si uno está cerca, escribe el token en lugar de un código hexadecimal, de modo que cambiar tu color de marca más tarde cambia todo lo que lo usaba. También puedes arrastrar un borde para redimensionar, y el tamaño queda en el código.

Pide los cambios más difíciles

Algunas cosas son demasiado delicadas para hacer clic. Pinta sobre la parte de la página que quieres decir y di lo que quieres. Tu agente obtiene los elementos exactos que marcaste, así que no tiene que adivinar qué parte querías decir.

Tres versiones a la vez

Cuando aún no sabes lo que quieres, pide varias. Caret las construye lado a lado, en vivo, y conservas una. Elegir deja un paso de deshacer.

Crea también los recursos

Di qué es la cosa y Caret la crea: fotografías, texturas, logotipos dibujados como archivos vectoriales reales, y fondos animados escritos como código para que los colores sigan siendo ajustables. Cómo está iluminado, encuadrado y coloreado proviene de tus tokens de diseño, para que coincida con el resto de tu trabajo.

Ve los recorridos

Describe los caminos a través de tu producto y el lienzo los dibuja sobre tus páginas. Cada recorrido recibe un color, los caminos de error están punteados, y las páginas a las que nada lleva son obvias.

Sincroniza en tu aplicación

Tu diseño vive en .caret/. Tu aplicación es lo que sea que publiques, en cualquier framework. Caret determina qué archivos de diseño cambiaron desde la última sincronización y tu agente hace que la aplicación coincida. Primero toma una instantánea, así que deshacer siempre funciona.

También funciona en la otra dirección. Si alguien edita la aplicación directamente, Caret lo nota comparando el contenido de los archivos y ofrece alinear el diseño de nuevo. Ves ambas versiones y eliges. Nunca las fusiona por ti.

Detecta los errores temprano

Caret ejecuta un conjunto de reglas simples sobre tus páginas y muestra lo que encuentra en el lienzo sin que se lo pidas: un color que es casi pero no exactamente tu color de marca, texto demasiado tenue para leer, una escala de encabezados que salta un paso.

También escribe tus tokens en AGENTS.md, CLAUDE.md y .cursor/rules, y los mantiene actualizados. Un agente al que se le dice "construye una tarjeta" y que tiene que decidir buscar tu escala de espaciado no se molestará, e inventará algo en su lugar.

Trae tu propio modelo

El motor de OpenCode está integrado y se conecta al proveedor que quieras: una clave de API o una suscripción que ya tengas. ChatGPT Plus, Pro y Go, Kimi For Coding, los planes de codificación Z.AI y Zhipu, y GitHub Copilot funcionan como proveedores en los que inicias sesión. Anthropic es solo con clave de API, porque Anthropic no permite suscripciones de Claude en otras herramientas.

¿Ya trabajas con un agente en tu terminal? Caret expone tu capa de diseño a través de MCP, así que puedes entregarle la sincronización en lugar de ejecutarla aquí. El diseño en sí permanece en Caret: MCP funciona en una dirección, así que un agente externo puede llamar, pero Caret no puede enviar trabajo de vuelta a él. Claude Code y Codex están probados. Consulta docs/connect-an-agent.md.

---

Tu primer proyecto

1. Abre una carpeta. Caret crea .caret/ dentro y no toca nada más.
2. Di qué estás construyendo, en una frase.
3. Establece tu base: color, tipografía, espaciado, radio. Caret puede entrevistarte, lo que necesita un modelo, o puedes configurarlos a mano, lo que no necesita nada.
4. Crea páginas. Pide en el chat o escribe el archivo tú mismo. De cualquier manera, aparece en el lienzo.

Compilar desde el código fuente

Node 20 o más reciente.

npm install
npm run dev       # run in development
npm run build
npm run package   # installer for your platform

Pruebas: npm run test:unit, npm run verify:design-shell, npm run verify:app.

Licencia

Apache-2.0. Gratis para siempre, se ejecuta en tu máquina, sin clave y sin cuenta. Lo único que Caret envía a cualquier lugar son datos anónimos de uso y fallos, y un clic los desactiva. docs/telemetry.md enumera exactamente qué se recopila y qué no.