xiaoshikai-git/lymow-web-design

SKILL DE DESIGN WEB LYMOW

Notas de distribuição pública

Este é um skill de análise de design independente e não oficial, não um produto ou endosso da Lymow. A licença cobre apenas as instruções originais dos mantenedores, código auxiliar e exemplos criados de forma independente; ela não concede direitos a marcas registradas, fotos, vídeos, fontes, código do site ou outros ativos da marca de terceiros. Recursos públicos vinculados são evidências, não uma licença de redistribuição. Use ativos somente quando você tiver os direitos necessários; se os direitos para uma publicação solicitada não estiverem claros, pause essa publicação e explique a lacuna específica.

Leia o Início Rápido e todas as seções numeradas relevantes antes da implementação. A linha de base detalhada e validada permanece em chinês para preservar suas medidas e exceções exatas; responda no idioma solicitado pelo usuário. O relatório de início de tarefa é automático e divulgado abaixo; os colegas não configuram um receptor nem completam um prompt de inscrição. Não há daemon em segundo plano. O skill não concede permissão para implantar um site ou modificar uma loja. As verificações de referência ao vivo são orientadas por tarefas. O código de demonstração independente não é Liquid original do Shopify.

Relatório automático de tarefas — execute no início de uma tarefa

Esta distribuição reporta o registro de instalação e os inícios de tarefas Lymow independentes para a tabela Feishu privada do mantenedor através do relay público incluído. Os campos são: um alias local aleatório persistente (ou nome do operador fornecido explicitamente para relatório), ID do evento, tipo de evento, timestamp, semana ISO, contagem, nome/versão do skill e agente. Ele não envia texto de chat, cópia de página, caminhos de projeto, ativos, nomes de contas de sistema operacional ou identificadores de hardware. Isso é um relatório automático divulgado, não um monitor oculto. A pessoa pode interrompê-lo com node scripts/report_usage.mjs disable ou LYMOW_USAGE_DISABLED=1; respeite uma desistência existente. Provedores de hospedagem observam metadados HTTP comuns.

No início de cada nova tarefa independente de implementação ou revisão Lymow, execute:

node <caminho-absoluto-para-este-skill>/scripts/report_usage.mjs record --task-id <id-de-tarefa-aleatória-estável> --agent <codex|claude-code|cursor|other>

Resolva o script relativo a este SKILL.md. Gere um ID de tarefa aleatório por requisito independente e reutilize-o para novas tentativas, edições de acompanhamento e retomada de trabalho no mesmo requisito. Um requisito diferente recebe um novo ID, mesmo no mesmo chat. Não use nomes de projeto, cópia, URLs, caminhos de arquivo ou informações pessoais como IDs de tarefa. Ler/instalar/manter o skill em si não é uma tarefa de design e não deve ser contabilizado como execução.

Nenhuma configuração, arquivo de receptor, login no Feishu ou confirmação extra é necessária. No primeiro uso real, o script cria um alias aleatório persistente, registra esta instalação uma vez e grava a tarefa. Se o operador fornecer explicitamente seu próprio nome para estatísticas, passe --person no primeiro uso; caso contrário, omita-o sem pedir um nome. Nunca infira a identidade do operador a partir do conteúdo ou regenere um alias para cada tarefa. Identidades locais existentes e configurações desabilitadas são preservadas. Os relatórios indicam início de tarefa, não páginas concluídas. A instalação sem primeiro uso não é observável por este script.

Não contorne as permissões de host/ferramenta/rede. Se Node.js ou acesso à rede estiver indisponível, continue a tarefa de design e relate brevemente a lacuna de estatísticas; falhas na fila tentam novamente em uma invocação posterior. Não instrua um colega a configurar um receptor privado como solução alternativa. Detalhes do relatório e manutenção do proprietário explicam os limites e o auxiliar legado; lê-los é necessário apenas para solução de problemas. As regras de design medidas abaixo permanecem inalteradas.

Guia de Execução Rápida para IA

