diff --git a/docs/en/user-guide/templates.md b/docs/en/user-guide/templates.md
index 346749c..5d6a018 100644
--- a/docs/en/user-guide/templates.md
+++ b/docs/en/user-guide/templates.md
@@ -6,7 +6,151 @@ How to create custom video templates.
## Template Introduction
-Video templates use HTML to define the layout and style of video frames.
+Video templates use HTML to define the layout and style of video frames. Pixelle-Video provides multiple preset templates covering different video dimensions and style requirements.
+
+---
+
+## Built-in Template Preview
+
+### Portrait Templates (1080x1920)
+
+Suitable for TikTok, Kuaishou, Xiaohongshu, and other short video platforms.
+
+
+
+- **Blur Card**
+
+ ---
+
+ 
+
+ Blurred background card style, suitable for graphic content display
+
+- **Cartoon**
+
+ ---
+
+ 
+
+ Cartoon style, suitable for light and lively content
+
+- **Default**
+
+ ---
+
+ 
+
+ Default template, simple and versatile
+
+- **Elegant**
+
+ ---
+
+ 
+
+ Elegant style, suitable for artistic and intellectual content
+
+- **Fashion Vintage**
+
+ ---
+
+ 
+
+ Retro fashion style, suitable for nostalgic themes
+
+- **Life Insights**
+
+ ---
+
+ 
+
+ Life insight style, suitable for inspirational content
+
+- **Modern**
+
+ ---
+
+ 
+
+ Modern minimalist style, suitable for business and tech content
+
+- **Neon**
+
+ ---
+
+ 
+
+ Neon style, suitable for fashion and trendy content
+
+- **Psychology Card**
+
+ ---
+
+ 
+
+ Psychology card style, suitable for knowledge popularization
+
+- **Purple**
+
+ ---
+
+ 
+
+ Purple theme, suitable for dreamy and mysterious styles
+
+- **Simple**
+
+ ---
+
+ 
+
+ Minimalist style, highlighting the content itself
+
+
+
+---
+
+### Landscape Templates (1920x1080)
+
+Suitable for YouTube, Bilibili, and other video platforms.
+
+
+
+- **Ultrawide Minimal**
+
+ ---
+
+ 
+
+ Ultrawide minimalist style, suitable for desktop viewing
+
+- **Wide Darktech**
+
+ ---
+
+ 
+
+ Dark tech style, suitable for technology and gaming content
+
+
+
+---
+
+### Square Templates (1080x1080)
+
+Suitable for Instagram, WeChat Moments, and other platforms.
+
+
+
+- **Minimal Framed**
+
+ ---
+
+ 
+
+ Minimalist framed style, suitable for social media sharing
+
+
---
@@ -16,33 +160,99 @@ Templates are located in the `templates/` directory, grouped by size:
```
templates/
-├── 1080x1920/ # Portrait
-├── 1920x1080/ # Landscape
-└── 1080x1080/ # Square
+├── 1080x1920/ # Portrait (11 templates)
+├── 1920x1080/ # Landscape (2 templates)
+└── 1080x1080/ # Square (1 template)
```
---
-## Creating Templates
+## Creating Custom Templates
-1. Copy an existing template file
-2. Modify HTML and CSS
-3. Save to the corresponding size directory
-4. Select and use in Web interface
+### Steps
+
+1. Copy an existing template file from the `templates/` directory
+2. Modify HTML and CSS styles
+3. Save to the corresponding size directory with `.html` extension
+4. Use the new template name in configuration or Web interface
+
+### Template Variables
+
+Templates support the following Jinja2 variables:
+
+- `{{ title }}` - Video title (optional)
+- `{{ text }}` - Current scene text content
+- `{{ image }}` - Current scene image (if any)
+
+### Example Template
+
+```html
+
+
+
+
+
+
+
+
+
+```
---
-## Template Variables
+## Template Development Tips
-Templates support the following variables:
+### 1. Responsive Sizing
-- `{{ title }}` - Video title
-- `{{ text }}` - Scene text
-- `{{ image }}` - Scene image
+Ensure the template's `body` size matches the target video dimensions:
+
+- Portrait: `width: 1080px; height: 1920px;`
+- Landscape: `width: 1920px; height: 1080px;`
+- Square: `width: 1080px; height: 1080px;`
+
+### 2. Text Typography
+
+- Use appropriate font sizes and line heights for readability
+- Add shadows or backgrounds to text for better contrast
+- Control text length to avoid overflow
+
+### 3. Image Handling
+
+- Use `object-fit: cover` to ensure image filling
+- Add gradients or overlay layers to improve text readability
+- Consider fallback solutions for image loading failures
+
+### 4. Performance Optimization
+
+- Avoid overly complex CSS animations
+- Optimize background image sizes
+- Use system fonts or web-safe fonts
---
## More Information
-Detailed template development guide coming soon.
+For template development questions, feel free to ask in [GitHub Issues](https://github.com/AIDC-AI/Pixelle-Video/issues).
diff --git a/docs/images/1080x1080/minimal_framed.jpg b/docs/images/1080x1080/minimal_framed.jpg
new file mode 100644
index 0000000..d8bfc67
Binary files /dev/null and b/docs/images/1080x1080/minimal_framed.jpg differ
diff --git a/docs/images/1080x1920/blur_card.png b/docs/images/1080x1920/blur_card.png
new file mode 100644
index 0000000..cfd7c82
Binary files /dev/null and b/docs/images/1080x1920/blur_card.png differ
diff --git a/docs/images/1080x1920/cartoon.png b/docs/images/1080x1920/cartoon.png
new file mode 100644
index 0000000..1ba154e
Binary files /dev/null and b/docs/images/1080x1920/cartoon.png differ
diff --git a/docs/images/1080x1920/default.jpg b/docs/images/1080x1920/default.jpg
new file mode 100644
index 0000000..18eb929
Binary files /dev/null and b/docs/images/1080x1920/default.jpg differ
diff --git a/docs/images/1080x1920/elegant.jpg b/docs/images/1080x1920/elegant.jpg
new file mode 100644
index 0000000..2e52fa6
Binary files /dev/null and b/docs/images/1080x1920/elegant.jpg differ
diff --git a/docs/images/1080x1920/fashion_vintage.jpg b/docs/images/1080x1920/fashion_vintage.jpg
new file mode 100644
index 0000000..b275057
Binary files /dev/null and b/docs/images/1080x1920/fashion_vintage.jpg differ
diff --git a/docs/images/1080x1920/life_insights.jpg b/docs/images/1080x1920/life_insights.jpg
new file mode 100644
index 0000000..cefa906
Binary files /dev/null and b/docs/images/1080x1920/life_insights.jpg differ
diff --git a/docs/images/1080x1920/modern.jpg b/docs/images/1080x1920/modern.jpg
new file mode 100644
index 0000000..b1447bd
Binary files /dev/null and b/docs/images/1080x1920/modern.jpg differ
diff --git a/docs/images/1080x1920/neon.jpg b/docs/images/1080x1920/neon.jpg
new file mode 100644
index 0000000..b3676e8
Binary files /dev/null and b/docs/images/1080x1920/neon.jpg differ
diff --git a/docs/images/1080x1920/psychology_card.jpg b/docs/images/1080x1920/psychology_card.jpg
new file mode 100644
index 0000000..9b1b11f
Binary files /dev/null and b/docs/images/1080x1920/psychology_card.jpg differ
diff --git a/docs/images/1080x1920/purple.jpg b/docs/images/1080x1920/purple.jpg
new file mode 100644
index 0000000..ea47ef8
Binary files /dev/null and b/docs/images/1080x1920/purple.jpg differ
diff --git a/docs/images/1080x1920/simple.png b/docs/images/1080x1920/simple.png
new file mode 100644
index 0000000..75992c2
Binary files /dev/null and b/docs/images/1080x1920/simple.png differ
diff --git a/docs/images/1920x1080/ultrawide_minimal.jpg b/docs/images/1920x1080/ultrawide_minimal.jpg
new file mode 100644
index 0000000..36b1a32
Binary files /dev/null and b/docs/images/1920x1080/ultrawide_minimal.jpg differ
diff --git a/docs/images/1920x1080/wide_darktech.jpg b/docs/images/1920x1080/wide_darktech.jpg
new file mode 100644
index 0000000..d2b597e
Binary files /dev/null and b/docs/images/1920x1080/wide_darktech.jpg differ
diff --git a/docs/zh/user-guide/templates.md b/docs/zh/user-guide/templates.md
index 3965bcf..bbf4887 100644
--- a/docs/zh/user-guide/templates.md
+++ b/docs/zh/user-guide/templates.md
@@ -6,7 +6,151 @@
## 模板简介
-视频模板使用 HTML 定义视频画面的布局和样式。
+视频模板使用 HTML 定义视频画面的布局和样式。Pixelle-Video 提供了多种预设模板，覆盖不同的视频尺寸和风格需求。
+
+---
+
+## 内置模板预览
+
+### 竖屏模板 (1080x1920)
+
+适用于抖音、快手、小红书等短视频平台。
+
+
+
+- **Blur Card**
+
+ ---
+
+ 
+
+ 模糊背景卡片风格，适合图文内容展示
+
+- **Cartoon**
+
+ ---
+
+ 
+
+ 卡通风格，适合轻松活泼的内容
+
+- **Default**
+
+ ---
+
+ 
+
+ 默认模板，简洁通用
+
+- **Elegant**
+
+ ---
+
+ 
+
+ 优雅风格，适合文艺、知性内容
+
+- **Fashion Vintage**
+
+ ---
+
+ 
+
+ 复古时尚风格，适合怀旧主题
+
+- **Life Insights**
+
+ ---
+
+ 
+
+ 生活感悟风格，适合心灵鸡汤类内容
+
+- **Modern**
+
+ ---
+
+ 
+
+ 现代简约风格，适合商务、科技内容
+
+- **Neon**
+
+ ---
+
+ 
+
+ 霓虹灯风格，适合时尚、潮流内容
+
+- **Psychology Card**
+
+ ---
+
+ 
+
+ 心理学卡片风格，适合知识科普
+
+- **Purple**
+
+ ---
+
+ 
+
+ 紫色主题，适合梦幻、神秘风格
+
+- **Simple**
+
+ ---
+
+ 
+
+ 极简风格，突出内容本身
+
+
+
+---
+
+### 横屏模板 (1920x1080)
+
+适用于 YouTube、B站等视频平台。
+
+
+
+- **Ultrawide Minimal**
+
+ ---
+
+ 
+
+ 超宽屏极简风格，适合桌面端观看
+
+- **Wide Darktech**
+
+ ---
+
+ 
+
+ 暗黑科技风格，适合技术、游戏内容
+
+
+
+---
+
+### 方形模板 (1080x1080)
+
+适用于 Instagram、微信朋友圈等平台。
+
+
+
+- **Minimal Framed**
+
+ ---
+
+ 
+
+ 极简边框风格，适合社交媒体分享
+
+
---
@@ -16,33 +160,99 @@
```
templates/
-├── 1080x1920/ # 竖屏
-├── 1920x1080/ # 横屏
-└── 1080x1080/ # 方形
+├── 1080x1920/ # 竖屏（11个模板）
+├── 1920x1080/ # 横屏（2个模板）
+└── 1080x1080/ # 方形（1个模板）
```
---
-## 创建模板
+## 创建自定义模板
-1. 复制现有模板文件
-2. 修改 HTML 和 CSS
-3. 保存到对应尺寸目录
-4. 在 Web 界面中选择使用
+### 步骤
+
+1. 从 `templates/` 目录复制一个现有模板文件
+2. 修改 HTML 和 CSS 样式
+3. 保存到对应尺寸目录下，使用 `.html` 扩展名
+4. 在配置或 Web 界面中使用新模板名称
+
+### 模板变量
+
+模板支持以下 Jinja2 变量：
+
+- `{{ title }}` - 视频标题（可选）
+- `{{ text }}` - 当前分镜的文本内容
+- `{{ image }}` - 当前分镜的图片（如果有）
+
+### 示例模板
+
+```html
+
+
+
+
+
+
+
+
+
+```
---
-## 模板变量
+## 模板开发技巧
-模板支持以下变量：
+### 1. 响应式尺寸
-- `{{ title }}` - 视频标题
-- `{{ text }}` - 分镜文本
-- `{{ image }}` - 分镜图片
+确保模板的 `body` 尺寸与目标视频尺寸一致：
+
+- 竖屏：`width: 1080px; height: 1920px;`
+- 横屏：`width: 1920px; height: 1080px;`
+- 方形：`width: 1080px; height: 1080px;`
+
+### 2. 文本排版
+
+- 使用合适的字体大小和行高，确保可读性
+- 为文字添加阴影或背景，提高对比度
+- 控制文本长度，避免溢出
+
+### 3. 图片处理
+
+- 使用 `object-fit: cover` 确保图片填充
+- 添加渐变或遮罩层，提升文字可读性
+- 考虑图片加载失败的降级方案
+
+### 4. 性能优化
+
+- 避免使用过于复杂的 CSS 动画
+- 优化背景图片大小
+- 使用系统字体或 Web 安全字体
---
## 更多信息
-详细的模板开发指南即将推出。
+如有模板开发相关问题，欢迎在 [GitHub Issues](https://github.com/AIDC-AI/Pixelle-Video/issues) 中提问。