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:

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:

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

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

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

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

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

code

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

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

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

code

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.