
Galeria de prévias
Skills semelhantes
Ver todas as SkillsO que você recebe
- 22 páginas conectadas: home, índice de trabalhos, quatro estudos de caso, serviços com três páginas de detalhe, sobre, experiência, um diário com quatro artigos, contato, FAQ, newsletter, privacidade e 404
- O visual de rabisco: títulos em Young Serif, texto em Figtree, notas à mão em Kalam, uma bolha lilás no retrato, fita, setas e sublinhados que se desenham uma vez na tela
- Partes que funcionam: um estimador de preço, filtros de trabalhos com busca e ordenação, abas de prévia nos estudos de caso, um carrossel de depoimentos, abas de FAQ e formulários validados, em um único arquivo offline
Ideal para
- Desenvolvedores front-end e product designers que querem um portfólio com personalidade em vez de um template escuro
- Pequenos estúdios, ilustradores e criadores de produtos independentes que conseguem encaixar o seu trabalho em estudos de caso, serviços e notas
- Freelancers que querem mostrar preços e processo logo de cara e receber contatos mais qualificados
Não é para
- Marcas corporativas ou formais; as notas à mão e os fundos em tons pastel são propositalmente descontraídos
- Envio real de mensagens: os formulários de contato e de newsletter confirmam na própria página e precisam do seu próprio backend para enviar
- Sites sem uma pessoa em destaque; o Hero é construído em torno de um retrato e de um cartão com o nome
Identidade visual e sistemas de marcaWeb design e experiências digitaisCriar site de portfólioEstilo travadoResultado editávelHero com doodlesNota à mãoNota de identificaçãoPalco de retrato
Sobre esta Skill

Transforme o seu trabalho em um portfólio com cara de caderno de esboços: um título serifado gigante em azul-cobalto sobre creme quente, o seu retrato recortado em uma bolha lilás com um crachá colado com fita, e setas, flores e sublinhados desenhados à mão que fazem parte do layout. O site de exemplo tem 22 páginas conectadas e chega como um único arquivo que abre offline em qualquer navegador.

O que você recebe
- Home com sobre, serviços, trabalhos selecionados, experiência, processo, ferramentas, depoimentos, notas e uma chamada para ação no fim
- Estudos de caso com prévias de produto desenhadas em abas de desktop, celular e componentes, além de um índice de trabalhos com filtros, busca e ordenação
- Serviços com cards de preço fixo e um estimador ao vivo que atualiza uma faixa de preço conforme você escolhe
- Sobre, experiência, um diário com artigos completos, FAQ, newsletter, privacidade, contato e uma página 404 com design próprio
- Young Serif, Figtree, Kalam e Geist Mono embutidas junto com todas as imagens, para que a página não faça nenhuma requisição de rede

Como usar
- Compartilhe o seu nome, função, projetos, serviços e contatos, além de um retrato se você tiver.
- A Skill preenche todas as páginas, escreve o que faltar como texto provisório plausível e lista tudo para você confirmar.
- Abra o arquivo, teste o estimador, os filtros e os formulários e peça mudanças com suas próprias palavras.

Fotos e ilustrações que você não fornecer vêm da ferramenta de imagem do seu agente, que pode ter cobranças de uso próprias.
O que você precisa antes de começar
- Você fornece
- Seu nome, função, localização e uma breve apresentação, além de um retrato se você tiver · De dois a seis projetos com o briefing, as principais decisões e o resultado, e os serviços que você oferece com preços · Opcional: experiência, ferramentas, depoimentos, artigos e contatos
- 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 o retrato, as fotos de estúdio e de contexto e as ilustrações do diário; opcional se você fornecer as suas
- Custos externos
- Fotos e ilustrações que você não fornecer são geradas com a ferramenta de imagem do seu próprio agente, o que pode gerar as cobranças de uso dessa ferramenta. As prévias de produto são desenhadas em código, e 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…









