esthersjw/esther-design-system

© 2026 ESTHER不二 (esthersjw) | CC BY-NC-SA 4.0 Ao usar este Skill, é obrigatório atribuir o autor original, proibido uso comercial, e compartilhar sob a mesma licença caso haja modificações.

Condição de Ativação

Ativado quando o usuário solicita a criação de páginas HTML, páginas pessoais, páginas de tutorial, páginas de apresentação, landing pages, páginas de evento, páginas do tipo App, portfólios ou qualquer outra tarefa relacionada a design front-end. Também é ativado quando o usuário diz "fazer gráfico", "card gráfico", "gráfico Xiaohongshu", "transformar artigo em card", "converter em gráfico" ou "fazer card".

Modo de Uso (Fluxo de Trabalho em 7 Etapas)

Etapa 1: Esclarecer Requisitos

Perguntar ao usuário 5 questões:

1. Tipo — Tutorial/Apresentação/Divulgação? Página de Evento/Landing? App/Funcional? Card Gráfico? Layout para WeChat?
2. Público — Para quem é? Nível técnico?
3. Número de Seções — Aproximadamente quantas telas de conteúdo?
4. Material — Quais textos/imagens/dados estão disponíveis?
5. Restrições Rígidas — O que deve ser incluído? Existe alguma cor de marca parceira?

Etapa 2: Ler Especificações

1. Obrigatório brand-dna.md — Confirmar as especificações base da marca
2. Conforme o tipo, selecione o arquivo de cenário:
   • Tutorial/Apresentação/Divulgação → references/scene-tutorial.md
   • Página de Evento/Encontro/Landing → references/scene-landing.md
   • App/Funcional (Dashboard/Shelf/Canvas) → references/scene-app.md
   • Card Gráfico/Gráfico Xiaohongshu/Artigo para Card → references/scene-cards.md
   • Layout para WeChat/Distribuição → references/scene-wechat.md

Etapa 3: Copiar Template

Escolha o template correspondente em assets/ como ponto de partida:

• Tutorial → assets/template-tutorial.html
• Página de Evento/Landing → assets/template-landing.html
• App/Funcional → assets/template-app.html
• Card Gráfico → assets/template-cards.html

Comece a editar a partir do template, não escreva do zero.

Etapa 4: Selecionar Combinações de Layout

Do arquivo references/layouts.md, selecione 3 a 5 padrões de layout e atribua layouts diferentes para cada seção.

O layout de cada seção deve ser diferente.

(Modo Card Gráfico: consulte as técnicas de layout recomendadas em scene-cards.md e escolha técnicas diferentes para cada página.)

Etapa 5: Selecionar Componentes para Preencher

Do arquivo references/components.md, selecione componentes para preencher cada seção.

Regra rígida: proibido usar qualquer estilo padrão do HTML. Todos os blockquotes, listas, tabelas, cards devem usar o código dos componentes correspondentes de components.md. Não é permitido usar <blockquote> padrão, border-left padrão, <ul>/<ol> sem estilo, <table> padrão. Se não encontrar nada adequado em components.md, crie seu próprio design que atenda às especificações do brand-dna, mas nunca use estilos padrão do navegador.

Etapa 6: Autoverificação

Consulte references/checklist.md e verifique item por item:

• P0 deve passar todos — Qualquer um que não passe deve ser corrigido
• P1 deve passar — Preferencialmente atender
• P2 é bônus — Para melhorar ainda mais

(Modo Card Gráfico: consulte também o Checklist no final de scene-cards.md; modo WeChat: consulte também o Checklist no final de scene-wechat.md, verificando se os títulos sofrem quebras não semânticas ou quebra de palavras em inglês.)

Etapa 7: Entrega

Produza o arquivo HTML final, garantindo que possa ser aberto diretamente no navegador.

Consulta Rápida por Tipo de Cenário

Tipo	Arquivo de Cenário	Template
Tutorial/Apresentação/Divulgação	references/scene-tutorial.md	assets/template-tutorial.html
Página de Evento/Encontro/Landing	references/scene-landing.md	assets/template-landing.html
App/Funcional	references/scene-app.md	assets/template-app.html
Card Gráfico/Gráfico Xiaohongshu	references/scene-cards.md	assets/template-cards.html
Layout WeChat	references/scene-wechat.md	assets/template-wechat.html

Princípios Chave

• Comece a editar a partir do template, não escreva do zero — O template já inclui variáveis da marca e estrutura básica
• O layout de cada seção deve ser diferente — Evite repetição monótona, escolha diferentes padrões de layouts.md
• Após terminar, execute o checklist — P0 deve passar todos para entrega

Proibições

Siga rigorosamente a lista de proibições em brand-dna.md, não repetida aqui. A linha de base central: ao tirar um print para postar no Twitter, ninguém dirá "foi feito por IA de novo".