Brand Maker
https://brand-maker.vinicius-gpl.com
Monte a identidade visual de uma marca na tela e baixe um kit de design que prende o agente
(Claude Code) ao padrão: skills, hooks e scripts .mjs que conferem cada arquivo editado, mais
os tokens em CSS e Tailwind.
- 30 paletas em 7 grupos (pastel, neon, terroso, joia, corporativo, metálico, iridescente),
cores editáveis, harmonias e paleta aleatória que já sai dentro das regras.
- 10 padrões de interface (Simples, Material 3 Expressive, Fluent 2, Carbon, Primer, shadcn,
Cupertino, GOV.UK, Brutalista, Blueprint) e 7 acabamentos (suave, neon, texturizado, vidro,
metálico, holográfico, papel).
- Regras: nunca preto nem branco puros, contraste AA calculado ao vivo e as 7 leis de UX com
limites ajustáveis.
- 100% estático: o zip é gerado no navegador, nada sai da máquina de quem usa.
Estrutura do repositório
brand-maker/
├── brand-maker/ o app (SvelteKit 3 + Svelte 5 + TypeScript + Tailwind v4)
├── docker/ imagem com Caddy (dockerfile, caddyfile, compose.yaml)
├── docs/ documentação, imagens e banner
└── .github/ workflow que testa e publica no GitHub Pages
Começar
cd brand-maker
npm install
npm run dev # http://localhost:5173
Ou com Docker, da raiz do repositório:
docker compose -f docker/compose.yaml up --build -d # http://localhost:8080
Documentação
| Guia | Para quê |
|---|
| Como usar | Montar a marca: identidade, cores, padrão, acabamento, regras |
| O kit de design | O que vem no zip e como instalar num projeto |
| Desenvolvimento | Comandos, estrutura do código, testes e como estender |
| Publicação | GitHub Pages, Docker, Cloudflare e SEO (sitemap, metatags) |
