Documento de framework para desenvolvimento de aplicações usando Vibe…

INEMA

localStorage only

Final product must: - Be responsive (mobile-first) - Use soft transitions - Store mood logs by date - Use clear structure for scaling

Start by creating the Welcome Screen with: - Centered emoji image - Text: "Welcome to MoodMate" - Button: "Start Logging My Mood"

PARTE 5 – MODELO EXPANDIDO⌗

Se quiser criar apps maiores, podemos organizar prompts em blocos reutilizáveis por:

Módulo de cadastro
Módulo de entrada de dados
Módulo de visualização (dashboard)
Módulo de histórico
Módulo de câmera/imagem
Módulo de automação (API, webhook, n8n)

Deseja que eu gere agora um formulário interativo para preencher e gerar seu prompt padrão automaticamente?⌗

Vamos criar um framework padrão para desenvolvimento de aplicações em Vibe Code, baseado em prompts estruturados, boas práticas e etapas reutilizáveis. Isso será útil para plataformas como Lovable, Bolt, Desite, Cursor, Windsurf, entre outras ferramentas no-code/low-code com suporte a linguagem natural.

PARTE 1 – OBJETIVO DO FRAMEWORK⌗

Missão: Padronizar a criação de aplicativos (front + lógica) com uso de prompts claros, estruturados e iterativos que funcionem em qualquer ambiente vibe code com IA assistida.

Pilares do Framework VIBE:

Visão clara do projeto
Interface guiada por propósito
Blocos lógicos modulares e reutilizáveis
Entrega contínua com refinamento por prompt

PARTE 2 – TÓPICOS FUNDAMENTAIS PARA CONSTRUÇÃO⌗

Antes de gerar qualquer aplicação, vamos coletar as informações-base. Isso garante que a IA entenda contexto, objetivo e recursos. Eis os tópicos que você deve responder para que o prompt seja criado com qualidade:

Tópicos obrigatórios para o prompt inicial:⌗

Nome ou ideia do app
Público-alvo e idade média
Objetivo principal (função-chave)
Problema que resolve
Fluxo desejado (passo a passo da jornada do usuário)
Tela inicial esperada
Telas adicionais e suas funções
Estilo visual (ex: minimalista, colorido, dark, Apple-like...)
Tecnologias ou stacks preferidas (ex: React, Tailwind, Supabase...)
Dispositivo-alvo (mobile, desktop, PWA...)
Precisa salvar dados? Onde? (localStorage, DB, planilha...)
Há alguma referência visual ou aplicativo que inspire o projeto?

PARTE 3 – PROMPT PADRÃO (VIBE.CODE)⌗

Quando tiver todas as respostas, aplique o seguinte prompt padrão (em inglês) dentro do Lovable, Cursor ou outro:

PROMPT BASE – APP GENERATION⌗

```You are an expert no-code/low-code assistant. I want to build a [type] application called "[App Name]".

Target audience: [describe the user] Main goal: [main problem to solve] Core feature: [what must work from day one]

App flow: 1. [First screen: description] 2. [Second screen: description] ... n. [Final result or dashboard]

Interface: - Visual style: [style description] - Color palette: [colors] - Typography: [font names or vibe] - Icons: [describe or include links if specific]

Tech stack (preferred): - Framework: [React, Vue, etc] - Styling: [Tailwind, CSS Modules...] - Data: [Supabase, localStorage, etc]

Final product must: - Be responsive for [mobile/desktop/PWA] - Use natural transitions and hover effects - Store and retrieve user input properly - Be modular and scalable

Start by creating [screen name] with these elements: [Detailed list of fields, buttons, texts, logic]

Include placeholder data if needed. Once done, wait for my "Next screen" instruction.```

PARTE 4 – EXEMPLO PRÁTICO⌗

Supondo que queremos um app de rastreamento de humor, com foco em jovens ansiosos.

Resumo preenchido:⌗

Nome: MoodMate
Público: jovens de 15 a 30 anos
Objetivo: rastrear e entender padrões emocionais
Fluxo: boas-vindas → registro de humor diário → insights → histórico
Stack: React + Tailwind, localStorage
Visual: minimalista, emoji-friendly, fonte Manrope
Inspiração: Calm, Headspace

Prompt gerado:⌗

You are an expert no-code/low-code assistant. I want to build a mobile app called "MoodMate".

Target audience: young adults (15–30) managing stress and emotions. Main goal: track daily mood and identify emotional patterns. Core feature: log mood once per day and visualize history.

App flow: 1. Welcome screen with friendly message and emoji background 2. Mood tracker: select current feeling (emoji-based), add optional note 3. Insights: show most frequent moods, trends 4. History: scrollable timeline of past entries

Interface: - Visual style: minimal, emoji-centric, soft colors - Color palette: white, light purple, soft blue - Typography: Manrope - Icons: emoji-style icons for moods

Tech stack: - Framework: React - Styling: Tailwind CSS - Data: