This template generates self-contained, actionable prompts for any API documentation. Each generated prompt includes complete context, clear instructions, and proper validation steps.
API_NAME: [e.g., "Stripe", "OpenAI", "Twilio", "Shopify"]
API_DOCS_URL: [e.g., "https://docs.stripe.com/api", "https://platform.openai.com/docs/api-reference"]
BUSINESS_NAME: [e.g., "AgenticVoice.net", "PaymentFlow.com", "AIAssistant.io"]
PRIMARY_ENTITY: [e.g., "customer", "user", "project", "order"]
ENTITY_ID_FIELD: [e.g., "customer_id", "user_id", "project_id", "order_id"]
BUSINESS_CONTEXT: [e.g., "voice AI service provider", "e-commerce platform", "SaaS application"]
ADMIN_INTERFACE_PURPOSE: [e.g., "manage customer payments", "track user activity", "monitor project usage"]
BRAND_COLORS: [e.g., "Primary: #5073b8, Secondary: #1098ad, Accent: #f79533"]
BRAND_FONTS: [e.g., "Primary: Inter, Secondary: DM Serif Display"]
BRAND_GRADIENT: [e.g., "linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82)"]
BRAND_VOICE: [e.g., "Professional, confident, solution-oriented"]
TARGET_AUDIENCE: [e.g., "Medical and legal practices", "E-commerce businesses", "SaaS companies"]
Use this exact template structure for each generated prompt. Replace [VARIABLES] with the input values above.
You are building a comprehensive [API_NAME] admin interface for [BUSINESS_NAME], a [BUSINESS_CONTEXT]. This interface will [ADMIN_INTERFACE_PURPOSE] using a Big Picture → [PRIMARY_ENTITY] → Granular navigation hierarchy.
Business: [BUSINESS_CONTEXT]
Colors: [BRAND_COLORS]
Typography: [BRAND_FONTS]
Gradient: [BRAND_GRADIENT]
Voice: [BRAND_VOICE]
Target: [TARGET_AUDIENCE]
- Frontend: React 18 with Tailwind CSS and DaisyUI
- Backend: Netlify Functions (no [API_NAME] keys in frontend)
- Navigation: Big Picture → [PRIMARY_ENTITY] → Granular drill-down
- Security: All [API_NAME] API calls through backend functions only
[List specific API endpoints with URLs and descriptions]
[Specific, detailed task description with clear deliverables]
[Detailed implementation instructions with code examples]
[Detailed implementation instructions with code examples]
[Continue with all necessary steps...]
BEFORE MARKING THIS PROMPT COMPLETE, VERIFY:
-
[Validation Category 1]:
- [Specific validation item]
- [Specific validation item]
- [Specific validation item]
-
[Validation Category 2]:
- [Specific validation item]
- [Specific validation item]
- [Specific validation item]
[Continue with all validation categories...]
UI VALIDATION LOCATIONS:
- [Specific URL]: [What should be visible/working]
- [Specific URL]: [What should be visible/working]
API VALIDATION:
- [Specific API test]: [Expected result]
- [Specific API test]: [Expected result]
DO NOT PROCEED TO PROMPT [NEXT_NUMBER] UNTIL ALL VALIDATION ITEMS ARE CHECKED AND WORKING.
API_NAME: Stripe
API_DOCS_URL: https://docs.stripe.com/api
BUSINESS_NAME: AgenticVoice.net
PRIMARY_ENTITY: customer
ENTITY_ID_FIELD: customer_id
BUSINESS_CONTEXT: voice AI service provider for professional practices
ADMIN_INTERFACE_PURPOSE: manage customer payments, subscriptions, and billing for voice AI services
BRAND_COLORS: Orange (#f79533), Blue (#5073b8), Teal (#1098ad), Green (#07b39b)
BRAND_FONTS: Inter (primary), DM Serif Display (headlines)
BRAND_GRADIENT: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82)
BRAND_VOICE: Professional, confident, solution-oriented
TARGET_AUDIENCE: Medical and legal practices using AI voice agents
You are building a comprehensive Stripe admin interface for AgenticVoice.net, a voice AI service provider for professional practices. This interface will manage customer payments, subscriptions, and billing for voice AI services using a Big Picture → Customer → Granular navigation hierarchy.
Business: Voice AI service provider for professional practices
Colors: Orange (#f79533), Blue (#5073b8), Teal (#1098ad), Green (#07b39b)
Typography: Inter (primary), DM Serif Display (headlines)
Gradient: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82)
Voice: Professional, confident, solution-oriented
Target: Medical and legal practices using AI voice agents
- Frontend: React 18 with Tailwind CSS and DaisyUI
- Backend: Netlify Functions (no Stripe keys in frontend)
- Navigation: Big Picture → Customer → Granular drill-down
- Security: All Stripe API calls through backend functions only
- Balance:
GET /v1/balance- Account balance and available funds - Customers:
GET /v1/customers- Customer list and management - Charges:
GET /v1/charges- Payment charges and processing - Subscriptions:
GET /v1/subscriptions- Recurring billing management
Create the complete project foundation with secure Stripe integration, AgenticVoice.net branding, and multi-level navigation framework.
mkdir stripe-admin-agenticvoice
cd stripe-admin-agenticvoice
npm init -y
npm install react react-dom react-router-dom @stripe/stripe-js stripe tailwindcss daisyui[Continue with detailed implementation...]
BEFORE MARKING THIS PROMPT COMPLETE, VERIFY:
- Project Structure:
- All files created in correct locations
- Dependencies installed successfully
- Netlify configuration present
[Continue with validation steps...]
DO NOT PROCEED TO PROMPT 2 UNTIL ALL VALIDATION ITEMS ARE CHECKED AND WORKING.
- Focus on revenue, transactions, customers, subscriptions
- Big Picture: Business metrics, revenue trends, customer portfolio
- Customer Level: Payment history, subscription management, billing
- Granular: Individual transactions, payment methods, disputes
- Focus on messages, campaigns, contacts, analytics
- Big Picture: Message volume, delivery rates, campaign performance
- Customer Level: Contact management, message history, preferences
- Granular: Individual messages, delivery status, engagement metrics
- Focus on usage, models, projects, costs
- Big Picture: API usage, cost analytics, model performance
- Project Level: Project-specific usage, model configurations, costs
- Granular: Individual API calls, token usage, response analysis
- Focus on orders, products, customers, inventory
- Big Picture: Sales metrics, product performance, customer analytics
- Customer Level: Order history, customer lifetime value, preferences
- Granular: Individual orders, product details, inventory tracking
Level 1 (Big Picture): Business/System Overview
├── Total metrics and KPIs
├── Trend analysis and growth
├── Top performers and insights
└── Recent activity feed
Level 2 ([PRIMARY_ENTITY]): Entity-Specific Management
├── Individual entity overview
├── Entity-specific metrics
├── Related data and history
└── Entity management actions
Level 3 (Granular): Detailed Item Analysis
├── Individual item details
├── Complete data breakdown
├── Related items and connections
└── Item-specific actions
**Backend Function**:
- [ ] Function created at correct path: `/netlify/functions/api/[endpoint]`
- [ ] Function connects to [API_NAME] API successfully
- [ ] Function returns expected data structure
- [ ] Function handles errors gracefully
- [ ] Function includes [BUSINESS_NAME] metadata
**Frontend Interface**:
- [ ] Page displays [BUSINESS_NAME] branding correctly
- [ ] Data loads from backend functions (not direct API calls)
- [ ] Interactive elements work (clicks, hovers, navigation)
- [ ] Loading states provide clear feedback
- [ ] Error handling displays user-friendly messages
**API Integration**:
- [ ] Direct function test: `curl http://localhost:8888/.netlify/functions/api/[endpoint]`
- [ ] Returns JSON with expected data structure
- [ ] [API_NAME] API calls are authenticated correctly
- [ ] Rate limiting and retry logic work
- [ ] Metadata injection works for [BUSINESS_NAME] tracking
:root {
--primary: [PRIMARY_COLOR];
--secondary: [SECONDARY_COLOR];
--accent: [ACCENT_COLOR];
--gradient: [BRAND_GRADIENT];
}.font-primary { font-family: [PRIMARY_FONT]; }
.font-secondary { font-family: [SECONDARY_FONT]; }// Header Component
<header className="bg-gradient-to-r from-primary via-secondary to-accent">
<h1 className="font-secondary text-4xl font-bold">[BUSINESS_NAME]</h1>
<p className="text-xl">[API_NAME] [ADMIN_INTERFACE_PURPOSE]</p>
</header>-
Research [API_NAME] Documentation
- Identify all API endpoints and categories
- Understand data structures and relationships
- Map API capabilities to business needs
-
Plan Navigation Hierarchy
- Define Big Picture metrics and views
- Identify [PRIMARY_ENTITY] management needs
- Plan Granular detail requirements
-
Generate 20+ Prompts Following Pattern:
- Prompts 1-5: Foundation and setup
- Prompts 6-10: Big Picture dashboards
- Prompts 11-15: [PRIMARY_ENTITY] management
- Prompts 16-20: Granular detail views
- Prompts 21-25: Advanced features and optimization
-
Each Prompt Must Include:
- Complete context for Windsurf
- [BUSINESS_NAME] brand identity
- Specific [API_NAME] endpoints
- Detailed implementation instructions
- Self-contained validation steps
- Prompt is completely self-contained
- All necessary context included
- Clear instructions for LLM/Windsurf
- Brand identity properly integrated
- API endpoints specifically listed
- Implementation steps are detailed
- Validation steps are actionable
- Navigation hierarchy is maintained
- Security best practices included
- Error handling is addressed
- Customize Input Variables for your specific API and business
- Research API Documentation thoroughly to understand all endpoints
- Apply Template Pattern to generate each prompt
- Ensure Self-Containment - each prompt should work independently
- Test Generated Prompts with Windsurf to verify they work
- Iterate and Improve based on results
This template ensures every generated prompt is actionable, self-contained, and produces production-ready admin interfaces with proper branding and navigation hierarchy.