Templates
Six production-grade starters that load in under a second. Use them as a faster on-ramp than a cold prompt — generate, fork the file tree, then iterate via chat or the editor.
#When to start from a template
A cold prompt gives the orchestrator total freedom but takes 30–90 seconds and can drift if the prompt is vague. A template hands you a known-good starting point — animations, real data, accessible markup, motion-aware UX — that you then mutate in chat. For most users, template + 2–3 follow-up prompts is faster than perfecting a single mega-prompt.
Open the gallery from the landing page or chat empty-state. Each card has a live miniature preview rendered in an iframe — what you see is what you get.
#The six templates
- SaaS AI Landing — modern landing page for an AI product. Hero with motion gradients, three-column features, social proof, pricing teaser, footer CTA.
- Ecommerce Store — multi-page storefront. Product grid, detail page, cart drawer, checkout stub. Real product data with images.
- HRMS Dashboard — internal tool layout. Sidebar nav, KPI cards, employee table, request-approval flow.
- Netflix Clone — streaming UI. Hero billboard, horizontal carousels with snap scroll, hover-to-preview tiles.
- Project Manager — Trello-style board. Drag-drop cards, columns, side-drawer detail view, filters.
- Social Media — feed-driven app. Stories, post cards, comments, profile, dark mode.
- Flight Booking — travel UI. Search form, results list with airline logos, fare cards, seat-map mockup.
#How templates load
When you pick a template, PromptFloe skips the multi-agent build pipeline entirely. The bundled file tree gets written into the workspace, the WebContainer boots, and the preview comes up almost instantly. From there, every follow-up prompt enters the same pipeline as a cold start, but with the existing files as context.
Templates are stored at apps/web/src/ai/templates/<name>.ts as plain TypeScript modules — a file tree mapped from path → content. They're versioned with the rest of the codebase.
#Template vs prompt — picking
A rough heuristic:
- Use a template when your idea matches one of the six within ~70% — landing page, store, dashboard, etc. Saves time and the result has higher polish on the first run.
- Use a cold prompt when the app is genuinely novel — a niche tool, a strange combination of features, or something that doesn't fit the standard buckets.