# Blackbox Builder

> 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.

- Skill: `webrenew/blackbox-builder` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add webrenew/blackbox-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/webrenew/blackbox-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: webrenew (https://skillmd.com/u/webrenew)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/webrenew/blackbox-builder

---


# 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

1. Go to [build.blackbox.ai](https://build.blackbox.ai/)
2. Describe your application in natural language:
   ```
   Build a task management app with user auth, drag-and-drop kanban board,
   due dates, and team collaboration
   ```
3. Watch real-time generation with progress visualization
4. Iterate with follow-up requests:
   ```
   Add a calendar view and email notifications for due dates
   ```
5. 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