Communitygithub.com

samarv/Shanon

Construa, prototipe e implante rapidamente software full-stack usando ferramentas de 'texto para aplicativo' com IA. Use este comando quando precisar criar um aplicativo do zero, construir um protótipo funcional de alta fidelidade para testes com usuários ou contornar gargalos tradicionais de engenharia para ferramentas internas.

O que é Shanon?

Esta skill transforma o papel do Gerente de Produto ao permitir que ele direcione diretamente um agente de IA para construir software, substituindo a redação de requisitos tradicionais. O framework 'JIRA-Prompt' ensina a tratar interações com ferramentas como Bolt, Cursor ou outras plataformas de 'texto para app' como tickets de alta qualidade, especificando escopo técnico, stack (ex.: Supabase, Netlify) e dados de contexto. O fluxo de trabalho cobre desde a extração de design do Figma até a prototipagem ao vivo e implantação com um clique, reduzindo o tempo de desenvolvimento de meses para semanas e custos em até 99%. A skill inclui exemplos práticos (como um CRM para corretores de imóveis ou landing pages de marketing) e alerta sobre armadilhas comuns, como migrar código legado ou superdetalhar o prompt inicial. Ideal para engenheiros e PMs que desejam prototipar rapidamente aplicações funcionais full-stack sem depender de equipes de desenvolvimento tradicionais.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/samarv/Shanon/tree/HEAD/.claude/skills/ai-native-product-building
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

A construção de produtos nativa de IA muda o papel do Gerente de Produto de escrever requisitos para outros para dirigir diretamente um agente de IA a construir o software. Essa abordagem reduz o tempo de desenvolvimento de meses para semanas e os custos em até 99%.

O Framework "JIRA-Prompt"

Trate cada interação com um agente de IA (como o Bolt) como se estivesse escrevendo um ticket de alta qualidade para um desenvolvedor sênior.

1. Defina o Escopo Técnico

Em vez de descrições genéricas, forneça os parâmetros específicos que a IA precisa para iniciar o ambiente:

  • Identifique a Funcionalidade Principal: "Faça um clone do Spotify com streaming, playlists e suporte a arquivos MP3."
  • Especifique a Stack: Informe as integrações desejadas (ex.: "Use Supabase para o banco de dados e Netlify para hospedagem").
  • Forneça Contexto de Dados: Cole dados brutos (ex.: bio do LinkedIn, linhas de CSV ou diretrizes de marca) diretamente no prompt para dar contexto à IA.

2. Equilibre Especificações com "Vibes"

Agentes de IA têm melhor desempenho quando recebem uma mistura de requisitos rígidos e liberdade criativa.

  • Alta Especificidade: Use isso para lógica de negócios, esquemas de dados e fluxos de usuário.
  • O Prompt de "Vibe": Para UI/UX, use linguagem descritiva em vez de CSS específico.
    • Exemplo: "Faça parecer um site de doações médicas de alto nível — limpo, profissional e confiável."
    • Exemplo: "Deixe mais bonito e moderno."

3. Implemente Depuração Iterativa

Quando a IA travar ou produzir um erro:

  • Depuração por Captura de Tela: Envie uma captura de tela do problema de UI ou da mensagem de erro e peça: "Corrija isso para corresponder ao design pretendido."
  • O Protocolo "Desatolar": Se a IA falhar após 3 tentativas em um problema de lógica específico, mude para uma abordagem com humano no loop. Consulte um especialista ou desenvolvedor para corrigir aquele "cantinho" específico, mantendo a IA no comando do código mais amplo.

Fluxo de Trabalho: Do Figma à Implantação

Passo 1: Extração de Design

Use o método de URL direta para converter designs estáticos em código:

  • Pegue a URL do seu design no Figma.
  • Prefixe com a URL da ferramenta de IA (ex.: bolt.new/[FIGMA_URL]).
  • Permita que o agente "absorva" os ativos e o layout para criar o ambiente inicial.

Passo 2: Prototipagem ao Vivo

Em vez de arrastar quadros no Figma, solicite mudanças funcionais:

  • "Adicione uma página de login usando Supabase Auth."
  • "Crie um painel que puxe dados da tabela de usuários."
  • Teste o aplicativo em tempo real no seu próprio dispositivo usando prévias de QR code.

Passo 3: Implantação com Um Clique

Mova imediatamente o aplicativo para uma URL de produção:

  • Clique em "Implantar".
  • Conecte a um provedor de hospedagem (Netlify/Vercel).
  • Anexe um domínio personalizado para transformar o protótipo em um negócio ativo.

Exemplos

Exemplo 1: O CRM "Do Zero ao Mercado"

  • Contexto: Um empreendedor precisa de um CRM personalizado com cobrança via Stripe, mas não tem orçamento para uma agência de US$ 30.000.
  • Entrada: "Construa um CRM para corretores de imóveis. Inclua rastreamento de leads, integração com Stripe para assinaturas mensais e um rascunhador de e-mails com IA. Use uma UI limpa com tema azul."
  • Aplicação: Use o Bolt para gerar o aplicativo base. Itere dizendo "Adicione uma coluna para 'Data do Último Contato'" e "Integre a chave de teste do Stripe".
  • Saída: Um produto SaaS funcional e gerador de receita, construído em 3 semanas por cerca de US$ 300 em custos de inferência.

Exemplo 2: Página de Destino de Marketing Rápida

  • Contexto: Um PM precisa de uma landing page para um experimento de nova funcionalidade.
  • Entrada: [Cole a Bio do LinkedIn/Especificações da Marca] + "Crie um site de portfólio pessoal. Use um modo escuro profissional. Adicione uma seção para 'Projetos Atuais' que eu possa editar facilmente."
  • Aplicação: Gere o site, depois peça: "Adicione um formulário de contato que envie entradas para meu e-mail."
  • Saída: Uma URL hospedada e ativa pronta para tráfego em menos de 10 minutos.

Armadilhas Comuns

  • Migração de Código Legado: Não tente mover uma base de código de produção de 20 anos e milhares de arquivos para um agente de IA baseado em navegador. Use essas ferramentas para projetos do zero ou "pods" isolados, como painéis administrativos e sites de marketing.
  • Superdetalhar o Primeiro Rascunho: Evite escrever um prompt de 5 páginas para a primeira versão. Comece com a base do "Clone do Spotify" e adicione funcionalidades uma a uma para evitar que a IA fique confusa.
  • Ignorar o Determinismo: Lembre-se de que código é determinístico — ou funciona ou não. Se a IA produzir um aplicativo quebrado, verifique se o ambiente (WebContainer) terminou de inicializar antes de assumir que o código está errado.
  • Tratar Apenas como Designer: Não use apenas para UI. Aproveite a capacidade de construir "Full Stack" (bancos de dados, autenticação, APIs) para garantir que o protótipo seja realmente funcional, não apenas um mockup de alta fidelidade.

Habilidades Relacionadas

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community