1. Primeiro, selecione a família da página. Recursos do produto = narrativa técnica em fundo preto; área de compra = fundo branco e confirme P-A/P-B primeiro; acessórios = fundo preto com cartões brancos; conteúdo comum = coluna estreita em fundo branco. Para marketing regular, selecione primeiro um módulo com a mesma função (§6.10), não use fundo branco com duas colunas por padrão; só use skins de campanha, como dourado, se houver um brief claro de campanha. Veja §5/§7.
2. Trave o estilo principal. Open Sans; peso 400 para corpo, geralmente 600 para títulos. Tamanhos de fonte da página inicial 48/32px, história do produto 40/28px (desktop/390 mobile); Hero de cena de outra forma conforme §6.10, não aplique o H2 temático de 58px por padrão a todos os títulos. Preto/branco são a base; CTA comercial usa #04C374; gradiente em tons de cinza apenas para títulos técnicos escuros adequados.
3. Primeiro contêiner, depois detalhes. Conteúdo de história geralmente 1200px, conteúdo amplo 1400px; margens da história no mobile 12px, conteúdo temático 20px. Componentes de referência: ritmo de seção comum 120/60px, CTA cápsula com borda arredondada de 60px; bordas arredondadas de cartão de produto 4px e mídia técnica 18/9px não podem ser misturadas. Exceções de componentes veja §6.
4. Primeiro reutilize, depois crie. Verifique os sections, snippets, settings e assets do tema Shopify existente; Header, galeria, variantes, formulário de compra, FAQ usam componentes maduros. Sem código-fonte, faça apenas reconstruções claramente marcadas, não finja que reutilizou ou verificou via MCP.
5. Mantenha os limites. Modelos reais, capacidades e materiais; não invente preços/descontos/avaliações, não recrie fontes e cores da marca, não introduza decoração sem fundamento. Conflitos verifique conforme §2; [I] são sugestões, não podem substituir evidências [C/R].
6. Concluir exige ver imagens. Faça capturas de tela em 1440/390, verifique 768; compare com módulos do site oficial de mesma função para fonte/quebra de linha, espaçamento em branco, corte de mídia, CTA e densidade da informação. Confirme que as fontes foram carregadas, sem estouro de página inteira, mobile não é apenas um encolhimento; verifique hover/focus, interação e sobreposição sticky. Para conversão Shopify, também complete a verificação MCP e início local da §11.

O acima é navegação, não substitui as regras do componente correspondente; antes da implementação formal, leia a família de páginas selecionada e as receitas relevantes da §6.

1. Propósito e Escopo

Fazer com que novas páginas pertençam visualmente à Lymow em termos de aparência, proporção, materiais e interação. A entrada é este arquivo, novas necessidades de negócio, cópia confirmada e materiais reais; a saída deve reutilizar as capacidades do tema existente, em vez de criar outro "site de tecnologia". Este pacote Skill pode ser usado de forma independente; as regras detalhadas principais estão no references/design-system.md distribuído com o pacote, que deve ser lido conforme as instruções abaixo, sem depender de capturas de tela não distribuídas ou arquivos privados.

Data da evidência: 2026-10-27, Ásia/Xangai. Alvo: www.lymow.com conteúdo exibido no site inglês/EUA, caminho do recurso do tema público /cdn/shop/t/82/. Esta é uma linha de base de design datada, não uma fonte permanente de promoções, parâmetros de produto ou preços.

Marcação de evidência: [C] declaração de estilo CSS público / pós-renderização; [R] Valor Computado do navegador, dimensão ou interação real; [V] observação de captura de tela; [I] inferência/sugestão proposta para novos módulos. Quando não marcado linha por linha na tabela, a marcação do cabeçalho da tabela é a referência. [C] não significa que o Liquid original foi obtido ou o schema do Shopify foi verificado.

Primeiro identifique a família da página: Página inicial e história do produto são principalmente narrativa em fundo preto; área de compra é fundo branco; coleção de acessórios é fundo preto com cartões brancos; conteúdo de política é coluna estreita em fundo branco. A página atual da Black Friday tem uma skin de campanha em marfim/dourado. Não comprima esses cinco cenários em um único conjunto de fundo e tamanho de fonte.

