Landing page de devtool Tracklanev1.0.5
Use esta Skill para criar página de site.
Em alta
5.032 downloads0 curtidas0 salvamentos
$4.99
O que eu recebo ao comprar esta Skill?Crie um site de marketing completo para uma ferramenta de desenvolvedor, com fundo areia quente, faixas de seção em menta, títulos compactos e um Hero dividido e discreto ao lado de uma janela de produto ao vivo. Tabs de fluxo de trabalho, trilha de avaliação, segurança, preços e páginas complementares funcionam, tudo em um único arquivo autocontido que abre em qualquer navegador, funciona offline e tem tema claro e escuro.
Mais escolhida por
Atualizada em 3 de out. de 2026
Galeria de prévias
Skills semelhantes
Ver todas as Skills
O que você recebe
- Um único arquivo de site autocontido que abre em qualquer navegador e funciona offline, com fontes e imagens embutidas; ou uma versão portada para o seu projeto com framework, se você tiver um.
- Uma janela de produto ao vivo com visualizações de quadro, burn-up e roadmap, além de bento funcional, tabs de ciclos, tabs de fluxo para linha de comando, Git e API, e preços com alternância de cobrança.
- Páginas de comparação de preços, changelog, login, cadastro, agendamento de demo, segurança, case de cliente, empresa e jurídico, com um tema escuro completo.
Ideal para
- Equipes lançando um issue tracker, uma ferramenta de planejamento ou outro produto B2B para desenvolvedores.
- Ferramentas de incidentes, CI ou deploy que conseguem mapear seus estados nas visualizações de quadro, burn-up e roadmap.
- Produtos vendidos para compradores técnicos que esperam uma trilha de avaliação, fatos de segurança e uma tabela comparativa.
Não é para
- Contas reais, login ou envio de formulários; os formulários validam e mostram apenas resultados de demonstração honestos.
- Sites que precisam de um sistema de gerenciamento de conteúdo ou de vários idiomas já de saída.
- Exibir logotipos reais de clientes ou afirmações que você não pode confirmar; sem clientes reais, o letreiro e os depoimentos são removidos.
Lançamento de produto e crescimento de appsWeb design e experiências digitaisCriar página de siteCriar landing pageGerar template de siteEstilo travadoResultado editávelFoco em conversãoBento GridCards degradê arredondadosSeções areia e mentaTítulos com espaçamento justoHero com janela de produto ao vivo
Sobre esta Skill
A Landing page de devtool Tracklane cria o site de marketing de uma ferramenta de desenvolvedor com cara de site de empresa pronto: fundo areia quente com faixas de seção em menta, tinta quase preta, títulos compactos e um Hero dividido e discreto com uma janela de produto ao vivo à direita. O exemplo é a Tracklane, um issue tracker fictício para planejamento de ciclos, com home completa e páginas de preços, changelog, login, cadastro, demo, segurança, case de cliente, empresa e jurídico.
O que você recebe
- Um único arquivo de site autocontido que abre em qualquer navegador e funciona offline, com fontes e imagens embutidas. Se você já tem um projeto com framework, a mesma estrutura é portada para ele.
- Uma janela de produto desenhada a partir dos seus próprios objetos, com visualizações de quadro, burn-up e roadmap que alternam sozinhas uma vez, e um card que se move quando um branch recebe push.
- Seções da home que funcionam: cards de métricas que contam até o valor, um bento de cinco blocos com fila de triagem e thread de issue, tabs de ciclos, tabs de fluxo de desenvolvimento para linha de comando, Git e API com botão de copiar, uma trilha de avaliação, segurança, depoimentos, preços com alternância de cobrança e um FAQ.
- Páginas internas com tabela comparativa de preços, changelog com filtros e busca, login com verificação de single sign-on, cadastro, agendamento de demo, um case de cliente, página da empresa com vagas abertas, privacidade, termos e uma página de não encontrado.
- Um tema escuro completo e animações calmas que respeitam a configuração de movimento reduzido.
Como usar
- Informe o nome do produto e a promessa em uma frase, os objetos de trabalho que ele gerencia, cinco recursos, como ele se encaixa no Git, na linha de comando e na API, fatos de segurança, planos de preço e sua CTA principal. Dados que faltarem são rascunhados como placeholders plausíveis e listados para você confirmar.
- Diga ao agente quais três visualizações mostram melhor o seu produto, por exemplo incidentes, deploys ou tickets em vez de issues.
- Abra cada página no tema claro e no escuro, no desktop e no celular, teste a janela de produto, o bento, as tabs e os formulários, e peça ajustes.
A tipografia usa Inter Tight, Inter e Geist Mono, embutidas no arquivo. As fotos de clientes e da equipe vêm da própria ferramenta de imagem do seu agente e podem gerar cobranças de uso; o produto em si é sempre desenhado, nunca uma captura de tela gerada.
O que você precisa antes de começar
- Você fornece
- Nome do produto, promessa em uma frase e os objetos de trabalho que ele gerencia · Recursos, fluxo de desenvolvimento, fatos de segurança, planos de preço e sua CTA principal · Depoimentos e métricas de clientes que você pode usar, ou permissão para criar placeholders para você 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, ou suas próprias fotos, para as fotos de clientes e da equipe
- Custos externos
- Retratos de clientes, a foto do case e a foto da equipe são gerados com a própria ferramenta de imagem do seu agente, que pode cobrar pelo uso. Sem uma, envie suas próprias fotos ou remova as seções de depoimentos e de case; a janela de produto não precisa de imagens. Ver o exemplo não custa nada.
- Último teste
- v1.0.5 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Avaliações dos usuários
Carregando avaliações…