Codex
Workflow, plugins e slides para projetar interfaces com o Codex.
Seu Agente de Código.Um Workflow de DesignMelhor.
Guias de workflow, notas de configuração e recursos de design para 22 agentes de código, para que a ferramenta que você já usa possa transformar um briefing em uma interface bem pensada.
Três Papéis em um Workflow de Design de Agente de Código
O que é um agente de designUm agente de código transforma instruções em código. Um workflow de design adiciona as referências, restrições e revisão que transformam esse código em uma interface utilizável.
- 01Seu Agente de Código
- Lê o projeto, faz alterações e responde a feedback. Mantenha a ferramenta que você já usa.
- 02OpenDesign
- O workspace para o briefing, recursos de design e revisão visual. Cada guia de agente explica a configuração.
- 03Seu Julgamento
- Escolha a referência, defina o que deve permanecer consistente e verifique o resultado em telas reais.
Guias de Workflow de Design para 22 Agentes de Código
Comece com a ferramenta que você já usa. Cada guia aborda o papel do agente, o que preparar e o próximo passo. A lista é um diretório, não um ranking.
Claude Code
Um workflow de design frontend com o Claude Code, do primeiro briefing à revisão final.
DeepSeek Harness
Configuração do harness, seu papel no workflow e os recursos de design que ele pode usar.
OpenCode
Um workflow de design construído em torno das ferramentas e provedores de modelo que você escolher.
Grok
Grok Build
Configuração, pré-requisitos e uma primeira tarefa de design visual com o Grok Build.
Cursor
Cursor Agent
Como o editor Cursor e o workflow de design se encaixam em um único projeto.
DeepSeek
DeepSeek TUI
O DeepSeek TUI, seus pré-requisitos e como ele difere do DeepSeek Harness.
Hermes
Recursos de design, opções de extensão e pré-requisitos para um workflow com o Hermes.
Antigravity
Primeiro a configuração, depois um workflow de design frontend e revisão com o Antigravity.
Kimi
Kimi CLI
Entradas, contexto e configuração a preparar antes de uma primeira tarefa de design com o Kimi CLI.
Qwen
Qwen Code
Como o Qwen Code, o provedor de modelo e o workflow de design se conectam.
Trae CLI
Configuração do Trae CLI e um ponto de partida para design de interface.
Qoder
Qoder CLI
Configuração do Qoder CLI e o workflow de design que o complementa.
Mistral Vibe
Mistral Vibe CLI
O Mistral Vibe CLI como ferramenta de design, distinto do vibe design em geral.
Gemini
Gemini CLI
Um workflow de UI guiado por referências com o Gemini CLI, da configuração à revisão.
Copilot
GitHub Copilot CLI
Contexto de repositório e revisão em um workflow de design de interface com o GitHub Copilot CLI.
Kilo
Configuração, modos e um ponto de partida prático para design com o Kilo.
Aider
Comece a partir de código existente com o Aider, faça uma mudança bem pensada e revise a diferença.
Pi
Configuração, extensões e recursos de design para o Pi.
Kiro
Kiro CLI
Onde requisitos e decisões de interface se encaixam em um workflow com o Kiro CLI.
Devin
Devin for Terminal
Definindo a tarefa, o handoff e revisando a interface com o Devin for Terminal.
Reasonix
DeepSeek Reasonix
Entendendo o projeto, suas relações e por onde começar com o DeepSeek Reasonix.
Baixe o OpenDesign e Conecte Seu Agente de Código
- 01
Baixar o OpenDesign
Escolha a versão para macOS ou Windows e abra o aplicativo.
- 02
Conecte Seu Agente
Verifique os pré-requisitos no guia acima e conclua a configuração descrita nele.
- 03
Inicie a Primeira Tarefa
Leve uma referência, um briefing curto ou um template dos recursos abaixo.
Recursos de Design para Agentes de Código
Agentes de Código, Modelos e Skills Explicados
Você não precisa de um novo agente de código para este workflow. Estas respostas abordam os termos e as páginas relacionadas.
Preciso Trocar de Agente?
Não. Comece pelo guia da sua ferramenta atual. A configuração e os recursos disponíveis dependem dessa ferramenta e versão; o diretório não os classifica.
Agentes, Modelos e Skills São a Mesma Coisa?
Não. Um modelo alimenta o raciocínio, um agente opera na tarefa, e uma skill fornece uma forma reutilizável de trabalhar. O diretório de skills lista essa última camada.
Estou Comparando Ferramentas de Design. Para Onde Devo Ir?
Use as comparações de ferramentas para questões de substituição e coexistência. Estes guias de agentes explicam como trabalhar com uma ferramenta que você já usa.
Qual Deve Ser Minha Primeira Tarefa?
Escolha uma interface pequena e traga uma referência. Verifique o layout, uma interação e uma tela estreita antes de expandir. Um template pode te dar um ponto de partida.
Comece Com o Agente de Código Que Você Já Usa
Builds desktop para macOS e Windows. No celular, salve o guia de configuração e continue no seu computador.
Baixar o OpenDesign Notas de configuração