Blueprint for VIBE CODING
We applied a PROMPT to francAIs SPECS for DEVELOPERS (see previous post) to drive ChatGPT to generate the francAIs Blueprint for VIBE CODING.
Abstract of the PROMPT applied to the SPECS for DEVELOPERS to prepare the documentation for VIBE CODING:
• The Prompt was designed to generate first, from the SPECS for DEVELOPERS of the francAIs PROTOTYPE, a step-by-step plan for building the francAIs PROTOTYPE WEB-APP project. Then, once we have the plan, break it down into small, iterative chunks that build on each other. From this foundation provide a series of incremental LLM Prompts for a code-generation that will implement them in a test-driven manner. Make sure that each LLM Prompt builds on the previous LLM Prompts.
Then ChatGPT generated a 26-page Blueprint for VIBE CODING with 29 LLM Prompts. Examples of LLM Prompts below:
Prompt 1 – Create Rails App & Basic Config
You are my Rails pair programmer.
Task:
Create a new Ruby on Rails 7 app named `francais_prototype` using PostgreSQL, optimized for a desktop-first web app. Use the default Minitest test framework.
Step-by-step requirements:
1. Generate the Rails app:
- Database: PostgreSQL.
- Skip any frontend frameworks beyond default Rails (we'll add Bootstrap manually).
2. Configure database.yml minimally for PostgreSQL (assume local dev).
Etc
______________________________________________________
Prompt 7 – Layout: Navbar & Footer (Basic Wiring)
We now have basic pages.
Task:
Implement a Bootstrap navbar and footer in `application.html.erb` that will support the final app structure.
Requirements:
1. Navbar (visible on all logged-in pages; for now, show same bar always):
- Left: "francAIs" brand link to root.
- Center: Placeholder "Modules" dropdown (links can be `#` for now).
- Right: Placeholder text for:
- "Modules restants : —"
- "Niveau : —"
- Links "Mon profil" and "Déconnexion" (use `link_to` where appropriate; they can point to Devise routes or placeholder paths).
2. Footer:
- Centered text with links:
- "Tutoriel" → `pages#tutorial`
- "Contact" → `pages#contact`
Etc
______________________________________________________
Prompt 11 – Module 1: Basic View & Static Citation Stub
Navbar and basic structure exist.
Task:
Implement the first version of Module 1 – Citation du jour, using a static stub instead of real AI.
Requirements:
1. In `ModulesController#module1`, set an instance variable:
- `@citation` (string of a French quote).
- `@author`
- `@date` (optional).
2. Create `app/views/modules/module1.html.erb`:
- Show brief instructions at the top (paragraph).
- Show a Bootstrap card:
- Citation text in bold.
- Author/date in italics.
- A placeholder TTS button (no JS yet) aligned to the right.
3. Update navbar "Modules" dropdown to link "Module 1 – Citation du jour" to `/module1`.
Etc
______________________________________________________
Prompt 14 – Module 2: Word Counter JS (Soft Stop, Front-End Only)
Server-side validation exists for Module 2.
Task:
Add front-end JS to track word count and block submission when not between 100 and 120, with a soft stop.
Requirements:
1. Add a small JS file (e.g., `app/javascript/module2_word_counter.js` or equivalent for your asset pipeline) that:
- Listens for input events on the Module 2 textarea.
- Counts words with same splitting rules as the server.
- Updates the "Mots : X / 120" display.
- Changes its color to red when X < 100 or X > 120, normal otherwise.
- Disables the submit button (via `disabled` attribute) when out of range.
2. Only load this JS on Module 2 pages (e.g., using a data attribute or conditional in the layout).
Etc
______________________________________________________
Prompt 19 – Module 3: Vocabulary Result Cards & modules_used Increment (Stubbed Data)
Module 3 form exists and validates inputs.
Task:
Render vocabulary results as cards (stubbed words/sentences) and increment modules_used on success.
Requirements:
1. After a valid POST to `submit_module3`:
- Use static stub data like an array of hashes:
- `{ word: "manger", sentences: ["Je mange…", "Ils aiment manger…"] }`.
- Render a view with one Bootstrap card per word:
- Card title: the word in bold.
- Card body: two sentences.
2. Increment `current_user.modules_used` by 1 only on successful generation.
3. Test lock interaction:
- If modules_used reaches 10 due to Module 3, user becomes locked.
Etc
______________________________________________________
Prompt 28 – Final QA: End-to-End Flow Tests
Core functionality and AI integration are in place.
Task:
Add system/integration tests that cover the full user journey:
1. Normal user:
- Sign-up.
- Verification (simulate correct code).
- First Module 2 completion:
- Level assigned.
- Trial started.
- Welcome card shown.
- Use Module 2 and 3 until lock:
- modules_used increments correctly.
- Lock screen appears after 10 uses (or simulated).
2. Demo user:
- Visit `/demo`.
- Confirm user is logged in with modules_used = 0 and no level.
- Go through Module 2 once.
- Confirm level is set and trial started.
Etc
______________________________________________________