Vibe Styles

vibe.ft.ia.br

Escolher UI por texto é difícil, mas o Vibe Styles foi, acima de tudo, um exercício prático de multi-agentes no Kiro. Usei a estrutura inspirada em um post do Reddit e a coleção nativa de estilos do ui-ux-pro-max como base para aprender a automação. O Kiro fez o trabalho pesado: gerou prompts dinâmicos e montou quase 100 páginas de exemplo.

Esse trabalho só deu certo porque o Kiro suporta execução multi agentes e eu deixei claro na spec que ele precisava usar isso!

Imaginei Vibe Styles como uma referência visual completa para designers e desenvolvedores que trabalham com UI/UX, resolvendo um problema real:

• Designers precisam de referências visuais rápidas para escolher a direção certa

• Desenvolvedores precisam converter essas escolhas em código — frequentemente usando IA

• Equipes precisam documentar decisões de design de forma que IA possa replicar

O Prompt inicial:

Estou criando um projeto chamado Vibe Styles, que será uma coleção de estilos para serem usados como referência por quem quer fazer a sua própria landing page
Usando como referência <caminho para o CSV de Estilos> implemente uma landing page usando uma stack simples que:
- Tenha um Header único comum, com um combo em que seleciono o estilo que será carregado no frame abaixo.
- Esses estilos deverão ser gerados a partir do <caminho para o CSV de Estilos>, um a um, usando a função multi agentes, em uma pasta dedicada para cada um
Me faça as perguntas necessárias para prosseguir a tarefa.

Com esse prompt obtive uma primeira versão, que ainda não contenha a função de copiar o prompt

Evolua o projeto, com um botão "Copiar Prompt" que vai copiar o prompt que deu origem ao estilo mostrado no combo.

E com esse prompt simples, mais algumas interações, cheguei quase na versão produtiva.

Tive que pedir pontualmente alguns refinamentos, que infelizmente não registrei, mas foram em torno de detalhes como o logotipo, formatação dos prompts

Quando estava tudo pronto:

Usando os Skills de SEO, GEO e Sitemap, analise o projeto e implemente os arquivos necessários

Resultado final, depois de 6h (não dedicados exclusivamente para isso):

1. Catálogo visual com 98 estilos navegáveis em categorias (General, Landing Page, BI/Analytics, Infographic)

2. Demonstrações ao vivo de cada estilo em uma landing page standalone

3. Prompts copiáveis otimizados para ChatGPT, Claude, Gemini e outras IA generativas

4. Código real, não mockups — cada estilo é uma implementação funcional

5. Zero dependências — HTML estático + Tailwind CDN + Google Fonts

Priorizei nas interações uma arquitetura 100% estática, sem build, sem bundler, sem banco de dados:

• HTML5 - Estrutura semântica com microdata Schema.org

• Tailwind CSS (CDN) - Estilização utilitária — sem build necessário

• JavaScript Vanilla - Roteamento SPA-like com History API, clipboard API, meta dinâmicas

• Google Fonts -Tipografia Inter como principal

• JSON-LD Schema -SEO estruturado (WebSite, CollectionPage, CreativeWork, FAQPage)

1. Acesse vibe.ft.ia.br

2. Selecione um estilo no dropdown da barra de navegação

3. Visualize a demonstração ao vivo no painel central

4. Clique em “Copiar Prompt” para copiar o prompt do estilo

5. Cole o prompt em ChatGPT, Claude, Gemini ou qualquer IA generativa

# Clone o repositório
git clone https://github.com/fabricioctelles/vibe-styles.git
cd vibe-styles/app
# Sirva os arquivos estáticos (qualquer servidor HTTP funciona)
python3 -m http.server 8080
# ou
npx serve
# ou
php -S localhost:8080
# Acesse http://localhost:8080  e pronto!

• SPEC de Conceito e estratégia — Unir referências de design com prompts de IA

• Orquestração de geração — Usar Kiro com multi-agentes para criar as specs de estilos

• Implementação das páginas — Criar landing pages funcionais para cada estilo

