Caret
Seu design não deveria viver fora do seu código. O Caret o mantém no seu repositório como React real em .caret/, renderizado ao vivo em um canvas que você pode clicar e editar.
Documentação
Caret
Uma camada de design que vive no seu repositório.
https://github.com/user-attachments/assets/93e273d4-aed3-45cd-bb5e-c5b587691017
Suas páginas são renderizadas em uma tela. Clique em um título e redigite-o, clique com o botão direito em uma cor e escolha uma nova, e a alteração é gravada no arquivo por trás dele. A tela nunca foi uma imagem do seu design. Ela é o design, em execução.
Esse design vive no seu repositório como React real, em .caret/, no git, revisável em um pull request. O código-fonte do seu aplicativo permanece intocado até você sincronizar. Então, uma correção que você faz uma vez ainda está lá amanhã, em vez de ser regenerada na próxima vez que você pedir algo.
- Edite na página: texto, cor, imagens e tamanho, gravados no arquivo
- Peça as alterações mais difíceis: pinte uma região, descreva-a em palavras
- Três versões de uma vez: gere, compare, mantenha uma
- Crie também os assets: logotipos, fotografias, texturas, fundos animados
- Sincronize no seu aplicativo: em qualquer framework, nas duas direções
- Traga seu próprio modelo: uma assinatura que você tem, ou uma chave de API
- Ou entregue a sincronização ao seu próprio agente: Claude Code e Codex funcionam via MCP
Grátis, roda na sua máquina, sem conta. Precisa de Node.js instalado para a tela ao vivo. Este repositório contém o código-fonte, os problemas e os downloads. Ele costumava ser dividido em dois desde que o Caret era um fork do VS Code; o código-fonte foi movido para cá, e precious112/caret permanece como o antigo lar.
Download
| Plataforma | Download |
|---|---|
| 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 |
As versões para macOS são assinadas e notarizadas pela Apple: baixe, descompacte, arraste Caret.app para Aplicativos, clique duas vezes. Sem avisos.
Windows: o que você verá e no que clicar
As versões para Windows ainda não são assinadas com código, então o Windows trata o instalador como desconhecido. Isso pode gerar até três avisos separados. O aplicativo é seguro, e você nunca precisa desativar seu antivírus. Cada aviso tem um botão que permite continuar:
- Quando o download terminar, o navegador pode dizer que o arquivo "não é comumente baixado".
- Chrome: clique no download, depois em ⋯ → Manter → Manter mesmo assim
- Edge: … → Manter → Mostrar mais → Manter mesmo assim
- Quando você executar o instalador, o SmartScreen diz "O Windows protegeu seu PC". Clique em Mais informações → Executar mesmo assim.
- Se o arquivo nunca aparecer em Downloads, o Defender o colocou em quarentena na chegada. Abra Segurança do Windows → Proteção contra vírus e ameaças → Histórico de proteção, encontre a entrada do Caret, escolha Restaurar, depois execute o instalador e faça o passo 2.
Se o Defender continuar removendo o arquivo mesmo assim, desative a proteção em tempo real apenas para a instalação:
- Segurança do Windows → Proteção contra vírus e ameaças → Gerenciar configurações, desative Proteção em tempo real.
- Baixe e execute o instalador.
- Ative-a novamente. O Windows também a reativa sozinho após um curto período, então você não pode esquecê-la desativada.
Prefere o terminal? Isso faz o mesmo que o passo 2 dos avisos acima:
Unblock-File "$HOME\Downloads\Caret-Windows-Setup-x64.exe"
Linux
Nenhuma assinatura necessária: sudo dpkg -i o .deb, sudo rpm -i o .rpm, ou chmod +x o AppImage e execute-o.
Você também precisa do Node.js
A tela ao vivo do Caret executa um servidor de desenvolvimento local, então o Node.js deve estar instalado ou a tela não carregará. Todo o resto funciona sem ele, o que torna isso fácil de perder: o aplicativo abre, o chat responde, e apenas a tela fica em "carregando pré-visualização" para sempre.
Instale a versão LTS de nodejs.org e você estará bem. Se quiser o mínimo exato, é Node 20.19+, ou 22.12+ na linha 22, que é o requisito do Vite, não nosso.
Verifique o que você tem:
node --version
Edite na página
Clique com o botão direito em qualquer texto, cor ou imagem e altere ali. O Caret grava no arquivo da própria página em .caret/ e a página recarrega.
Escolha uma cor e o Caret a verifica em relação aos seus tokens de design. Se uma estiver próxima, ele grava o token em vez de um código hex, então alterar sua cor de marca depois muda em todos os lugares que a usaram. Você também pode arrastar uma borda para redimensionar, e o tamanho vai para o código.
Peça as alterações mais difíceis
Algumas coisas são delicadas demais para clicar. Pinte sobre a parte da página que você quer e diga o que deseja. Seu agente recebe os elementos exatos que você marcou, então ele não precisa adivinhar qual parte você quis dizer.
Três versões de uma vez
Quando você ainda não sabe o que quer, peça algumas. O Caret as constrói lado a lado, ao vivo, e você mantém uma. Escolher deixa uma etapa de desfazer.
Crie também os assets
Diga o que é a coisa e o Caret a cria: fotografias, texturas, logotipos desenhados como arquivos vetoriais reais, e fundos animados escritos como código para que as cores permaneçam ajustáveis. Como é iluminado, enquadrado e colorido vem dos seus tokens de design, então combina com o resto do seu trabalho.
Veja as jornadas
Descreva os caminhos pelo seu produto e a tela os desenha sobre suas páginas. Cada jornada ganha uma cor, caminhos de erro são tracejados, e páginas para as quais nada leva são óbvias.
Sincronize no seu aplicativo
Seu design vive em .caret/. Seu aplicativo é o que você entrega, em qualquer framework. O Caret descobre quais arquivos de design mudaram desde a última sincronização e seu agente faz o aplicativo corresponder. Ele tira um snapshot primeiro, então desfazer sempre funciona.
Funciona também no outro sentido. Se alguém editar o aplicativo diretamente, o Caret percebe comparando o conteúdo dos arquivos e oferece trazer o design de volta à linha. Você vê as duas versões e escolhe. Ele nunca mescla por você.
Capture os erros cedo
O Caret executa um conjunto de regras simples sobre suas páginas e mostra o que encontra na tela sem ser solicitado: uma cor que é quase, mas não exatamente, sua cor de marca, texto claro demais para ler, uma escala de títulos que pula um passo.
Ele também grava seus tokens em AGENTS.md, CLAUDE.md e .cursor/rules, e os mantém atualizados. Um agente instruído a "construa um cartão para mim" que tenha que decidir consultar sua escala de espaçamento não vai se incomodar, e vai inventar algo em vez disso.
Traga seu próprio modelo
O mecanismo do OpenCode está embutido e conecta-se ao provedor que você quiser: uma chave de API, ou uma assinatura que você já tem. ChatGPT Plus, Pro e Go, Kimi For Coding, os planos de codificação Z.AI e Zhipu, e GitHub Copilot funcionam como provedores nos quais você faz login. Anthropic é apenas com chave de API, porque a Anthropic não permite assinaturas do Claude em outras ferramentas.
Já trabalha com um agente no seu terminal? O Caret expõe sua camada de design via MCP, então você pode entregar a sincronização a ele em vez de executá-la aqui. O design em si permanece no Caret: o MCP funciona em uma direção, então um agente externo pode chamar, mas o Caret não pode enviar trabalho de volta para ele. Claude Code e Codex são testados. Veja docs/connect-an-agent.md.
Seu primeiro projeto
- Abra uma pasta. O Caret cria
.caret/dentro dela e não toca em mais nada. - Diga o que você está construindo, em uma frase.
- Defina sua base: cor, tipografia, espaçamento, raio. O Caret pode entrevistar você, o que precisa de um modelo, ou você pode definir manualmente, o que não precisa de nada.
- Crie páginas. Peça no chat, ou escreva o arquivo você mesmo. De qualquer forma, ele aparece na tela.
Construindo a partir do código-fonte
Node 20 ou mais recente.
npm install
npm run dev # run in development
npm run build
npm run package # installer for your platform
Testes: npm run test:unit, npm run verify:design-shell, npm run verify:app.
Licença
Apache-2.0. Grátis para sempre, roda na sua máquina, sem chave e sem conta. A única coisa que o Caret envia para qualquer lugar são dados anônimos de uso e de falhas, e um clique desativa isso. docs/telemetry.md lista exatamente o que é e o que não é coletado.