Projetar com
Trae CLI no
OpenDesign.

docs-product-landing.html · 1440pxsearch · analyticssearch · analytics

4Revisar Antes da Entrega

1. 1

   Baixe o App de Desktop da OpenDesign

   Escolha o pacote para seu computador, instale-o e abra o app.

   Baixar o OpenDesign

   PONTO DE VERIFICAÇÃO

   O aplicativo desktop abre. Já instalado? Avance para a próxima etapa; não é necessário baixar novamente.
2. 2

   Prepare Sua Conexão com o Trae CLI

   Siga as instruções do Trae CLI na sua versão instalada. Autentique-se com sua própria chave de provedor de LLM (BYOK) — as credenciais permanecem na sua máquina.

   Documentação do Trae

   # 1. Get Trae CLI (trae-agent) from source — needs uv
   git clone https://github.com/bytedance/trae-agent.git
   cd trae-agent
   uv sync --all-extras
   source .venv/bin/activate
   
   # 2. Authenticate by pointing it at your LLM provider key
   #    set it in the environment (or a trae_config.yaml file)
   export OPENAI_API_KEY=...        # or ANTHROPIC_API_KEY, GOOGLE_API_KEY, etc.

   Das notas de configuração do Trae CLI no guia publicado; consulte a documentação do fornecedor para o comando atual.

   PONTO DE VERIFICAÇÃO

   Confirme o agente e a conta pretendidos. Se não estiver disponível, verifique a compatibilidade antes de tentar uma tarefa maior.
3. 3

   Execute Uma Pequena Tarefa no Trae CLI

   Use um briefing pequeno para que você possa avaliar todo o ciclo, incluindo uma revisão.

   Briefing inicial Copiar

   Construa uma tela de configurações com um formulário de perfil e uma confirmação de salvamento. Use minhas regras de design. Verifique em larguras de desktop e mobile.

   PONTO DE VERIFICAÇÃO

   Abra o resultado, teste o estado salvo e solicite uma alteração específica. Um arquivo gerado é o começo da revisão, não o fim.

Para executar o OpenDesign a partir do código-fonte, siga o guia técnico de início rápido.

1. 1

   Briefing de Design

   Linguagem simples, de três a seis linhas. Indique o público, a função da tela e as plataformas.

   • VocêEscreva o briefing; anexe uma captura de tela de referência, se tiver uma.
   • Trae CLILê o briefing e o arquivo de instruções do projeto; pergunta quando algo é ambíguo.
   • OpenDesignFornece o projeto, a superfície do prompt e a skill para o tipo de artefato.
   • VerificarConfirme que o briefing define os critérios de aceitação. Adicioná-los agora é mais barato do que depois da geração.

   New project · PromptTrae CLI

   You

   Design the Docsmith landing page: hero, search demo, three benefits, logos. Check each pass in a real browser at 1440 and 390.

   Trae CLI

   Understood. Should the search demo be interactive or a static frame with a focus state? The brief says live-looking.
2. 2

   Restrições de Design

   Um design system e algumas regras rígidas. É isso que diferencia um resultado alinhado à marca de um visual genérico.

   • VocêEscolha um design system; defina os breakpoints e quaisquer componentes de uso obrigatório.
   • Trae CLICarrega os tokens e as regras de postura do DESIGN.md no contexto antes de escrever uma linha.
   • OpenDesignDisponibiliza a biblioteca de design systems e vincula a escolhida ao template da skill.
   • VerificarOs tokens correspondem à sua marca. Um único destaque, as fontes certas, o raio certo.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Gerar a Interface

   O Trae CLI escreve um arquivo HTML autocontido: layout, estilos, interações e hooks estáveis.

   • VocêAguarde ou responda a uma pergunta de esclarecimento. Nada a configurar.
   • Trae CLIPlaneja as seções, escreve o HTML, CSS e JavaScript, executa o arquivo e corrige o que falhar.
   • OpenDesignSalva o artefato na pasta do projeto e o indexa para pré-visualização.
   • VerificarNada ainda. Avalie o arquivo depois de renderizado, não a partir do código-fonte.

   Project files3 files

   • docs-product-landing.htmlnew
   • trae_config.yamlbound
   • DESIGN.mdread
4. 4

   Pré-visualização

   O arquivo é renderizado dentro do OpenDesign nas larguras que você solicitou. É aqui que o design é avaliado.

   • VocêAlterna larguras, clica pelas interações, deixa comentários nos elementos.
   • Trae CLILê seus comentários na pré-visualização e prepara a próxima revisão.
   • OpenDesignRenderiza o preview, expõe alvos data-od-id para comentários e edições.
   • CheckHierarquia, contraste, overflow em 390px, estados de foco e se o destaque é usado com moderação.

   Preview · 390pxComment mode

   Comment on · demo

   Static frame with a real focus state is enough; no fake typing animation.

   Comment on · logos

   Logo row scrolls on the phone; do not shrink logos below 24px.
5. 5

   Revisar e Verificar

   Solicite alterações apontando para elementos no preview. Cada revisão é um novo arquivo; nada é sobrescrito silenciosamente.

   • VocêTransforma comentários em solicitações; decide quando a tarefa está concluída.
   • Trae CLIAplica as alterações diretamente e executa o arquivo novamente.
   • OpenDesignMantém as versões lado a lado; exporta uma imagem ou o HTML quando você terminar.
   • CheckReverifica apenas a área que mudou, depois a página inteira uma vez em cada breakpoint.

   Verification · v23 of 4

   • ✓Demo has a focus state
   • ✓Logo row scrolls at 390px
   • ✓No horizontal scroll at 390px
   • Browser pass at both widths — checked by you