O que oh-my-website faz?
Habilidade de agente de IA para gerar sites pessoais polidos de múltiplas páginas: estruturas de página alinhadas à identidade, temas via variáveis CSS com cinco predefinições de cores e entrega de HTML estático sem dependências.
Recursos
- Geração de Site Completo: Cria automaticamente páginas sobre, portfólio, blog e contato baseadas na personalidade do usuário.
- CSS Variable Theming: Cinco predefinições de cores (light, dark, vibrant, retro, neutral) que podem ser alternadas instantaneamente alterando variáveis CSS na raiz.
- Zero Dependency: Todo o código é HTML, CSS e JavaScript puro. Nenhuma biblioteca externa ou framework é necessário.
- Identidade Visual Consistente: As páginas seguem um sistema de design coeso com tipografia, espaçamento e cores harmoniosas.
- Personalizável: Fácil modificar o conteúdo, adicionar novas seções ou ajustar o tema editando diretamente os arquivos gerados.
Plataformas Suportadas
- Claude Code (
claude code) - Cursor (
cursor) - Codex CLI (
codex) - Qualquer agente compatível com a especificação de skills SKILL.md
Como Usar
- Invoque a skill com um prompt como: "Gere um site pessoal para mim usando windy/oh-my-website".
- Forneça informações sobre seu nome, profissão, interesses e seções desejadas.
- Escolha um tema dentre os cinco disponíveis ou personalize as cores.
- Implante os arquivos HTML estáticos em qualquer servidor web (GitHub Pages, Netlify, etc.).
Exemplo de Prompt
Crie um site pessoal usando windy/oh-my-website. Meu nome é Ana Silva, sou designer UX. Quero páginas 'Sobre', 'Portfólio' (com 3 projetos: redesign de app, site de marca pessoal, dashboard interativo), 'Blog' (artigos sobre Design Thinking e Acessibilidade) e 'Contato'. Use o tema 'light'. Inclua links para meu LinkedIn (https://linkedin.com/in/ana) e GitHub (https://github.com/ana-silva).
Estrutura Gerada
Após a execução, você receberá uma pasta contendo:
meu-site/
├── index.html (página inicial)
├── sobre.html
├── portfolio.html
├── blog.html
├── contato.html
├── css/
│ └── styles.css (variáveis CSS e estilos globais)
└── js/
└── main.js (scripts de navegação, tema, etc.)
Customização de Tema
Para alterar o tema manualmente, edite o bloco :root em css/styles.css:
:root {
--cor-primaria: #0b5e7c;
--cor-secundaria: #13a6b0;
--cor-fundo: #ffffff;
--cor-texto: #333333;
--fonte-principal: 'Segoe UI', Tahoma, sans-serif;
}
Licença
MIT