Scribd
Upload
54 views3 pages

Prompt Craft

The document outlines a 2-day prototype plan for PromptCraft, a tool that allows business users to generate a working MVP from a natural language app idea description. It details the infrastructure, frontend and backend stacks, QA automation focus, and development phases necessary to create the MVP. Additionally, it includes demo ideas and potential bonus features to enhance functionality.

Uploaded by

Hanni Cris
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
54 views3 pages

Prompt Craft

The document outlines a 2-day prototype plan for PromptCraft, a tool that allows business users to generate a working MVP from a natural language app idea description. It details the infrastructure, frontend and backend stacks, QA automation focus, and development phases necessary to create the MVP. Additionally, it includes demo ideas and potential bonus features to enhance functionality.

Uploaded by

Hanni Cris
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

PromptCraft: Language-to-Launch MVP Generator - 2-Day Prototype Plan

🧱 Concept Overview

Problem to Solve: Business users can describe an app idea in plain English, and get a working
MVP scaffold: frontend, backend, database, CI/CD config — all exportable or deployable.

Example Prompt:

“Create an event check-in system with QR scanning and a waitlist.”

Prototype Goals:

• Accept natural language prompt.


• Parse it to identify components.
• Generate code structure for frontend + backend.
• Scaffold database schema.
• Enable preview, export to GitHub, or deploy to Vercel.

🛈 Infrastructure Plan

Layer Tool/Tech Reason


Frontend Hosting Vercel Fast, Git-based deployment.
Backend Hosting Supabase Instant DB + API, ideal for scaffolding.
Database Supabase (PostgreSQL) Schema generation + auth.
CI/CD GitHub Actions Push-to-deploy workflow simulation.
LLM Code Gen GPT-4o via API High-quality prompt-to-code output.

💻 Frontend Stack

Component Tool
Framework Next.js or Vite + React
UI Library ShadCN UI
Prompt Input Text field w/ options dropdown
Output View Folder tree preview + code viewer (Monaco Editor)
Action Buttons Preview, Export to GitHub, Deploy to Vercel
🔧 Backend Stack

Component Tool
API Layer Supabase Functions / LangChain backend
Code Generation GPT-4o via OpenAI API
Scaffold Manager File generator + zip (or live code tree)
Database Auth Supabase templates
GitHub Integration GitHub API (optional/stretch goal)

🚪 QA Automation Focus

• Validate generated UIs using Playwright.


• Snapshot testing of folder structure/code output.
• Edge-case prompts and malformed input testing.
• Manual runs of generated code from sample prompts.

⏰ Development Phases (for 2 Days)

Day 1

• Hours 0–2: LLM API setup + prompt processing logic.


• Hours 2–6: Frontend UI and prompt pipeline.
• Hours 6–10: Supabase integration (schema generation).
• Hours 10–12: Generate and test 2–3 prompt examples.

Day 2

• Hours 0–3: UI polish + export/deploy options.


• Hours 3–6: End-to-end testing + QA automation.
• Hours 6–9: Styling, UX polish.
• Hours 9–12: Demo prep: screenshots, deck, flow.

🎡 Demo Ideas

• Prompt: "Create a pet grooming booking app with login and payment screen."
• Output:
o React: login.tsx, booking.tsx
o Supabase: users, appointments tables
o Backend: REST endpoint for bookings
o GitHub-export button (can be stubbed)

🚀 Bonus Features (Stretch Goals)

• Auto-generate OpenAPI docs.


• Toggle stack presets (React vs Vue).
• "Refine Prompt" button to adjust earlier input.

📌 Interface Sketch

(Refer to attached image with prompt input, action buttons, clean layout)

You might also like