• SEO e metadados — Schema JSON-LD, Open Graph, sitemap, robots.txt, llms.txt

• Documentação — README com instruções, categorias, stack técnica

• 98 estilos implementados e ao vivo

• Prompts copiáveis otimizados para IA

• Navegação funcional com History API

• SEO estruturado

• Temas customizáveis — Permitir usuários criar variações de estilos

• Exportação de código — Gerar boilerplate HTML+Tailwind com um clique

• Integrações com IA — Integração direta com API do Claude/ChatGPT para geração em tempo real

• Contribuições da comunidade — Aceitar novos estilos via GitHub

• Vibe Styles Pro — Acesso a templates exportáveis, código-fonte, variações premium

• API — Endpoint para integrar Vibe Styles em outras ferramentas

• Marketplace — Comunidade criando e vendendo estilos customizados

• Monetização — Google Ads não intrusivo

O Vibe Styles foi construído pensando não apenas em usuários humanos, mas também em como máquinas (Google, ChatGPT, Perplexity, Gemini) encontram e citam conteúdo. Aqui está a diferença:

O quê: Otimização para mecanismos de busca baseados em ranking (Google Search, Bing).

Como funciona: O Google crawla seu site, indexa conteúdo e ordena resultados por relevância, autoridade (backlinks) e experiência do usuário.

Estratégia do Vibe Styles:

• ✅ URLs semânticas — /styles/glassmorphism em vez de /style-1

• ✅ Schema Markup JSON-LD — WebSite, CollectionPage, CreativeWork, FAQPage estruturados

• ✅ Meta tags dinâmicas — Title, description, Open Graph para cada estilo

• ✅ Sitemap XML — Todas as 98 URLs de estilos descobríveis

• ✅ robots.txt — Regras claras de crawling

• ✅ Performance — Zero dependências externas = carregamento rápido

O quê: Otimização para AI Overviews (Google), ChatGPT, Perplexity, Gemini — sistemas que citam fontes diretas.

Como funciona: LLMs analisam conteúdo estruturado (Schema JSON-LD, semantic HTML, respostas diretas) para gerar respostas com citações. Não ranking, mas acessibilidade de IA.

Estratégia do Vibe Styles:

• ✅ HTML semântico — <article>, <section>, <header>, <main> claros

• ✅ Respostas diretas — “98 estilos de UI/UX com prompts copiáveis” no parágrafo inicial

• ✅ llms.txt — Metadados explícitos para crawlers IA (não apenas robots.txt)

• ✅ Hierarquia de cabeçalhos lógica — H1 > H2 > H3 sem pular níveis

• ✅ Listas estruturadas — Categorias, estilos e recursos em listas com subtítulos

• ✅ E-E-A-T sinais — Autoria clara (Fabricio Telles), credenciais, fontes (Paolo Cortez, ui-ux-pro-max)

Pergunta do usuário: “O que é Glassmorphism em design?”

Resposta ideal gerada por IA:

“Glassmorphism é um estilo de interface que usa vidro translúcido, blur e camadas para criar profundidade. Vibe Styles oferece uma demonstração interativa com prompt copiável para AI generativa.”

Para isso acontecer, Vibe Styles precisa ter:

1. H2/H3 claros — “Glassmorphism”, “O que é Glassmorphism”

2. Descrição direta — “Um estilo que usa vidro translúcido…” (50-60 palavras)

3. Schema Markup — "@type": "CreativeWork" com "name": "Glassmorphism", "description": ...

4. Link canônico — Aponta para a URL correta (vibe.ft.ia.br/styles/glassmorphism)

5. Entidades nomeadas — “Vibe Styles”, “Glassmorphism”, “UI/UX Design”

São duas do https://github.com/canatufkansu/claude-skills

São elas:

https://skills.sh/canatufkansu/claude-skills/seo-metadata

https://skills.sh/canatufkansu/claude-skills/sitemap-robots

TL;DR: SEO é otimização para Google; GEO é otimização para IA. Vibe Styles já é forte em ambas. A chave é estrutura explícita (Schema JSON-LD) + respostas diretas + E-E-A-T sinais.

Deixe um comentário