
Galeria de prévias
Skills semelhantes
Ver todas as SkillsO que você recebe
- Um site com 23 rotas: modelos com três páginas de produto, tecnologia, aplicações com quatro páginas de casos, journal com três artigos, downloads, sobre, agendamento de demonstração, FAQ, newsletter, páginas legais e 404
- Controles funcionais: seletor de modelos no Hero, galeria de produtos, configurador com total parcial, alternância da comparação, filtros de módulos com ordenação e busca, filtro de downloads e busca no FAQ
- Tipografia Inter Tight e IBM Plex Mono, cards de especificações brancos e discretos e fotos de estúdio prateadas, tudo em um único arquivo que abre offline
Ideal para
- Fabricantes de robôs, drones, bicicletas elétricas, áudio e câmeras com uma família de produtos para apresentar
- Startups de hardware que precisam de especificações, comparações, downloads e agendamento de demonstração em um só site
- Marcas de instrumentos de laboratório e equipamentos que querem um visual sereno e técnico em vez de uma página de lançamento barulhenta
Não é para
- Pedidos ou pagamentos reais: o configurador e o formulário de demonstração confirmam na página e avisam que nada foi enviado
- Produtos apenas de software, sem nada físico para fotografar
- Marcas que querem um visual escuro ou colorido; a paleta é prata, branco e grafite
Identidade visual e sistemas de marcaWeb design e experiências digitaisCriar site de produtoEstilo travadoResultado editávelBento de robôRecursos do robôHero de robôFicha técnica do robô
Sobre esta Skill

Transforme sua linha de produtos em um site de marca sereno e técnico: um nome de modelo gigante e fino sobre fotografia de estúdio prateada, cards de especificações brancos e discretos e uma linha de produtos desenhada em altura relativa real. O exemplo cobre três robôs em 23 rotas conectadas, e o site chega como um único arquivo que abre offline em qualquer navegador.

O que você recebe
- Um seletor de modelos no Hero que troca imagem, nome, chamada e especificações, a linha da família em escala e um bento de hardware assimétrico com uma célula de código
- Páginas de modelo com galeria e configurador, comparação lado a lado com opção de mostrar só as diferenças e um catálogo de módulos com filtros
- Tabs de tecnologia, páginas de casos de aplicação, um journal, downloads com filtros, uma página sobre com linha do tempo, FAQ com busca e agendamento de demonstração
- Formulários com validação que levam sua configuração para o pedido de demonstração e confirmam na própria página
- Inter Tight e IBM Plex Mono embutidas junto com todas as imagens, para a página não fazer nenhuma requisição de rede

Como usar
- Passe para a Skill sua marca, seus produtos com códigos, especificações e preços, seu público e as páginas de que você precisa. Adicione fotos dos produtos, se tiver.
- Ela preenche todas as páginas, gera as imagens que faltarem em um mesmo estilo de estúdio e lista os dados rascunhados para você confirmar.
- Abra o arquivo, teste o seletor, o configurador e os filtros e peça ajustes com suas próprias palavras.

As imagens que você não fornecer vêm da ferramenta de imagem do seu agente, que pode ter as próprias cobranças de uso.
O que você precisa antes de começar
- Você fornece
- Nome da marca, público e as páginas de que você precisa · De dois a quatro produtos com códigos, principais especificações, preços e a finalidade de cada um · Opcional: fotos dos produtos, parceiros, depoimentos e dados da empresa que você possa confirmar
- Dependências
- Node.js 18 ou mais recente na máquina do seu agente, para rodar o script incluído que gera o arquivo único offline · Acesso à internet durante a geração do arquivo, para que as fontes sejam baixadas uma vez e embutidas · Uma ferramenta de imagem no seu agente para Heroes de produto, fotos de corpo inteiro, closes e cenas; opcional se você fornecer suas próprias fotos
- Custos externos
- As imagens que você não fornecer são geradas com a ferramenta de imagem do seu próprio agente, o que pode gerar cobranças de uso dessa ferramenta. A página final não faz requisições de rede. Ver o exemplo não custa nada.
- Último teste
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Avaliações dos usuários
Carregando avaliações…