2. Regras Inegociáveis

1. Não troque fontes, cores da marca, sistema de contêiner, forma de CTA ou estilo de imagem sem autorização. Não se desvie com base em "mais avançado" ou "mais fácil de codificar".
2. Prioridade: Especificações atuais da marca/projeto confirmadas → Regras verificadas do site oficial → Componentes e Tokens do tema aplicáveis confirmados → Sugestões [I] deste arquivo. Em caso de conflito, primeiro verifique URL, template, viewport e estilos de sobreposição; não invente um terceiro estilo de compromisso. Quando a verificação não for possível, mantenha o estado atual do projeto e indique o desconhecido claramente.
3. Reutilize componentes existentes. Não reescreva Header, formulário de compra, galeria de produtos, variantes, FAQ ou drawers que parecem semelhantes; eles contêm dependências de comportamento e plataforma.
4. Novos módulos podem mudar a estrutura da informação, mas devem usar fontes, cores, densidade, espaçamento e materiais que correspondam à família da página. A ordem dos módulos é decidida pelo negócio, não copie a página inteira mecanicamente.
5. É proibido usar gradientes coloridos grandes sem evidência, glassmorphism, sombras flutuantes, grades decorativas, ícones irrelevantes, transições 3D complexas e bouncing. Exceções verificadas: gradiente de texto metálico em tons de cinza; diagramas reais de engenharia de produto / visualização de fluxo de ar; decoração dourada autorizada pela campanha; sombras de controle em pequena quantidade. Exceções não podem se espalhar para todos os módulos.
6. Use imagens, vídeos, logotipos e materiais de engenharia do modelo real correspondente. Não gere esteiras, conjuntos de lâminas, sensores, estrutura de carregamento incorretos; não use imagens de outro modelo com um título diferente. Capacidades do produto, preço, estoque, certificações, brindes e avaliações de pessoas devem vir das evidências desta tarefa de negócio.
7. Não escreva o preço promocional atual, badge da Black Friday, contagem regressiva, plugin de sorteio, avatar de atendimento ao cliente, pop-up de cookie como componentes de marca permanentes. As cores roxa, azul e variáveis de fonte padrão de plugins de terceiros não são iguais às cores da marca Lymow.
8. Não copie defeitos legados do site online: títulos vazios, nomes de classe de documentos importados, placeholders de conteúdo oculto, z-index extremo, margem negativa desnecessária, IDs repetidos ou área de clique muito pequena. A forma de correção deve manter a linguagem visual.
9. Ter autorização de design de página da web não significa que você pode publicar, modificar a configuração da loja, enviar pedidos ou substituir o tema online.

3. DNA de Design Lymow

• Use preto como palco para a história do produto. Grandes seções de preto puro seguram títulos metálicos cinza, indicadores brancos e vídeos de gramado; as imagens em si fornecem verde e textura. Não coloque um cartão cinza claro em cada seção. [V: H/P]
• Hardware e evidências de trabalho real são o centro visual. Chassi de esteira em ângulo baixo, detalhes do conjunto de lâminas, fotos aéreas do quintal e resultados reais de corte alternam. A sensação técnica vem da estrutura, demonstração de desempenho, explicação de engenharia, não de interfaces de néon sem sentido. [V: H/P]
• Mude a densidade de acordo com a função do conteúdo. A história do produto explica uma capacidade por tela, título curto + parágrafo estreito + mídia grande; a área de compra permite disposição densa de preço, benefícios, variantes e CTA; a página de política é leitura contínua comum. [V]
• Grande espaço em branco para alternar tópicos, pequeno espaçamento para vincular informações relacionadas. Parágrafos de histórias personalizadas geralmente têm 120px acima / 60px no mobile; 24px / 15px entre título e texto; o texto do cartão fica próximo à imagem correspondente. Não adicione 120px acima e abaixo de cada seção. [C/R]
• Os títulos têm duas posições. Seções de nova capacidade geralmente colocam o título dentro de uma imagem de cena horizontal; explicações específicas geralmente colocam o título e o texto em fundo preto, acima da mídia. Indicadores de desempenho e mídia também podem usar duas colunas assimétricas. [V: P]
• Fundo branco para compra e leitura, fundo preto para narrativa de evidência. Após a área de compra branca do PDP, pode-se passar diretamente para a narrativa técnica preta; o espaço em branco do produto nos cartões brancos da página de coleção garante reconhecimento; não se pode inferir que todo o site deve ter fundo branco. [V]
• CTA é uma âncora funcional arredondada e contida. CTA comercial geralmente é uma cápsula verde; Hero escuro também usa cápsula de texto preto em fundo branco; bordas arredondadas de cartões e mídia são visivelmente menores que as dos botões. Não precisa que cada ponto de venda tenha um botão de compra. [C/R/V]
• O verde tem um papel claro. #04C374 é usado para a ação principal de compra, estado selecionado e destaque local da marca; o verde natural do gramado vem das fotos, não se pode tirar a cor média do gramado como cor da interface da marca. [C/V]

