template-page-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Pages: Template Page

页面：模板页面

Guides template page design for two distinct use cases: (1) Programmatic SEO — template + data = scale; (2) User-facing templates — users browse, select, and use templates to generate their own content (CMS, images, websites, vibe coding). See programmatic-seo for the scale framework. This skill covers template aggregation pages (gallery, hub) and template detail pages (individual template with "use" flow).

When invoking: On first use, if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.

针对两种不同用例提供模板页面设计指导：(1) Programmatic SEO — 模板+数据=规模化；(2) 面向用户的模板 — 用户浏览、选择并使用模板生成自己的内容（CMS、图片、网站、氛围编码）。规模化框架请参考programmatic-seo。本技能涵盖模板聚合页面（图库、中心）和模板详情页面（带有「使用」流程的单个模板）。

调用时机：首次使用时，如果有帮助，可以先以1-2句话介绍本技能的覆盖范围及其重要性，再提供主要输出。后续使用或用户要求跳过介绍时，直接输出主要内容。

Two Template Page Types

两种模板页面类型

Type	Purpose	Examples
Template aggregation page	Gallery, hub, category; list templates for browse and filter	Canva /templates, Figma templates, VibeCatalog /templates, uitovibe theme gallery
Template detail page	Individual template; preview, description, "Use this template" CTA	Single template page; user clicks to copy, customize, or open in editor

类型	用途	示例
模板聚合页面	图库、中心、分类页；列出模板供用户浏览和筛选	Canva /templates、Figma模板、VibeCatalog /templates、uitovibe主题图库
模板详情页面	单个模板页面；提供预览、描述、「使用此模板」行动召唤按钮	单个模板页面；用户点击即可复制、自定义或在编辑器中打开

Core Function: Users Use Templates to Generate Content

核心功能：用户通过模板生成内容

Beyond SEO, template pages enable direct use: users select a template and generate their own content. Common patterns:

Domain	Flow	Examples
CMS	Browse templates → Select → Create page/post from template	WordPress themes, Webflow templates, Notion templates
Design / Images	Browse → Preview → Customize in editor	Canva (Customize this template), Figma (Duplicate to your drafts)
Website builders	Browse → Select → Customize (colors, fonts, content) → Deploy	VibeCatalog, Lovable, Bolt.new, v0; dashboard, landing page, SaaS templates
Vibe coding	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."

除SEO外，模板页面还支持直接使用：用户选择模板并生成自己的内容。常见模式如下：

领域	流程	示例
CMS	浏览模板 → 选择 → 从模板创建页面/帖子	WordPress主题、Webflow模板、Notion模板
设计/图片	浏览 → 预览 → 在编辑器中自定义	Canva（自定义此模板）、Figma（复制到你的草稿）
网站构建工具	浏览 → 选择 → 自定义（颜色、字体、内容） → 部署	VibeCatalog、Lovable、Bolt.new、v0；仪表盘、着陆页、SaaS模板
氛围编码（Vibe coding）	浏览UI主题 → 复制样式指令 → 添加到AI提示词 → 生成内容	uitovibe（复制指令，粘贴到Bolt/Lovable/Cursor提示词中）

关键行动召唤（CTA）：「使用此模板」「自定义此模板」「复制到编辑器」「获取此模板」「从此开始」。

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.

板块	用途
标题	「[分类]模板」或「浏览[X]款模板」
筛选器/分类	按类型（仪表盘、着陆页、简历）、平台（Bolt、Lovable、Next.js）、用例筛选
模板卡片	缩略图、名称、简短描述、「使用」或「预览」行动召唤按钮；网格或列表布局
搜索功能	按关键词、标签搜索
社交证明	「X款模板」「已有Y位用户使用」、评分
行动召唤按钮	主要行动（浏览、开始使用、注册以使用）

参考案例：Canva按50+种设计类型（文档、演示文稿、标志、Instagram帖子等）分类；Figma提供300+款模板；VibeCatalog按项目类型（仪表盘、着陆页）分类。模板卡片结构和网格布局请参考card技能。

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

板块	用途
头部区域	模板名称、一句话优势；主要行动召唤按钮：「使用此模板」/「自定义」/「复制」
预览区域	实时预览、截图或交互式演示；多视图（桌面端、移动端）
描述	功能介绍、适用人群、包含内容
特性/包含内容	组件、板块、自定义选项（颜色、字体、布局）
使用步骤	步骤：复制 → 粘贴到编辑器 / 在[工具]中打开 → 自定义
平台兼容性	Bolt、Lovable、v0、Next.js、React等
常见问题（FAQ）	「我可以商用吗？」「我能获取源代码吗？」「如何自定义？」
相关模板	指向相似模板的内部链接

氛围编码模式（uitovibe、VibeCatalog）：模板=样式指令或完整代码；用户将指令复制到AI提示词中，或下载/克隆后自定义。行动召唤按钮：「复制指令」「添加到提示词」「获取模板」。

Template + Programmatic SEO

模板+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.

当模板通过数据规模化生成时（如地区页面、集成页面、对比页面），请使用programmatic-seo框架：

板块	用途	数据插槽
引言	H1标题、引言；匹配用户意图	`{entity_name}` 、 `{context}`
证据板块	表格、列表、验证数据；避免内容单薄	`{data_table}` 、 `{list_items}`
决策建议	推荐内容、后续步骤	`{recommendation}`
常见问题（FAQ）	符合Schema规范的问答	`{faq_items}`
行动召唤按钮	转化引导	`{cta_destination}`

数据、自动化、常见问题请参考programmatic-seo。当程序化页面有转化目标时，应用landing-page-generator原则。

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.

当程序化页面用于引导注册/获客时（如「[产品] 面向[城市]」着陆页），请为模板应用着陆页结构：吸引停留 → 建立信任 → 阐释价值 → 消除疑虑 → 提出请求。详情请参考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

领域	聚合页面	详情页面	使用流程
设计（Canva、Figma）	分类浏览、筛选	预览、「自定义」	在编辑器中打开、拖放操作
氛围编码（uitovibe、VibeCatalog）	主题图库、按风格分类	复制指令、「添加到提示词」	粘贴到Bolt/Lovable/Cursor中
网站（Lovable、Bolt、v0）	按项目类型分类	实时演示、「使用模板」	克隆、自定义、部署
CMS	按内容类型分类	预览、「从模板创建」	从模板新建页面/帖子
Programmatic SEO	无（数据驱动）	通过模板+数据生成页面	信息类页面；行动召唤按钮指向产品

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)

页面类型（聚合页 vs 详情页）
板块（对应上述各类型的板块）
主要行动召唤按钮（「使用此模板」「自定义」「复制指令」）
用户流程（浏览→预览→使用→自定义）
程序化适配（若涉及模板+数据规模化）
Schema标记（聚合页用ItemList；详情页用CreativeWork、SoftwareApplication）