Vibe‑Coded Prototypes Service
Prompt
Developer: Design a service process for delivering “vibe-coded” prototypes with structured discovery, client-facing markdown documentation, and human developer guidance. The goal is to enable rapid prototyping for voluntary/non-profit tech projects, ensuring client needs are captured in flexible, AI-consumable assets that guide agent-based code generation. You must ensure all necessary assets, instructions, and processes are specified so the service is repeatable, collaborative, and clearly sets expectations for prototype deliverables.
Service Overview
- Begin with a non-traditional discovery process: Focus on outcomes, user needs, and creative vision, not rigid specs.
- Translate client ideas (including visuals or mood boards) into user stories, features, and task lists.
- Document in markdown: prepare guidance docs the AI agent can read and use.
- The developer acts as guide: overseeing AI code-generation, reviewing output, correcting errors, and iterating as needed.
- All assets (guidance, stories, instructions, code) live in a shared, version-controlled repo.
- Deliver a functioning prototype with clear notes on its limitations and next steps for productionisation.
Reasoning, Order, & Output Format
- Always begin with reasoning: plan, break down instructions, and outline the required documentation and process assets.
- Conclusions, results, or lists of needed assets come only after stepwise reasoning.
- If any user-provided example places reasoning after the conclusion, reverse the order in your output.
- All deliverables, checklists, and technical artifacts must be listed last.
Required output format:
- Structured markdown, using headings and bulleted or numbered lists.
- For checklists and asset inventories, use tables with columns for “Asset”, “Purpose/Contents”, “Format/Location”, and “Responsible”.
Deliverable: “Vibe Coded Prototypes” Discovery & Asset Kit
You will produce a service kit outline and asset checklist, covering:
1. Discovery Phase
- Guide to collaborative workshops: what questions, creative exercises, and visual assets to gather.
- Example prompts for extracting vision, goals, and preferences from stakeholders.
- How to capture outputs as markdown summaries: user stories, personality/mood notes, and initial UI concepts.
2. Guidance Documentation for AI Agent
- Checklist of markdown files needed, e.g.:
- 'user_stories.md': Feature bullet points phrased for LLM consumption.
- 'tech_stack.md': Approved stack, preferred frameworks, and restrictions.
- 'design_mood.md': Style notes, sample colors/branding, inspirational links.
- 'api_notes.md': Any API endpoints, example responses, security notes.
- 'glossary.md': Domain-specific language, common terms.
- 'plan.md' or 'tasks.md': Task breakdown for agent, approved by human developer.
- Template snippets for each file type, with [PLACEHOLDER] tags wherever human input is required.
3. Developer Oversight Plan
- Instructions and guiding questions for developer checkpoints before AI coding begins:
- “Review and edit agent plan before code is generated.”
- “After each major change, test functionality, document issues, commit changes.”
- Recommendations for continuous integration, refactoring, and error correction.
- Notes on common agent limitations and how to preempt/mitigate them.
4. Final Prototype Delivery & Handoff
- Structured checklist of prototype deliverables:
- App repo (with code, assets, markdown docs)
- Usage notes & installation instructions (in markdown)
- Known issues & upgrade recommendations
- Roadmap or PRD (what needs to change for production)
- Explicitly flag the prototype as non-production-ready and highlight follow-up steps.
Example: Asset Checklist Table
| Asset | Purpose/Contents | Format/Location | Responsible |
|---|---|---|---|
| user_stories.md | Bullet list of user-facing features | /docs/user_stories.md | Developer, Stakeholder |
| tech_stack.md | Tech stack, frameworks, constraints | /docs/tech_stack.md | Developer |
| design_mood.md | Style/mood notes, branding guidelines | /docs/design_mood.md | Stakeholder, Developer |
| api_notes.md | List/sample of required APIs | /docs/api_notes.md | Developer |
| glossary.md | Project/domain vocabulary | /docs/glossary.md | Stakeholder, Developer |
| plan.md | Overall tasks for AI agent | /docs/plan.md | Developer |
(For real projects, expand with specific examples and use more columns as needed)
Example: Discovery Template Snippet
user_stories.md
- As a [user type], I want to [do something] so that [outcome].
- [ADD additional user stories as identified in discovery.]
tech_stack.md
- Frontend: [FRONTEND_FRAMEWORK]
- AI: [AI_AGENT_SERVICE]
- Hosting: [HOSTING_PREFERENCE]
- [Any disallowed libraries/tools]
Edge Cases and Important Considerations
- If the project involves sensitive data, document that only mock/anonymized data can be used.
- Always add a visible “DO NOT USE FOR PRODUCTION” warning in the deliverables.
- For any ambiguous or creative requirements, ensure at least one markdown file explicitly documents open questions or pending decisions.
Summary: Provide step-by-step, asset-focused service documentation and templates for running a “vibe-coded” prototype creation process (AI agent guided by markdown docs in repo) for voluntary, non-profit tech projects. Ensure assets are enumerated after reasoning; use markdown and tables for structure; provide discovery templates and real-world snippet examples. Consult the reminders above before final delivery.