Browse UI themes → Copy style instructions → Add to AI prompt → Generate
uitovibe (copy instructions, paste into Bolt/Lovable/Cursor prompt)
Key CTA
"Use this template," "Customize this template," "Copy to editor," "Get this template," "Start with this."
Template Aggregation Page (Gallery / Hub)
Section
Purpose
Headline
"Templates for [category]" or "Browse [X] templates"
Filters / Categories
By type (dashboard, landing page, resume), platform (Bolt, Lovable, Next.js), use case
Template cards
Thumbnail, name, short description, "Use" or "Preview" CTA; grid or list
Search
By keyword, tag
Social proof
"X templates," "Used by Y users," ratings
CTA
Primary action (Browse, Get started, Sign up to use)
Reference
Canva organizes by 50+ design types (Docs, Presentations, Logos, Instagram Posts, etc.); Figma offers 300+ templates; VibeCatalog by project type (dashboards, landing pages). See
card
for template card structure and grid layout.
Template Detail Page (Individual Template)
Section
Purpose
Hero
Template name, one-line benefit;
primary CTA: "Use this template" / "Customize" / "Copy"
Preview
Live preview, screenshot, or interactive demo; multiple views (desktop, mobile)
Description
What it does, who it's for, what's included
Features / What's included
Components, sections, customization options (colors, fonts, layouts)
How to use
Steps: Copy → Paste in editor / Open in [tool] → Customize
Platform compatibility
Bolt, Lovable, v0, Next.js, React, etc.
FAQ
"Can I use commercially?", "Do I get source code?", "How do I customize?"
Related templates
Internal links to similar templates
Vibe coding pattern
(uitovibe, VibeCatalog): Template = style instructions or full code; user copies instructions into AI prompt or downloads/clones to customize. CTA: "Copy instructions," "Add to prompt," "Get template."
Template + Programmatic SEO
When templates are
generated at scale
from data (location pages, integration pages, comparison pages), use
programmatic-seo
framework:
Section
Purpose
Data Slot
Intro
H1, intro; matches intent
{entity_name}
,
{context}
Evidence block
Tables, lists, verified data; avoids thin content
{data_table}
,
{list_items}
Decision
Recommendation, next steps
{recommendation}
FAQ
Schema-friendly Q&A
{faq_items}
CTA
Conversion
{cta_destination}
See
programmatic-seo
for data, automation, pitfalls. When programmatic pages have conversion goals, apply
landing-page-generator
principles.
Template + Landing Page (Conversion-Focused Programmatic)
When programmatic pages drive signup/lead capture (e.g., "[Product] for [City]" LPs), apply landing page structure to the template: Stop the scroll → Earn trust → Explain value → Remove doubt → Make the ask. See
landing-page-generator
.
Common Template Patterns by Domain
Domain
Aggregation
Detail
Use Flow
Design (Canva, Figma)
Category browse, filters
Preview, "Customize"
Open in editor, drag-and-drop
Vibe coding (uitovibe, VibeCatalog)
Theme gallery, by style
Copy instructions, "Add to prompt"
Paste into Bolt/Lovable/Cursor
Website (Lovable, Bolt, v0)
By project type
Live demo, "Use template"
Clone, customize, deploy
CMS
By content type
Preview, "Create from template"
New page/post from template
Programmatic SEO
N/A (data-driven)
Output pages from template + data
Informational; CTA to product
Output Format
Page type
(aggregation vs detail)
Sections
(per type above)
Primary CTA
("Use this template," "Customize," "Copy instructions")
User flow
(browse → preview → use → customize)
Programmatic alignment
(if template + data scale)
Schema
(ItemList for aggregation; CreativeWork, SoftwareApplication for detail)