---
name: chatmemo-update
description: This skill should be used when a user wants to create Chat Memo update release materials, specifically to generate an HTML poster and a markdown update description document for a new version release. Use this when a user says "发布新版本", "创建更新", "生成更新海报" or similar phrases, or provides version information and feature lists for a release.
---

# Chat Memo Update Generator

## Overview

This skill generates two essential marketing/documentation assets for Chat Memo version releases:

1. **HTML Poster** (`{VERSION}.html`) - A visually appealing 3:4 aspect ratio poster featuring the brand logo, version information, and a list of new features/improvements
2. **Update Description** (`{VERSION}-update.md`) - A markdown document suitable for blog posts, newsletters, or social media announcements

The generated files follow the exact format and style of existing Chat Memo release materials (e.g., 1.1.2.html and 1.1.2-update.md), ensuring brand consistency across all communications.

**Key Automation Features**:
- Automatically creates output directory at `project-root/update-item/`
- Automatically copies `logo-single.png` to ensure HTML poster displays correctly
- Defaults to creating all files in the standardized location

## Core Capabilities

### 1. HTML Poster Generation

**Output file**: `{VERSION}.html` (e.g., 1.1.2.html)

**Template**: `assets/poster-template.html`

**Key features**:
- 600px × 800px canvas with 3:4 aspect ratio
- Blurred logo background (opacity: 0.15, blur: 48px)
- Brand color scheme (primary blue: #3B45C4, primary purple: #5A4CFF)
- Dynamic number of feature cards (highlighted first card)
- Professional typography using Noto Sans SC font

**Variable placeholders**:
- `{VERSION}` - Version number (e.g., "1.1.2")
- `{DATE}` - Release date (e.g., "2025年12月3日")
- `{MAIN_TITLE}` - Main headline with optional line breaks
- `{UPDATE_CARDS}` - Generated HTML for feature cards

**Example execution**:
```bash
python3 scripts/generate_files.py \
  --version 1.1.3 \
  --date "2025年12月10日" \
  --title "大模型支持升级\n新增 Claude 3.5 录制"
```

### 2. Markdown Update Description Generation

**Output file**: `{VERSION}-update.md` (e.g., 1.1.2-update.md)

**Template**: `assets/markdown-template.md`

**Sections**:
1. Title/Headline
2. Executive summary (2-3 sentences)
3. Feature highlights with numbered list
4. How to update (fixed template)
5. Feedback & community section (fixed template)

**Variable placeholders**:
- `{HEADLINE}` - Announcement title
- `{EXECUTIVE_SUMMARY}` - Brief introduction
- `{FEATURE_LIST}` - Formatted feature list

**Example execution**:
```bash
python3 scripts/generate_files.py \
  --headline "支持 Claude 了！Chat Memo v1.1.3 发布" \
  --summary "重磅功能来啦！" \
  --features "🚀|新增 Claude 支持|现在可以自动保存 Claude 的对话记录了"
```

## Workflow for Creating Update Materials

### Step 1: Gather Release Information

Collect the following information from the user:

- **Version number** (required): e.g., "1.1.3"
- **Release date** (required): e.g., "2025年12月10日"
- **Main headline** (required): Short title for the poster, can include `\n` for line breaks
- **Update announcement title** (required): Full title for the markdown document
- **Executive summary** (required): 2-3 sentence overview
- **Feature list** (required): One or more features in the format: `ICON|TITLE|DESCRIPTION`

**Feature format details**:
- Use `|` as delimiter (pipe character)
- ICON: Emoji representation (e.g., 🚀, ✨, 🔧)
- TITLE: Feature name (2-10 characters)
- DESCRIPTION: Feature details (1-2 sentences)
- First feature should be the most important (gets highlighted)

### Step 2: Run the Generation Script

The script automatically handles directory creation and logo copying. Execute with required parameters:

```bash
python3 scripts/generate_files.py \
  --version VERSION \
  --date "DATE" \
  --title "HEADLINE" \
  --headline "MARKDOWN_TITLE" \
  --summary "SUMMARY" \
  --features "ICON1|TITLE1|DESC1" \
             "ICON2|TITLE2|DESC2" \
             "ICON3|TITLE3|DESC3"
```

**What the script does automatically**:
- ✅ Creates the `update-item/` directory at `project-root/update-item/`
- ✅ Copies `logo-single.png` to ensure the HTML poster displays correctly
- ✅ Generates all files in the standardized location
- ✅ Reports the status of each operation

### Step 3: Review Generated Files

The script produces files in `<project-root>/update-item/`:

1. `{VERSION}.html` - Open in a browser to verify visual appearance
2. `{VERSION}-update.md` - Review content for accuracy and tone
3. `logo-single.png` - Automatically copied for the HTML poster

**Default location**: `/Users/eze/Desktop/Chat-Memo-Project/官网/chat-memo-website/updates-pic/update-item/`

**Checklist**:
- [ ] First card has `highlight` class
- [ ] Logo displays correctly (both in header and blurred background)
- [ ] Version number appears in both files
- [ ] Date format is correct
- [ ] All feature cards render properly
- [ ] Markdown has proper spacing and formatting
- [ ] `logo-single.png` is present in output directory

### Step 4: Refine if Necessary

If adjustments are needed:

- **Visual changes**: Edit the HTML file or modify `assets/poster-template.html`
- **Content changes**: Edit the Markdown file or modify `assets/markdown-template.md`
- **Style changes**: Update CSS in the HTML template or adjust the generation script

**Note**: For recurring style preferences, update the templates rather than individual generated files.

**Custom Output Location**: If you need to output to a different directory, use the `--output` flag:

```bash
# Custom output directory
python3 scripts/generate_files.py --output ./my-custom-dir ...

# Absolute path
python3 scripts/generate_files.py --output /path/to/output ...
```

When using custom output locations, the script will still automatically create the directory and copy the logo file.

## Style Guidelines

### Visual Design (HTML Poster)

- **Background**: Blurred logo with 15% opacity
- **Primary colors**: Blue (#3B45C4) and Purple (#5A4CFF)
- **Card design**: White background with backdrop blur, 20px border radius
- **Typography**: Noto Sans SC font family
- **Layout**: Left-aligned logo, right-aligned version tag

### Writing Tone (Markdown Update)

**Use a relaxed, friendly style**:

- **Include emojis**: 🚀, 🎉, ✨, 🔧, 💡, etc.
- **Use conversational language**: "重磅功能来啦！" instead of "重大功能更新"
- **Be concise but warm**: Short paragraphs, friendly tone
- **Focus on user benefits**: Explain what the feature does for the user
- **First feature gets extra attention**: Most important update listed first

**Example of effective feature description**:
```markdown
🚀 新增 Kimi 平台支持
现在 Chat Memo 也能自动保存 Kimi 的对话记录了，灵感不再丢失，每一句对话都将被妥善保管。
```

**Less effective** (too formal):
```markdown
新增对 Kimi 平台的支持
已完成 Kimi 平台的集成，支持自动保存功能。
```

## Resources

### Templates

- **Poster HTML Template**: [`assets/poster-template.html`](./assets/poster-template.html)
  - Contains placeholders: `{VERSION}`, `{DATE}`, `{MAIN_TITLE}`, `{UPDATE_CARDS}`
  - Source reference: `assets/poster-reference.html` (full 1.1.2.html example)

- **Markdown Template**: [`assets/markdown-template.md`](./assets/markdown-template.md)
  - Contains placeholders: `{HEADLINE}`, `{EXECUTIVE_SUMMARY}`, `{FEATURE_LIST}`
  - Source reference: `assets/markdown-reference.md` (full 1.1.2-update.md example)

### Brand Assets

- **Logo file**: [`assets/logo-single.png`](./assets/logo-single.png)
  - **Important**: This logo file is required for the HTML poster to display correctly
  - Used in both the header and blurred background
  - Ensure this file is present in the same directory as generated HTML files
  - If creating files in a different location, copy this logo file along with the HTML

**How to use**: When generating an HTML poster, the `logo-single.png` file must be in the same directory as the generated `{VERSION}.html` file for the logo to display properly.

### Format Guide

**Reference**: [`references/format-guide.md`](./references/format-guide.md)

Comprehensive documentation covering:
- Complete HTML structure with all CSS
- Markdown section breakdown
- Feature item format (`ICON|TITLE|DESCRIPTION`)
- Version naming conventions
- Visual design specifications
- Writing style examples

**Use this when**: You need to understand the full format specification or adjust the templates.

### Generation Script

**Script**: [`scripts/generate_files.py`](./scripts/generate_files.py)

**Capabilities**:
- Reads HTML and Markdown templates
- Replaces placeholders with user-provided data
- Generates feature cards dynamically
- Saves output files with proper encoding

**Dependencies**: Python 3.x, no external packages required

**Usage**:
```bash
python3 scripts/generate_files.py --help
```

## Example: Complete Release Workflow

**Scenario**: Creating release materials for version 1.1.3 with Claude support

### User Request

```
发布 v1.1.3，包含功能：
1. 新增 Claude 支持 🚀
2. 搜索速度提升 3 倍 ✨
3. 修复 Gemini 重复保存问题 🔧
4. UI 优化 💅
```

### Claude's Actions

1. **Request additional information**:
   - Release date
   - Main headline for poster
   - Announcement title for markdown
   - Executive summary

2. **Execute generation**:

```bash
python3 scripts/generate_files.py \
  --version 1.1.3 \
  --date "2025年12月10日" \
  --title "Claude 来啦！\n还支持 30+ 种语言" \
  --headline "重磅更新！Chat Memo v1.1.3 支持 Claude" \
  --summary "让你所有 AI 对话都能被保存和回顾，这次我们加入了大家都在催的 Claude 支持！" \
  --features "🚀|新增 Claude 3.5 支持|现在可以自动保存 Claude 的对话记录了，Anthropic 用户久等了！" \
             "✨|搜索速度提升 3 倍|底层搜索算法重构，找对话再也不用等待" \
             "🔧|修复 Gemini 重复保存|解决 Gemini 平台消息重复保存的问题，节省存储空间" \
             "💅|UI 细节优化|调整卡片间距、优化阴影效果，视觉体验更舒适"
```

3. **Verify output**:
   - Open `1.1.3.html` in browser
   - Review `1.1.3-update.md` content
   - Check that first feature has `highlight` class

4. **Provide files to user**:
   - HTML poster ready for sharing
   - Markdown document ready for blog/post

## Common Issues and Solutions

### Template files not found

**Error**: `❌ 模板文件不存在`

**Solution**: Ensure the script is run from the skill directory or that template files exist in the expected location.

**Template directory**: `/Users/eze/Desktop/Chat-Memo-Project/官网/chat-memo-website/updates-pic/.claude/skills/chatmemo-update/assets`

### Invalid feature format

**Error**: `❌ 功能格式错误`

**Solution**: Features must use format: `ICON|TITLE|DESCRIPTION`

**Example**: `🚀|新增 Kimi 支持|终于等到你！现在可以自动保存 Kimi 的对话记录了`

### File encoding issues

**Solution**: The script uses UTF-8 encoding. Ensure your terminal supports UTF-8 for proper emoji display.

## Notes

- Always use the same version number for both files
- The first feature gets `highlight` class automatically
- **Automatic logo handling**: The script automatically copies `logo-single.png` from the project root to the output directory. No manual copying is required.
- **Default output location**: Files are saved to `project-root/update-item/` by default
- Both output files are independent and can be edited separately after generation
- For recurring releases, consider creating a simple wrapper script with common parameters

### Logo File Location

The script expects `logo-single.png` to be located in the **project root directory** (the directory containing `updates-pic/`). The script will:
1. Automatically detect the project root
2. Copy the logo file to the output directory
3. Display a warning if the logo cannot be found

If you need to use a custom logo location, modify the `get_project_root()` function in `scripts/generate_files.py`.

### Output Directory Structure

After running the script, the following structure is created:

```
project-root/
├── updates-pic/
│   ├── .claude/
│   ├── logo-single.png      # Source logo file
│   ├── 1.1.2.html           # Previous releases
│   └── update-item/         # ⬅️ Generated files go here
│       ├── logo-single.png  # Copied automatically
│       ├── 1.1.3.html       # Generated poster
│       └── 1.1.3-update.md  # Generated description
```

This keeps all release files organized in a dedicated directory while maintaining access to the logo file.