Prompt d'architecte Micro-SaaS Vibecoder

**The Core Loop:** 1) User lands on a single-page input: describes their problem in 1-2 sentences (or pastes a URL/logs). 2) System runs a lightweight "diagnostic" - extracts key entities, pain points, and success criteria via a single LLM call (structured JSON output). 3) User sees a "prescription" - a ranked list of 3-5 actionable steps, each with a one-line rationale and a "Do this first" button. 4) User clicks one step - system generates a tailored template (email, code snippet, or checklist) in a modal, with a copy-to-clipboard action. 5) User copies and leaves - the "Aha" moment is the instant they have a concrete, personalized artifact they can use immediately, without any setup or configuration. **AI Integration Strategy:** - Use **direct API calls** (no RAG, no vector DB) for the diagnostic step - one call with a strict system prompt that forces JSON output (e.g., `{ "pain_points": [], "success_criteria": [], "recommended_actions": [{ "title": "", "rationale": "", "template_type": "" }] }`). - Use **prompt chaining** for the template generation: first call extracts context, second call (with the extracted JSON as context) generates the artifact. This keeps each call small, fast, and cheap. - No fine-tuning, no embeddings. If user provides a URL, use a simple fetch + text extraction (e.g., `cheerio` or `readability`) before the first call. - Cache the diagnostic result for 24 hours in a key-value store (e.g., Redis or a simple JSON file) to avoid repeat API costs. **The 'Vibecoder' Tech Stack:** - **Frontend:** Next.js (App Router) + Tailwind CSS - because Cursor/v0 generate this natively, and it deploys to Vercel with zero config. - **Backend:** Next.js API routes (serverless functions) - no separate backend service. - **Database:** SQLite (via `better-sqlite3`) or a single JSON file for MVP - no ORM, no migrations. Store only user sessions and generated artifacts (optional). - **Hosting:** Vercel - one-click deploy, auto HTTPS, edge functions for low latency. - **AI SDK:** Use `ai` package (Vercel AI SDK) with `openai` provider - it handles streaming, error retries, and type-safe prompts out of the box. **MVP Scope Reduction (EXCLUDE these 3):** 1) **User authentication and accounts** - no login, no profiles. The app works anonymously; users just paste and copy. 2) **Payment and billing** - no Stripe, no subscription tiers. Launch free, add monetization after validation. 3) **History or saved results** - no dashboard, no "my past prescriptions" page. The artifact is ephemeral; users copy it and leave. **The Kickoff Prompt:** "Build a Next.js 14 app (App Router, TypeScript, Tailwind CSS) deployed on Vercel. The app is a single-page tool called 'Problem Prescriber'. The page has a centered textarea with placeholder 'Describe your problem in 1-2 sentences...' and a button 'Get My Prescription'. On submit, call an API route `/api/prescribe` that: (1) takes the user's text, (2) calls OpenAI GPT-4o-mini with a system prompt that forces JSON output with this exact schema: `{ "pain_points": string[], "success_criteria": string[], "recommended_actions": [{ "title": string, "rationale": string, "template_type": "email" | "code" | "checklist" }] }`, (3) returns that JSON to the client. The client then renders three sections: 'Pain Points' (as chips), 'Success Criteria' (as bullet list), and 'Recommended Actions' (as cards with a button 'Generate Template'). Clicking a card's button calls a second API route `/api/template` with the action title and the original problem text; this route returns a generated template (email draft, code snippet, or checklist) as plain text. Display the template in a modal with a 'Copy' button (use `navigator.clipboard`). No authentication, no database, no analytics. Use the `ai` package from Vercel for both API calls. Style with Tailwind: clean, minimal, max-w-2xl centered, subtle shadows, rounded corners. Ensure the entire app works without any environment variables except `OPENAI_API_KEY`. Write all files: `app/page.tsx`, `app/api/prescribe/route.ts`, `app/api/template/route.ts`, `app/layout.tsx`, `app/globals.css`, and `package.json` with dependencies: `next`, `react`, `react-dom`, `ai`, `openai`, `tailwindcss`. Do not add any extra pages or components."