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:

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
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:

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:

Title/Headline
Executive summary (2-3 sentences)
Feature highlights with numbered list
How to update (fixed template)
Feedback & community section (fixed template)

Variable placeholders:

{HEADLINE} - Announcement title
{EXECUTIVE_SUMMARY} - Brief introduction
{FEATURE_LIST} - Formatted feature list

Example execution:

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:

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/:

{VERSION}.html - Open in a browser to verify visual appearance
{VERSION}-update.md - Review content for accuracy and tone
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:

# 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:

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

Less effective (too formal):

新增对 Kimi 平台的支持
已完成 Kimi 平台的集成，支持自动保存功能。

Resources

Templates

Poster HTML Template: 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
- 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
- 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

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

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:

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

Request additional information:
- Release date
- Main headline for poster
- Announcement title for markdown
- Executive summary
Execute generation:

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 细节优化|调整卡片间距、优化阴影效果，视觉体验更舒适"

Verify output:
- Open 1.1.3.html in browser
- Review 1.1.3-update.md content
- Check that first feature has highlight class
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:

Automatically detect the project root
Copy the logo file to the output directory
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.

chatmemo-update

$ Installer