Regras de design detalhadas — obrigatório antes da implementação

Leia Sistema de design: seções 4–10 antes de gerar ou alterar a interface. Ele contém as tabelas de tokens medidas completas, receitas de componentes e exemplos, decisões de família de página, regras de mídia, breakpoints responsivos e regras de Faça / Não Faça. Referências como §4, §6.10 e §9 neste ponto de entrada se referem a esse arquivo. Substituições de componentes têm precedência sobre tabelas de tokens gerais; não implemente apenas a partir do Guia de Execução Rápida.

O histórico de validação anterior é contexto opcional para revisar evidências e limitações; não é uma dependência de ativo obrigatória.

11. Fluxo de Trabalho de Execução para IA

1. Identifique o alvo. Confirme a família da página, URL/modelo atual, ação principal do negócio, materiais existentes e idioma. Novos conteúdos de negócio não devem usar promoções e preços da pesquisa.
2. Leia o projeto. Se houver código-fonte, verifique layout, templates, sections, snippets, assets, config, locales e tokens existentes. Primeiro determine o que pode ser reutilizado, depois crie novo; não afirme que HTML público é Liquid original.
3. Selecione a referência. Nos Reference deste arquivo, selecione um módulo específico da mesma família e função, registre URL, localização do módulo, viewport e o fundo, função da fonte, composição de mídia, CTA e ordem mobile a serem herdados. Apenas URL da página ou tokens dispersos não são suficientes para provar consistência visual; marque novas partes do layout como [I]. Verifique se ainda está válido. Registre novas evidências quando o site mudar, não substitua a linha de base silenciosamente. Confirme a URL final, especialmente P-A/P-B.
4. Estabeleça o mapeamento da página. Liste brevemente o componente, contêiner, função da fonte, fundo, mídia, CTA e comportamento mobile de cada seção. Pergunte apenas se a falta de informação realmente impede a implementação correta; escolhas gerais de layout prossiga por conta própria com base neste arquivo.
5. Implemente. Use componentes e configurações existentes; novo CSS com escopo limitado, evite seletores globais que poluam; parâmetros, ativos, alt, links de CTA configuráveis. Garanta que seja legível sem JS o máximo possível.
6. Renderização real. Aguarde o carregamento de fontes e mídia, faça capturas de tela em 1440 e 390; compare com a mesma família de página para proporção de título, bordas esquerda/direita, área de mídia, espaço em branco, corte e entrada de compra. Primeiro corrija a estrutura, depois a fonte, depois os detalhes.
7. Verifique a interação. Aba selecionado, limites do carrossel, abertura/fechamento do FAQ, menu, galeria, estado da variante, foco, teclado, reduced-motion, sobreposição sticky; liste claramente as partes não testadas.
8. Entrega concisa. Relate arquivos, verificações executadas e partes realmente não verificadas. Não escreva "captura de tela estática semelhante" como "Shopify executado com sucesso".

