Escolha do Skillry
Suíte SaaS Harborv1.0.2
Use esta Skill para criar página de site.
5.033 downloads0 curtidas1 salvamentos
$4.99
O que eu recebo ao comprar esta Skill?Um protótipo completo de produto SaaS que parece um produto real e acabado: landing page de marketing, preços, login, um workspace logado funcional e um back office de administração, além de case de cliente, changelog público e páginas jurídicas. Todas as telas compartilham um único design porcelana e verde-azulado e um único estado de demo ao vivo, então créditos gastos ou planos alterados em um lugar aparecem em todos os outros. As janelas de produto são desenhadas em código, e a suíte inteira tem temas 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
- Telas de landing, preços, login, workspace e admin, além de páginas de case de cliente, changelog, jurídicas e 404, todas com rotas e compartilhando um único estado de demo ao vivo
- Um workspace funcional para o seu objeto principal: escreva, gere rascunhos com IA usando créditos, agende, gerencie assinantes e veja cada ação chegar ao feed de atividades do admin
- Tipografia Instrument Sans e Geist Mono, botões em pílula verde-azulados, cards suaves, uma paleta de comandos, temas claro e escuro e fotos por função em um único arquivo offline
Ideal para
- Fundadores apresentando uma ideia de SaaS que precisam que o produto inteiro pareça real antes de existir qualquer backend
- Product managers conduzindo demonstrações para stakeholders ou investidores por marketing, app e admin
- Desenvolvedores indie que querem um único design system no site público e no produto logado
Não é para
- Apps em produção com autenticação, pagamentos ou dados reais; login, checkout e créditos são simulações de front-end
- Landing pages isoladas; se você só precisa de uma página de marketing, uma Skill de landing page é mais adequada
- Marcas de consumo chamativas e coloridas; o Harbor é calmo e centrado no produto, com um único destaque verde-azulado
Lançamento de produto e crescimento de appsWeb design e experiências digitaisCriar página de siteCriar landing pageEstilo travadoResultado editávelEntrega rápidaPorcelana verde-azuladaInterface em pílulasCards elevados suavesMockups com moldura de janelaUI clara e escura
Sobre esta Skill
Descreva o seu SaaS e receba toda a superfície do produto de uma vez: um site de marketing, preços, login, o workspace onde o seu objeto principal é criado e o back office que acompanha o negócio. Todas as telas compartilham um único design porcelana e verde-azulado e um único estado de demo ao vivo, então uma ação no app aparece no admin. Tudo chega em um único arquivo que abre offline em qualquer navegador.
O que você recebe
- Uma landing page com uma janela de produto, abas de como funciona, um bento de recursos, um case de cliente, depoimentos, FAQ e uma faixa de cadastro
- Preços com alternância de cobrança, cards de plano, um pacote de créditos e uma tabela comparativa
- Um workspace logado com redação, agendamento, assinantes e configurações, e uma visão de admin com gráfico de receita, seletor de período e tabela ordenável
- Páginas de case de cliente, changelog público, jurídicas e 404, uma paleta de comandos e temas claro e escuro
- Fontes e fotos embutidas, para que a página não faça requisições de rede
Como usar
- Informe à Skill o nome do produto, o que os usuários criam nele, de três a seis recursos, o formato dos seus preços e os números que o negócio acompanha.
- Ela renomeia o workspace, os painéis e as ações de acordo com o seu objeto principal, rascunha os textos que faltarem e os lista para você confirmar.
- Abra o arquivo, entre na conta de demo, execute a ação principal, confira a visão de admin e peça mudanças com palavras simples.
Novas fotos vêm da ferramenta de imagens do seu agente, que pode ter cobranças de uso próprias.
O que você precisa antes de começar
- Você fornece
- Nome do produto e o seu objeto principal, aquilo que os usuários criam ou gerenciam · De três a seis recursos, o formato dos seus preços e os três ou quatro números que o negócio acompanha · Um case de cliente, além de fotos reais se o site mostrar pessoas reais
- 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 as fotos de login, do case de cliente e dos retratos; opcional se você fornecer as suas
- Custos externos
- As fotos que você não fornecer são geradas com a própria ferramenta de imagem do seu agente, o que pode gerar cobranças de uso dessa ferramenta. As janelas de produto são desenhadas em código, e o arquivo 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…