Tópico contém o **FRAMEWORK VIBE.CODE**, um guia estruturado de…

INEMA

localStorage and show in dashboard + recently logged.

---

### 7. FINALIZAÇÃO E LOGOUT

**Prompt 8 – Logout e reset**

Add logout button (top-right corner)
When clicked:
- Clear all localStorage
- Redirect to Welcome Page
If no data on return visit, show Welcome Page again

---

Conclusão⌗

Esse framework estilo "Cal AI" permite construir aplicações completas em vibe code usando apenas linguagem natural estruturada. Ele é compatível com Lovable, Desite, Cursor, Bolt, Windsurf e qualquer plataforma com IA assistida.

---

Deseja que eu gere um modelo exportável (Markdown, PDF ou Notion) com esse framework para reuso ou distribuição?

Vamos estruturar o framework VIBE.CODE inspirado no estilo da transcrição do vídeo do Cal AI, que mistura narrativa prática, etapas naturais, e interações com a IA como se fosse um parceiro de projeto. Esse estilo é direto, baseado em construção contínua com correções e visualizações imediatas, e utiliza prompts claros com instruções visuais.

---

FRAMEWORK VIBE.CODE⌗

Modelo baseado no estilo do vídeo “Como reconstruí o aplicativo viral de US\$ 30 milhões da Cal AI”

---

1. INTRODUÇÃO – APRESENTAÇÃO DO PROJETO À IA⌗

Prompt 1 – Setup inicial:

```Hi, I want to build a [type of app] called “[app name]”.
The app is for [target audience] and the main goal is to [problem the app solves].

I’m using [platform: Lovable, Desite, Cursor, etc.]
Build this as a [mobile app / desktop / PWA] with modern UI.
Use a white background and black text unless told otherwise.

Let’s start by building the welcome screen.```

---

2. FLUXO DE TRABALHO – DIVIDIDO POR TELAS⌗

Cada tela segue o padrão abaixo:

P**rompt 2 – Nova Tela ** N```ow create Page [number]: [Page Name]
Title: “[Main title on screen]”
Subtitle: “[supportive message, optional]”
Elements: - [List buttons, inputs, images, icons]

Style instructions: - Layout: [centered, side-by-side, etc.] - Font: [e.g., Manrope or Google Font] - Colors: [if different] - Specific behaviors: [e.g., full clickable buttons, image rounded, dropdown large]

Include:
- [continue button]
- [back button if not page 1]
- Save data to localStorage if needed

Exemplo inspirado no vídeo:

No```w create Page 3: Height and Weight  
Title: "Height & weight"  
Subtitle: "This will be used to calibrate your custom plan."

Elements:
- Input: Height (cm)
- Input: Weight (kg)
- Both in same row, large, native dropdowns
- Button: "Continue"
- Button: "Back"

Style:
- Use Manrope font
- White background
- Inputs should be easy to tap
- Save to localStorage

```---

### 3. DEBUGGING E REFINAMENTO

Pro**mpt 3 – Correção de erro

T**he``` layout/result is incorrect.  
Fix the following:
- [what is wrong: image too low, input too small, element not aligned]

Please re-render and show updated layout.  
Use step-by-step logic to resolve.

P```rom**pt 4 – Ajustes visuais

Mo**ve``` the [element] to the middle  
Make the [image] full width with rounded corners and margin  
Align [texts/buttons] to the center  
Re-render

--```-

### 4. CÁLCULOS E LÓGICA (BACKEND OU FRONTEND)

Promp**t 5 – Lógica de cálculo no frontend

Add** c```alculation logic for user plan.

Steps:
- Get height, weight, age, gender from localStorage
- Calculate BMR:
  Male: 10 * weight + 6.25 * height - 5 * age + 5  
  Female: 10 * weight + 6.25 * height - 5 * age - 161
- TDEE = BMR * activity_factor
- Goal Adjustment:
  Lose weight: TDEE * 0.8  
  Maintain: TDEE  
  Gain: TDEE * 1.15

Breakdown macros:
- Protein: 2.2g * weight  
- Fat: 0.88g * weight  
- Carbs = remaining calories / 4

Display the numbers in a grid: Calories, Protein, Carbs, Fats
Show a debug log below with all intermediate values.

---```

### 5. DASHBOARD FINAL

Prompt** 6 – Criar Dashboard

Crea**te``` a dashboard page with:

Top bar:
- Logo on the left
- Weekly calendar (pill style)
- Streak count on the right

Section: Daily Summary
- Calories consumed vs target with circular progress
- Macro cards: protein, carbs, fats
- Each card: donut chart + grams left

Section: Recently Logged
- Horizontal scroll list of meals
- Each card: name, calories, time

Floating Action Button:
- Bottom-right
- Camera icon to take picture
- On photo, POST to webhook: [insert URL]
- Receive: description, health_suggestion, macros
- Store in localStorage
- Update dashboard

---

6. INTEGRAÇÃO COM n8n (OU OUTRO BACKEND)⌗

Prompt 7 – Descrevendo o backend

```

**``` When a photo is taken, send it to: proxa.app.n8n.cloud/webhook/xxxxxxxx ↗

It should return: { "description": "text", "health_suggestion": "text", "calories": number, "carbs": number, "protein": number, "fats": number }

Store this in

Framework v3 - Vibe Code App - Clone cal.ai

1