Limiar obrigatório ao converter HTML/CSS/JS → Shopify

Este limiar só é acionado ao realmente converter ou entregar um projeto Shopify; esta pesquisa de design e teste visual independente não realizou conversão.

• Antes de editar, verifique o HTML/CSS/JS de origem, imagens, fontes e suposições de tempo de execução; divida em layout/template/section/snippet/assets apropriados, não force uma página inteira em um único arquivo Liquid.
• Deve usar o Shopify MCP disponível atualmente para validar estrutura, Liquid, schema JSON, settings, referências de ativos e compatibilidade de plataforma; se a ferramenta não estiver habilitada / não tiver capacidade de validação, pare de afirmar que o MCP foi verificado, informe que precisa ser habilitado ou pergunte ao usuário se aceita um caminho alternativo claramente documentado.
• Execute theme check, lint/build e visualização Shopify local/dev realmente funcionais; corrija erros de bloqueio antes de entregar. A inicialização local bem-sucedida é parte da entrega, não pode ser transformada em acompanhamento opcional.
• CSS/JS usam forma de carregamento de ativos compatível com Shopify; imagens dinâmicas reutilizam a capacidade de imagem do tema e do Shopify; schema deve ser JSON válido dentro de {% schema %}. Não presuma que este arquivo contém o schema de section original do site ou API de eventos.
• Relate claramente as ferramentas MCP específicas e resultados de validação, comandos reais executados, se o Shopify iniciou sem erros; quando bloqueado por conta/acesso à loja, relate com precisão, não use um servidor estático comum para substituir uma declaração de sucesso.

12. Checklist de Qualidade

• Família da página e URL final do produto confirmados; nenhuma confusão entre diferenças de modelo e responsividade.
• Open Sans carregado realmente, com o peso de fonte correto; tamanho da fonte do título/altura da linha/rastreamento correspondem ao componente alvo.
• O tamanho da fonte não foi enganado por tags H semânticas; quebra de linha do título, largura do texto e referência em inglês têm ritmo semelhante.
• Contêineres de 1200/1400, margens mobile de 12/20 consistentes com o componente alvo; sem padding duplo.
• Módulos de marketing já têm referência de mesma função; nenhum modelo genérico sem fundamento usado apenas combinando tokens, comentários de teste não roubam o visual principal.
• Uso correto de área preta/branca, verde CTA separado da paleta de campanha; gradiente em tons de cinza apenas para títulos escuros adequados.
• Imagens correspondem ao modelo, assunto completo, composição correspondente; verificado pixels reais, largura de renderização e DPR, nenhum pôster de baixa resolução ampliado fingindo ser HD; nenhum parâmetro, avaliação, certificação ou estoque inventado.
• Bordas arredondadas de botões, cartões de produto, cartões técnicos corretas cada uma; sem decoração extra e sombras grandes.
• Capturas de tela reais em 1440/390 verificadas; tablet, ultrawide sem estouro; modo de cartão mobile e abas corretos.
• Estado do menu, Abas, FAQ, carrossel e área de compra utilizáveis; toque, teclado, foco e reduced-motion tratados.
• sticky/footer/cookie/atendimento ao cliente não bloqueiam ações principais; vídeo tem pôster e carregamento controlado.
• Valores inferidos [I] claramente marcados, não confunda estimativa de captura de tela com medição computada.
• Se for conversão Shopify, completou o limiar MCP e inicialização local descrito nesta seção.

13. Referência e Evidência

Páginas e escopo da evidência

ID	URL realmente descoberta e acessada	Uso e escopo
H	Homepage	Navegação, múltiplos Heros, alternância de pontos de venda, abas de vídeo, conteúdo do usuário, Bento de serviço, notícias, Footer; capturas de tela completas 1440/390, medições complementares de componentes em 768/1920
P-A	PDP One Plus: robótico	Área de compra nativa + história técnica completa do produto, gráficos de indicadores, cartão de engenharia, mídia, especificações e FAQ; 1440/390
P-B	PDP One Plus: robot	Primeiro acesso mobile descoberto pelo redirecionamento real de P-A; depois verificado 1440/390 separadamente, confirmado modelo de compra .lps independente
M	Promoção	Hero atual da Black Friday, mecânica da campanha, compra de produtos da campanha, vídeo de avaliação, FAQ; 1440/390
A	Acessórios	Filtro, cartões de produto, grade em ambas as extremidades; 1440/390
B	Sobre Nós	Narrativa da marca, cartão de missão, linha do tempo e carrossel de fotos; 1440/390
C	Política de Devolução e Reembolso	Layout de conteúdo comum, texto de coluna estreita, tabelas e Footer; 1440/390; apenas estude estilos, não fornece interpretação de política

A apresentação e os pontos de venda do produto já estão cobertos pela longa seção de história de P-A/P-B; nenhuma URL adicional fictícia de página de introdução de produto foi criada. FAQ é amostrado com módulos de PDP e página de campanha do site; não misture o Help Center externo do Zendesk como o mesmo tema.

Fontes CSS públicas

• theme.css, versão atual da evidência: tipografia base, button, container, product-card, accordion, footer e breakpoints base.
• layout.css, versão atual da evidência: contêineres de dois níveis Lymow, padding de 12/40/80px, gradiente de texto.
• lymow-purchase-studio.css, versão atual da evidência: Área de compra independente P-B, pacotes, galeria, sticky e breakpoints 900/600.
• <style> dentro do HTML público de H/P/M: arquivos de fonte, variáveis root do tema, configurações de seção específicas e substituições; seletores de componente neste artigo são usados para localização, não exigem cópia de IDs dinâmicos.
• JS dentro do HTML renderizado público: gatilho lazy de vídeo relevante e comportamento DOM. Apenas descreve a implementação observada com base nisso, não afirma ter revisado todos os scripts de front-end.

Confiabilidade e Limites

• Evidência forte: arquivos de fonte reais, variáveis root, substituições de tamanho de fonte, contêineres, número de colunas e espaçamento, bordas arredondadas, tamanho do CTA, materiais de alternância de mídia principal, parâmetros de transição CSS listados.
• Generalização visual: divisão de narrativa em fundo preto / compra em fundo branco, alternância de imagens técnicas e de cena, ângulo de fotografia, densidade da informação, distribuição do CTA.
• Sugestão inferida: proporção do assunto principal e zona segura de texto para novos módulos, esboço de reconstrução, complemento de acessibilidade para estados desconhecidos, tratamento de tabelas longas; nenhum é valor exato do site original.
• Não obtido: Liquid original, arquivos de origem de schema/settings de section, configuração do editor de tema, projeto de construção completo; nenhum código-fonte do tema no início da evidência do espaço de trabalho. Sem backend do Shopify ou modificação de tema online.
• Não verificado: checkout real, estado de estoque esgotado e erro, todos os drawers, todos os idiomas/mercados, todas as páginas em tablet, métricas de desempenho do site completo e auditoria completa de tecnologia assistiva. Não chame este arquivo de certificação para os aspectos acima.
• Ponto mais fraco atual: O mecanismo de roteamento e seleção de versão de P-A/P-B ainda não está claro; P-B tem muitas sobreposições, estados e mudanças de modelo posteriores precisam ser re-verificados. Campanhas mudam, não transforme a skin visual em M em linha de base de longo prazo. Sem tema original, só pode guiar a reconstrução visual, não garante a API interna de componentes reutilizados.

Se no futuro o código-fonte do tema consistente com o online for obtido, priorize complementar: ponto de entrada reutilizável de componentes, mapeamento de schema/settings, fonte única de fontes e tokens, estados reais de hover/disabled/error e mecanismo de seleção de modelo; as regras visuais principais deste pacote público são preservadas no references/design-system.md distribuído com o pacote, e o Skill principal exige explicitamente sua leitura antes da implementação; não depende de arquivos privados fora do pacote.