Prototyping
Vision: "Skip Figma. Go from spec to working prototype in seconds."
Spec → Prototype → Validate → Build
The Workflow Shift
Traditional (Spec → Figma → Code):
Spec (Notion) → Figma mockup (1-2 days) → Code (1-2 weeks) → Deploy → Test
Spec Doc (Spec → Prototype):
Spec → AI generates prototype (30 seconds) → Shareable link → Validate → Export to Cursor
We skip Figma entirely. The prototype IS the design.
How It Works
- Click "Generate Prototype" in Spec Doc
- AI analyzes spec content, UX requirements, user flows
- Generates self-contained HTML/CSS/JS (no backend needed)
- Get shareable link:
https://specdoc.ai/p/abc123 - Share with stakeholders - no login required
- Iterate: update spec → regenerate → 30 seconds
Output by Spec Type
| Spec Type | Prototype Output |
|---|---|
| Epic | Multi-page flow |
| User Story | Single feature demo |
| API Spec | Interactive docs (Swagger-like) |
| Architecture | System diagram |
| UX Flow | Clickable wireframes |
Business Value
Faster Validation
- Show prototype to users before building production code
- Saves 2 weeks of wrong development
- ROI: 30 seconds vs 2 weeks
Better Stakeholder Communication
- Before: "Read this doc, imagine how it works"
- After: "Click this link and try it"
Complete Workflow (Only Spec Doc)
| Tool | Spec | Prototype | Share | Code |
|---|---|---|---|---|
| Notion | ✅ | ❌ | ✅ | ❌ |
| Figma | ❌ | ✅ | ✅ | ⚠️ |
| Cursor | ❌ | ❌ | ❌ | ✅ |
| Spec Doc | ✅ | ✅ | ✅ | ✅ |
Implementation Phases
Phase 1: Basic (Month 3-4)
- Single-page HTML prototypes
- Basic interactions (buttons, navigation)
- Shareable links (S3 + CloudFront)
- 2 weeks to implement
Phase 2: Advanced (Month 6)
- Multi-page prototypes
- Form validation, state management
- API mocking, custom styling
- 4 weeks to implement
Phase 3: Collaborative (Month 9)
- Comments on prototypes
- A/B testing, analytics
- User testing sessions
- 6 weeks to implement
Proof It Works
Evidence: We built spec-doc-prototype.html
- Generated from our specs in one shot
- Working interactions, beautiful design
- Self-contained, shareable
Comparable products:
- v0.dev (Vercel): Text → React components
- Framer AI: Text → marketing sites ($3M+ ARR)
- Builder.io: Visual → code ($11M funding)
Spec Doc difference: Product-specific prototypes from detailed specs, not generic components.
Lock-In Effect
| Timeline | Accumulation |
|---|---|
| Month 1 | 1 spec, 1 prototype |
| Month 6 | 12 specs, 50 prototypes |
| Month 12 | 30 specs, 200 prototypes |
Switching = losing entire prototype library + shareable links + version history.
Related Documents
- Epic - Product scope
- Architecture - Technical design
- Cursor Integration - Export workflow
- Business Analysis - Full pricing and metrics
Status: Build after MVP validation (Month 3-4)