Web Design Engineerpor ConardLi

Web Design Engineer Skill.

Defina o contrato visual antes de expandir a interface.

Design de frontend
Prototipagem
Sistemas de design

Revisão da fonte · Web Design EngineerSKILL.md

Tarefa Design de frontend Produz • Um artefato visual em HTML/CSS/JavaScript ou React • Uma avaliação documentada da direção visual e das escolhas de tokens de design • Um rascunho inicial visualizável, seguido de estados e interações completos Antes de começar Exige um agente capaz de programar e um ambiente de frontend renderizável no navegador. Alguns padrões selecionados podem usar React, Babel, gráficos ou outras bibliotecas; a aceitação no navegador exige uma ferramenta de navegador adequada.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Web Design Engineer

Um método de design e engenharia que parte do contexto, com requisitos de ativos, calibração de design, rascunhos iniciais, modos de preservação e caminhos distintos para crítica e QA no navegador.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Web Design Engineer é um fluxo de trabalho de artefatos de navegador para páginas, painéis, protótipos, apresentações de slides e visualizações. Em vez de tratar todo pedido como uma nova landing page, ela primeiro identifica o artefato, o público e o modo de trabalho com material existente. Estender um produto, preservar os contratos de um redesign e reconstruir uma direção visual são trabalhos diferentes, com permissões diferentes.

A avaliação de design usa cinco dimensões ajustáveis: variação, movimento, densidade de informação, dependência de ativos e fidelidade à marca. Elas alimentam um sistema declarado e um rascunho inicial visualizável antes da implementação detalhada. Em trabalhos de marca, logotipos reais, fotografias de produto e capturas da interface importam mais do que apenas uma paleta. A skill também separa uma autoverificação leve da aceitação executável no navegador, que a fonte reserva para um pedido explícito de QA.

Entregas esperadas

Um artefato visual em HTML/CSS/JavaScript ou React
Uma avaliação documentada da direção visual e das escolhas de tokens de design
Um rascunho inicial visualizável, seguido de estados e interações completos

Ver o briefing de exemplo

Do briefing à revisão

01
Leia o contexto existente
Inspecione o código-fonte fornecido, capturas de tela, ativos de marca e restrições. Classifique se o trabalho é uma extensão, um redesign com preservação ou uma reformulação mais ampla.
02
Declare o contrato de design
Explique a direção visual, o público, a densidade, o movimento e os ativos; depois especifique tipografia, espaçamento, paleta, superfícies e tratamento de interação. Aguarde a aprovação desse sistema de design pelo usuário antes de escrever o primeiro código.
03
Mostre um rascunho visualizável
Use layouts principais e placeholders honestos para testar a direção. Aguarde a aprovação separada desse rascunho inicial antes de preencher todos os componentes ou estados de interação.
04
Construa e revise
Conclua as interações e os estados aprovados. Faça a autoverificação da fonte; quando a aceitação no navegador for solicitada, colete separadamente evidências reais de viewport e interação.

02 Quando usar

Quando usar

Exige um agente capaz de programar e um ambiente de frontend renderizável no navegador. Alguns padrões selecionados podem usar React, Babel, gráficos ou outras bibliotecas; a aceitação no navegador exige uma ferramenta de navegador adequada.

Bom encaixe

Extensões de produtos existentesÚtil quando uma nova tela precisa parecer parte do produto e preservar rotas, formulários e expectativas de interação ao redor.
Exploração de direção de designServe para um briefing visual vago que precisa de direções realmente diferentes ou variantes ajustáveis antes de a equipe se comprometer com uma composição.

Limites a verificar

Escopo de frontend visualAPIs de backend, ferramentas de linha de comando e processamento de dados estão fora da saída pretendida da skill. Fluxos dedicados a artigos e a apresentações conduzidas por narração também são tratados separadamente.
Qualidade não é resultado de testeUma crítica de design ou a inspeção da fonte não comprova o comportamento responsivo em um navegador em execução. Solicite a aceitação executável quando essa evidência for necessária.

Traga estes insumos

Artefato e públicoIndique a tela ou experiência a produzir, quem a usa e os tamanhos de visualização ou condições de apresentação importantes.
Contratos existentesForneça código, referências do sistema de design e comportamentos protegidos. Informe quais partes podem mudar e quais devem continuar reconhecíveis.
Conteúdo e ativos reaisForneça textos aprovados, imagens reais do produto, logotipos e dados. Marque o que ainda estiver faltando, em vez de inventar depoimentos ou métricas.

03 Decisões importantes

Decisões que importam

Preservação como escolha de design
O modo de trabalho explícito ajuda a evitar que um redesign atraente altere discretamente convenções úteis do produto ou substitua decisões de marca existentes que ainda são válidas.
Variantes além da troca de cores
Seu framework de calibração permite variar densidade, organização e interação de forma independente, em vez de mostrar várias versões apenas cosméticas do mesmo layout.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Revise a configuração

Use a pasta completa da skill do Garden para que as receitas de design, o protocolo de preservação e as referências opcionais de aceitação estejam disponíveis.

Arquivo-fonte original

https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-design-engineer/SKILL.md

Comece com uma única entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use Web Design Engineer para estender nossa interface de análises existente com uma tela de relatórios salvos. Preserve a navegação, os tokens de espaçamento e as convenções de tabela. Leia os componentes e capturas de tela fornecidos, proponha o sistema de design e aguarde minha aprovação antes de programar. Depois, mostre um rascunho visualizável com planos para os estados de carregamento e vazio. Depois que eu aprovar esse rascunho, conclua a implementação e execute a aceitação no navegador nos tamanhos de desktop e mobile fornecidos. Não invente estatísticas de uso dos relatórios.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

O modo de trabalho documentado corresponde às alterações realmente feitas na interface existente.
A visualização concluída inclui os estados de interação relevantes para o briefing.
Qualquer afirmação de aceitação no navegador vem acompanhada dos viewports realmente testados e dos resultados.

OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill esteja incluída no pacote, nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte: ConardLi
Repositório: ConardLi/garden-skills
Arquivo da skill: skills/web-design-engineer/SKILL.md
Licença: MIT
Snapshot revisado: 2026-10-07 · aaf9a82f5efd

Resumo editorial da fonte

Um método de design e engenharia que parte do contexto, com requisitos de ativos, calibração de design, rascunhos iniciais, modos de preservação e caminhos distintos para crítica e QA no navegador.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não indicam uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Ela sempre produz um projeto React?

Não. HTML é o meio de saída, mas a fonte abrange tanto HTML/CSS/JavaScript simples quanto protótipos e artefatos visuais orientados a React.

Ela substituirá um sistema de design existente?

Não automaticamente. O fluxo distingue extensão, redesign com preservação e reformulação; essa escolha deve ser definida antes da edição.

Toda construção inclui testes automatizados no navegador?

A fonte exige uma autoverificação leve em todo trabalho, mas o conjunto de aceitação executável é acionado por um pedido explícito de navegador, responsividade ou QA.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha o briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design