| name | blackbox-builder |
| description | Guides usage of Blackbox Builder (build.blackbox.ai) for vibe coding full-stack apps from natural language, deploying to Blackbox hosting, and rapid prototyping. Activates when building apps with Builder, using voice input, or deploying to Blackbox hosting.
|
| compatibility | Requires web browser with access to build.blackbox.ai.
|
| metadata | {"author":"tradecraft","version":"1.0.0"} |
Blackbox Builder
Blackbox Builder is a vibe coding platform that generates full-stack applications from natural language descriptions. Build, preview, iterate, and deploy — all without writing code manually.
When to Use This Skill
- Building full-stack apps via natural language at build.blackbox.ai
- Rapid prototyping with vibe coding
- Using voice input to describe application requirements
- Deploying apps to Blackbox hosting or custom domains
- Working within the 45-minute sandbox session
- Publishing to the community gallery
- Iterating on generated applications with refinement prompts
Quick Start
- Go to build.blackbox.ai
- Describe your application in natural language:
Build a task management app with user auth, drag-and-drop kanban board,
due dates, and team collaboration
- Watch real-time generation with progress visualization
- Iterate with follow-up requests:
Add a calendar view and email notifications for due dates
- Deploy when satisfied
Core Concepts
Vibe Coding
Describe what you want in plain English (or speak it). Builder generates:
- Frontend interfaces — React/Next.js components with styling
- Backend APIs — Server routes and business logic
- Databases — Schema and data models
- Authentication — User auth flows
- AI features — AI-powered functionality if requested
Voice Input
Click the microphone icon to speak your requirements aloud instead of typing. Powered by ElevenLabs.
Real-Time Visualization
During generation, you see:
- Components appearing as they're created
- Progress tracking for each part of the stack
- Connection visualization between frontend, backend, and database
Iterative Refinement
After initial generation, refine with natural language:
> Change the color scheme to dark mode with blue accents
> Add pagination to the user list, 20 per page
> Make the sidebar collapsible on mobile
> Add export to CSV for the analytics dashboard
Session Management
- Duration: 45-minute sandbox session limit
- Important: Save and deploy before your session expires
- Sessions outside Git repos run in sandbox mode without GitHub integration
Deployment
Three deployment options:
| Option | Description |
|---|
| Blackbox Hosting | Quick deployment on Blackbox infrastructure |
| Custom Domain | Deploy to your own domain |
| Community Gallery | Publish for others to discover and use |
Common Patterns
SaaS Application
Build a project management SaaS with:
- User registration and login
- Team workspaces with invite links
- Kanban board with drag-and-drop
- Time tracking per task
- Stripe billing integration
- Admin dashboard with usage analytics
Landing Page + App
Create a landing page for a productivity app with:
- Hero section with animated demo
- Feature grid with icons
- Pricing table (free, pro, enterprise)
- FAQ accordion
- Contact form
Then build the actual app behind a login wall
API + Dashboard
Build a REST API with dashboard for monitoring IoT devices:
- Device registration and management
- Real-time data ingestion endpoint
- Dashboard with charts showing device metrics
- Alert rules with email notifications
- Export data as CSV/JSON
Tips
- Be specific — More detail in your prompt = better results
- Start simple — Build the core, then iterate
- Save often — Deploy before the 45-minute session expires
- Voice + text — Combine voice for brainstorming, text for precise requirements
- Reference examples — "Like Trello but with time tracking" helps the model understand
Troubleshooting
| Issue | Fix |
|---|
| Session expired | Start a new session; unsaved work is lost |
| Generation stuck | Refresh the page and re-describe the stuck part |
| Deployment failed | Check for build errors in the console output |
| Missing features | Re-describe with more specific requirements |
| Styling issues | Describe the desired look explicitly (colors, spacing, fonts) |
References
- See
references/builder-guide.md for detailed workflow and constraints
