当用户想要设计模板页面时——聚合（画廊/枢纽）或详情（单个模板），也适用于用户提到“模板页面”时。
页面: Template Page.
功能概述
页面: Template Page.是一项面向实际任务的技能，主要用于Guides模板页面设计,用于两种不同的使用案例:(1) 程序化的SEO-模板+数据=比例. (2) 用户界面模板-用户浏览,选择,使用模板.。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。
核心要点
- 使用时应结合输入条件选择合适的执行方式，核对必要参数、依赖环境与输出内容，并按原始要求处理异常情况。
- 该技能适合需要稳定复用相关能力的场景，可作为自动化工作流的一部分，也便于后续检查、调整和扩展。
- 从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
使用与执行
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。
结果检查与注意事项
执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。
页面：模板页
指导两种典型使用场景下的模板页设计：（1）程序化 SEO —— 模板 + 数据 = 规模化产出；（2）面向用户的模板 —— 用户浏览、选择并使用模板生成自己的内容（CMS、图片、网站、vibe coding）。参见 programmatic-seo 了解规模化框架。本技能涵盖模板聚合页（画廊页、中心页）和模板详情页（单个模板页，含“使用此模板”操作流程）。
调用时说明方式：在首次使用时，若有助理解，可先用 1–2 句话简要说明本技能覆盖范围及其重要性，再输出主体内容；在后续调用或用户明确要求跳过说明时，则直接输出主体内容。
两类模板页
| 类型 | 用途 | 示例 |
|---|---|---|
| 模板聚合页 | 画廊页、中心页、分类页；以列表形式展示模板，支持浏览与筛选 | Canva /templates、Figma 模板库、VibeCatalog /templates、uitovibe 主题画廊 |
| 模板详情页 | 单个模板页；含预览、描述及“使用此模板”主操作按钮（CTA） | 单模板页面；用户点击后执行复制、自定义或在编辑器中打开等操作 |
核心功能：用户通过模板生成内容
除 SEO 价值外，模板页更关键的作用在于直接可用性：用户选定模板后即可生成专属内容。常见模式如下：
| 领域 | 操作流程 | 示例 |
|---|---|---|
| CMS | 浏览模板 → 选择 → 基于模板创建页面/文章 | WordPress 主题、Webflow 模板、Notion 模板 |
| 设计 / 图片 | 浏览 → 预览 → 在编辑器中自定义 | Canva（Customize this template）、Figma（Duplicate to your drafts） |
| 网站构建工具 | 浏览 → 选择 → 自定义（颜色、字体、内容）→ 部署 | VibeCatalog、Lovable、Bolt.new、v0；仪表盘、落地页、SaaS 类模板 |
| vibe coding | 浏览 UI 主题 → 复制样式指令 → 粘贴至 AI 提示词 → 生成 | uitovibe（复制指令，粘贴至 Bolt/Lovable/Cursor 提示词中） |
关键操作按钮（CTA）：“使用此模板”、“自定义此模板”、“复制到编辑器”、“获取此模板”、“从此开始”。
模板聚合页（画廊 / 中心页）
| 模块 | 用途 |
|---|---|
| 主标题 | “[类别] 模板” 或 “浏览 [X] 类模板” |
| 筛选器 / 分类 | 按类型（仪表盘、落地页、简历）、平台（Bolt、Lovable、Next.js）、使用场景等划分 |
| 模板卡片 | 缩略图、名称、简短描述、“使用”或“预览” CTA；采用网格或列表布局 |
| 搜索 | 按关键词、标签搜索 |
| 社会证明 | “X 个模板”、“Y 位用户正在使用”、评分等 |
| 主操作按钮（CTA） | 主要行动号召（如“浏览模板”、“立即开始”、“注册使用”） |
参考案例：Canva 按 50+ 种设计类型组织（文档、演示文稿、Logo、Instagram 帖子等）；Figma 提供 300+ 模板；VibeCatalog 按项目类型（仪表盘、落地页）分类。模板卡片结构与网格布局详见 card。
模板详情页（单个模板）
| 模块 | 用途 |
|---|---|
| 首屏区（Hero） | 模板名称、一句话价值主张；主操作按钮（CTA）：“使用此模板” / “自定义” / “复制” |
| 预览 | 实时预览、截图或交互式演示；支持多端视图（桌面端、移动端） |
| 描述 | 说明模板功能、适用人群、包含内容 |
| 特性 / 包含内容 | 组件、区块、可定制项（颜色、字体、布局等） |
| 使用方法 | 操作步骤：复制 → 粘贴至编辑器 / 在 [工具] 中打开 → 自定义 |
| 平台兼容性 | Bolt、Lovable、v0、Next.js、React 等 |
| 常见问题（FAQ） | “是否可用于商业用途？”、“是否提供源码？”、“如何自定义？” |
| 相关模板 | 指向相似模板的内部链接 |
vibe coding 模式（uitovibe、VibeCatalog）：模板即样式指令或完整代码；用户将指令复制进 AI 提示词，或下载/克隆后自行修改。对应 CTA：“复制指令”、“添加至提示词”、“获取模板”。
模板 + 程序化 SEO
当模板通过数据大规模生成（如地区页、集成页、对比页）时，应采用 programmatic-seo 框架：
| 模块 | 用途 | 数据占位符 |
|---|---|---|
| 导语 | H1 标题与引导文案；匹配用户搜索意图 | {entity_name}、{context} |
| 证据模块 | 表格、列表、经验证的数据；避免内容单薄 | {data_table}、{list_items} |
| 决策建议 | 推荐结论、下一步行动 | {recommendation} |
| 常见问题（FAQ） | 符合 Schema 结构的问答对 | {faq_items} |
| 操作按钮（CTA） | 转化目标导向 | {cta_destination} |
详见 programmatic-seo 中关于数据源、自动化实现与常见陷阱的内容。当程序化页面具备明确转化目标时，还需融合 landing-page-generator 的设计原则。
模板 + 落地页（聚焦转化的程序化页面）
当程序化页面用于驱动注册/线索收集（例如 “[产品] for [城市]” 类落地页）时，需将落地页结构应用于模板设计：停止滚动 → 建立信任 → 阐明价值 → 消除疑虑 → 发出行动号召。参见 landing-page-generator。
各领域常见模板模式
| 领域 | 聚合页特征 | 详情页特征 | 使用流程 |
|---|---|---|---|
| 设计（Canva、Figma） | 按类别浏览、筛选器 | 预览、“自定义” | 在编辑器中打开、拖放操作 |
| vibe coding（uitovibe、VibeCatalog） | 主题画廊、按风格分类 | 复制指令、“添加至提示词” | 粘贴至 Bolt/Lovable/Cursor |
| 网站（Lovable、Bolt、v0） | 按项目类型分类 | 实时演示、“使用模板” | 克隆 → 自定义 → 部署 |
| CMS | 按内容类型分类 | 预览、“从模板创建” | 基于模板新建页面/文章 |
| 程序化 SEO | N/A（数据驱动型，无传统聚合页） | 由模板 + 数据生成的输出页 | 信息型页面；CTA 指向产品 |
输出格式
- 页面类型（聚合页 vs 详情页）
- 模块结构（依据上述两类页面定义）
- 主操作按钮（CTA）（如“使用此模板”、“自定义”、“复制指令”）
- 用户流程（浏览 → 预览 → 使用 → 自定义）
- 程序化适配性（若涉及模板 + 数据规模化生成）
- 结构化数据标记（Schema）（聚合页用 ItemList；详情页用 CreativeWork、SoftwareApplication）
相关技能
- card：模板卡片结构；含缩略图、名称、描述、CTA；网格布局规范
- grid：模板网格布局；响应式列数控制
- programmatic-seo：模板 + 数据 = 规模化；涵盖使用场景、数据要求与常见陷阱
- landing-page-generator：转化导向的结构设计；程序化落地页实现方法
- tools-page-generator：规模化工具页生成；工具集中心页
- alternatives-page-generator：规模化替代方案/对比页生成
- category-page-generator：分类页结构设计；与模板聚合页高度相似
- schema-markup：ItemList、CreativeWork、SoftwareApplication 标记规范
- url-structure：/templates、/templates/[slug] 等层级路径规范
热门AI工具
相关专题
本专题从实际API接口调试场景出发，讲解Postman身份认证的完整配置流程，包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查，帮助用户正确完成接口授权与访问验证。
0
2026.11.06
围绕Postman HTTP请求头配置展开，讲解Headers选项的具体使用方式，包括Key和Value参数填写、请求头信息添加、常见Header字段设置及请求头修改方法，帮助用户解决接口调试过程中遇到的请求头配置问题。
0
2026.11.06
详细介绍Postman接口请求的创建与发送方法，涵盖GET和POST请求、URL配置、请求参数、Headers请求头、Body请求体设置以及响应结果查看，帮助用户掌握Postman接口请求的完整操作流程。
0
2026.11.06
DBeaver数据导入专题，整理Excel、CSV、SQL、TXT等常见文件的数据导入方法，涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作，帮助用户将本地文件中的数据写入数据库，并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。
0
2026.11.05
DBeaver安全防护专题，围绕数据库连接安全、账号密码保护和访问权限管理展开，整理SSL/TLS加密连接、SSH隧道、数据库凭据保存及证书验证等配置方法，同时介绍敏感信息保护、远程连接风险和高权限账号使用等注意事项，帮助用户提高数据库日常管理的安全性。
0
2026.11.05
本专题聚焦DBeaver数据库连接配置与管理，覆盖从新建连接、选择数据库类型到填写连接参数和验证连接的完整流程。针对MySQL、PostgreSQL、SQL Server等常见数据库，整理相应的连接设置方法，并提供驱动缺失、认证失败和连接异常等问题的排查方向。
0
2026.11.04
本专题围绕XORM框架的结构体映射展开，说明表名与字段的命名策略、xorm标签常用属性、主键自增与时间字段自动填充，并演示Sync2自动建表、增量字段升级、索引声明与反向生成结构体的完整流程。
0
2026.11.04
本专题聚焦XORM框架的配置与连接环节，拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择，讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式，并补充容器与兼容数据库的适配经验。
0
2026.11.04
本专题聚焦XORM框架的配置与连接环节，拆解MySQL、PostgreSQL、SQLite、SQL Server的DSN写法与驱动选择，讲清连接池参数、多数据源拆分、读写分离与超时重连的处理方式，并补充容器与兼容数据库的适配经验。
0
2026.11.04
热门下载
相关下载
精品课程
共6课时 | 12.1万人学习
共79课时 | 161.8万人学习
共6课时 | 54.7万人学习
最新文章
