Projetar com
Qwen no
OpenDesign.

team-calendar.html · 1440px

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 Qwen

   Siga as instruções do Qwen na versão instalada. Autentique com sua chave de API do DashScope ou Qwen (BYOK) — as credenciais permanecem na sua máquina.

   Documentação do Qwen Code

   # 1. Install Qwen Code (Node 22+)
   npm install -g @qwen-code/qwen-code@latest
   # or: brew install qwen-code
   
   # 2. Start it in your project and authenticate on first run
   cd your-project
   qwen              # run /auth, or set a key in ~/.qwen/settings.json

   Com base nas notas de configuração do Qwen 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 com o Qwen

   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.
   • QwenLê 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 · PromptQwen

   You

   Build the team calendar week view from this reference: five days, working hours, colour by calendar, day agenda on the phone.

   Qwen

   Understood. The reference uses six calendar colours. Keep them as neutral tints and use the accent for the focused event only?
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.
   • QwenCarrega os tokens do DESIGN.md e as regras de postura 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 Qwen 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.
   • QwenPlaneja 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

   • team-calendar.htmlnew
   • QWEN.mdbound
   • 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.
   • QwenLê 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 · events

   Neutral tints for calendars; accent only on the focused event.

   Comment on · mobile

   Day strip plus agenda; do not shrink the week grid onto the phone.
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.
   • QwenAplica as alterações no local e reexecuta o arquivo.
   • 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

   • ✓Accent on one event and today
   • ✓Agenda list at 390px
   • ✓No horizontal scroll at 390px
   • Week navigation — checked by you