Fluxo de Design

dsh-annotate

Aponte para elementos no navegador e envie ao agente fatos estruturados, não descrições vagas.

O que é

Feedback visual do navegador por meio de uma extensão companheira para Chrome: /annotate entra no modo de seleção, e cada elemento que você clica contribui com um seletor, fatos do DOM, destaques de estilos computados, dados de acessibilidade, seu comentário e um screenshot opcional do viewport para o próximo turno do agente.

Visual browser element annotation for DeepSeek Harness, capturing DOM, styles, accessibility data, comments, and viewport screenshots.
Do README original

Por que isso importa para design

  • O feedback visual fica preso ao elemento da página em vez de virar uma descrição vaga ou um screenshot colado.
  • Estilos computados e dados de acessibilidade chegam como fatos estruturados sobre os quais o agente consegue agir diretamente.
  • Uma ponte WebSocket de loopback restrita por host, origem e ID de extensão mantém o canal local.

O que cobre

  • Why this exists
  • Features
  • Install
  • Use
  • Configure
  • Scope

Como instalar

dsh-annotate

  1. Rode isto em um terminal.

    git clone https://github.com/BrambleXu/dsh-annotate.git && dsh plugin --profile demo add ./dsh-annotate
  2. Reinicie o dsh web para ele carregar o plugin.

  3. Depois descreva o design que você quer. O harness carrega as ferramentas do plugin.

Como rodar com o DeepSeek Harness

  1. Clone o repositório e adicione o projeto a um perfil do harness; depois carregue a pasta browser-extension como extensão descompactada em chrome://extensions.

  2. Rode /annotate, clique nos elementos da página e anexe um comentário a cada um.

  3. Envie — os fatos capturados e o screenshot do viewport chegam no próximo turno do agente.

Todo plugin aqui é gratuito para instalar e leva até a sua fonte original.

Mais no repositório do DeepSeek Harness ↗

Próximo passo

Projete com o OpenDesign, sem a configuração

Instale este plugin por conta própria ou rode uma camada de design curada em volta do DeepSeek Harness com o OpenDesign. Use sua própria chave e seja dono do resultado.

OpenDesign Desktop

Um design system. Sua marca consistente em tudo

No Vibe Design Workspace completo, aplique as mesmas regras de marca a sites, apresentações, protótipos interativos, dashboards, imagens e vídeos HTML. Conecte Codex, Claude Code, Cursor e outros agentes de código locais e crie de graça.

  • Sites, apresentações, protótipos, dashboards, imagens e vídeo
  • Mais de 140 design systems e a biblioteca completa de templates e skills
  • Codex local e mais de 21 agentes de código · Grátis
Baixar grátis

Disponível para macOS e Windows