48 lines
1.7 KiB
Markdown
48 lines
1.7 KiB
Markdown
# developer-sandbox
|
|
|
|
Design interactive playgrounds that let developers experience your product without commitment and convert them into users.
|
|
|
|
## What This Skill Covers
|
|
|
|
- **Playground Design**: Instant gratification, progressive complexity
|
|
- **Pre-Populated Examples**: Choosing examples that convert
|
|
- **Sharing and Embedding**: Shareable URLs and embeddable widgets
|
|
- **Gating Decisions**: When to require signup vs. keep open
|
|
- **Conversion Optimization**: Turning playground users into signups
|
|
- **Architecture**: Client-side vs. server-side playgrounds
|
|
|
|
## When to Use This Skill
|
|
|
|
- Building a new developer playground
|
|
- Optimizing existing playground conversion
|
|
- Deciding what to gate vs. ungate
|
|
- Creating embeddable examples for documentation
|
|
- Designing the evaluation experience for your API
|
|
|
|
## Key Principle
|
|
|
|
A great playground removes uncertainty. Developers should be able to validate that your product solves their problem before investing in setup or signup.
|
|
|
|
## Playground Levels
|
|
|
|
| Level | Experience | Goal |
|
|
|-------|------------|------|
|
|
| One-Click Demo | Click button, see result | Prove it works |
|
|
| Editable Input | Change input, see output | Build curiosity |
|
|
| Full API Access | Write code, call API | Demonstrate power |
|
|
| Full Playground | Build mini-app | Enable evaluation |
|
|
|
|
## Quick Wins
|
|
|
|
1. Pre-load a working example (not an empty editor)
|
|
2. Let users run examples without signup
|
|
3. Add "Copy as cURL" button for every example
|
|
4. Show real API responses (not mocked data)
|
|
5. Create shareable playground URLs
|
|
|
|
## Related Skills
|
|
|
|
- `api-onboarding` - Playground as onboarding tool
|
|
- `docs-as-marketing` - Interactive examples in docs
|
|
- `sdk-dx` - SDK that works in playground context
|