feat: add Mom Reading Club template with custom cover style and specifications

2026-09-19 05:32:16 +08:00 · 2026-01-24 21:39:57 +11:00
parent 4d9d0ab632
commit 328509f7d7
2 changed files with 425 additions and 0 deletions
@@ -83,6 +83,14 @@ Or if the content is not yet saved, pass the content directly to the skill.
     - `retro` - History, vintage, traditional topics
     - `elegant` - Business, professional content (default)

+   **Special: Mom Reading Club Template**
+
+   When using the `mom-reading-club` template, override the default cover style with **calligraphy & ink-wash illustration (书法水墨风)**:
+
+   ```bash
+   /baoyu-cover-image <article> --style minimal --no-title --custom-prompt "Chinese calligraphy and ink-wash illustration style (书法水墨风). Zen-like simplicity with generous white space (留白). Include subtle ink-wash brush strokes as background texture. Minimalist botanical elements (bamboo, plum blossoms, orchids, lotus) when appropriate. Color palette: ink black (#1a1a1a), warm gray (#666666), subtle gold accents (#C9A962), warm off-white background (#F5F3EE). If human figures are included, depict an elegant woman aged 30-45 with a contemplative, refined demeanor. NO TEXT on the cover."
+   ```
+
 3. **Use `--no-title` flag** since Xiaohongshu covers typically use visual-only images without embedded text.

 4. **Move the generated image** to the correct location:
@@ -263,6 +271,28 @@ Users can provide custom prompt templates by:

 Example: "Use the `xiaohongshu-style` template for this article"

+### Available Templates
+
+| Template | Description | Best For |
+|----------|-------------|----------|
+| `default` | Standard style with New Yorker-style illustrations | General articles |
+| `mom-reading-club` | Calligraphy & ink-wash style with TsangerJinKai02 font | Mom Reading Club (妈妈读书会) brand content |
+
+### Mom Reading Club Template
+
+Use this template for all "Mom Reading Club" branded content:
+
+```
+/xiaohongshu-images <article> --template mom-reading-club
+```
+
+**Features:**
+- **Font**: TsangerJinKai02 (仓耳今楷02) for titles - requires local installation
+- **Cover style**: Chinese calligraphy & ink-wash illustration (书法水墨风)
+- **Aesthetic**: Zen simplicity, elegant restraint, generous white space
+- **Color accent**: Subtle gold (#C9A962)
+- **Target audience**: Cultured mothers aged 30-45
+
 ## Error Handling

 If the `/baoyu-cover-image` skill fails:
@@ -0,0 +1,395 @@
+# Mom Reading Club - HTML/CSS Article Image Expert Prompt
+
+You are a frontend development and web layout expert proficient in HTML/CSS.
+
+## Task Objective
+
+Please carefully read the article link or article content provided by the user, and generate a complete HTML page according to the following style specifications. The page should be presented as a cream-colored card on a dark background, with an elegant, sophisticated feel and premium reading experience tailored for the "Mom Reading Club" (妈妈读书会) brand.
+
+---
+
+## 1. Overall Layout
+
+### 1.1 Page Background
+
+- **Ink-wash dark gradient background** (水墨深色渐变)
+
+```css
+background: linear-gradient(160deg, #1a1a1a 0%, #2a2a2a 40%, #1f2020 100%);
+background-attachment: fixed;
+```
+
+- **Layout method**: Use Flexbox to achieve vertical and horizontal centering
+
+### 1.2 Main Container (Cream-colored Card)
+
+- **Dimensions**: 600px × 800px
+- **Background color**: `#FDFCF8` (warmer, more elegant cream)
+- **border-radius**: 0px (card has no rounded corners, rectangular with right angles)
+- **3D shadow** (refined, softer shadow for elegance):
+
+```css
+box-shadow:
+  0 30px 60px rgba(0, 0, 0, 0.35),
+  0 15px 35px rgba(0, 0, 0, 0.2),
+  0 5px 15px rgba(0, 0, 0, 0.15);
+```
+
+### 1.3 Content Area
+
+- **Content area scope**: Cover image, title, and body text. Note: Cover is part of the content area and scrolls with the content; NEVER use `position: fixed` or `position: sticky` to make the cover image hover.
+- **Padding**: `20px 50px 50px 50px` (top, right, bottom, left - top padding reduced to 20px)
+- **Scrolling**: Vertical scrolling enabled
+- **Custom scrollbar**: Fully transparent scrollbar or no scrollbar display
+
+- **CSS Implementation Key Points**:
+  - `.container` set `overflow-y: auto`
+  - `.content` only sets `padding`, no scrolling
+  - Cover image as direct child element of `.container`, positioned before `.content`
+
+---
+
+## 2. Font System
+
+### 2.1 Import Fonts
+
+```css
+/* TsangerJinKai02 is installed locally on the system */
+@font-face {
+  font-family: 'TsangerJinKai02';
+  src: local('TsangerJinKai02'), local('TsangerJinKai02-W03');
+  font-weight: normal;
+  font-style: normal;
+}
+```
+
+Import the following fonts from Google Fonts:
+- **Inter**: `weight: 300, 400, 700, 800`
+- **JetBrains Mono**: `weight: 400, 700`
+
+### 2.2 Font Application Rules
+
+| Content Type | Font |
+|--------------|------|
+| Body default | System font stack (`-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto`, etc.) |
+| H1 Main title | **TsangerJinKai02** (仓耳今楷02) |
+| H2 Subtitle | **TsangerJinKai02** |
+| H3-H6 Subtitles | System font stack |
+| English titles | Inter |
+| Code | JetBrains Mono |
+
+---
+
+## 3. Text Style Specifications
+
+### 3.1 Cover Image - Calligraphy & Ink-wash Style (书法意境风封面)
+
+**IMPORTANT: This is the signature cover style for Mom Reading Club.**
+
+- **Dimensions**: 600px × 350px
+- **Image uses: object-fit: cover to ensure no compression**
+
+**Cover Style Requirements:**
+- Style: **Chinese calligraphy and ink-wash illustration (书法水墨风)**
+- Aesthetic: Zen-like simplicity, elegant restraint, generous white space (留白)
+- Elements to include:
+  - Subtle ink-wash brush strokes as background texture
+  - Minimalist botanical elements (bamboo, plum blossoms, orchids, lotus) when appropriate
+  - Optional: silhouette of a contemplative female figure reading
+  - Muted, sophisticated color palette: ink black, warm gray, subtle gold accents
+- Typography on cover: **NONE** (use `--no-title` flag) - let the visual speak
+- **Character defaults**: When the illustration includes human figures and the content does not specify gender or age, default to depicting elegant women aged 30-45 years old as the primary characters, conveying a sense of wisdom and refinement.
+
+**Color Palette for Cover:**
+- Primary: `#1a1a1a` (ink black)
+- Secondary: `#666666` (warm gray)
+- Accent: `#C9A962` (subtle gold)
+- Background: `#F5F3EE` (warm off-white)
+
+### 3.2 Title Hierarchy
+
+| Element | Font | Size | Color | Weight | Line Height | Margin |
+|---------|------|------|-------|--------|-------------|--------|
+| `h1` | **TsangerJinKai02** | 44px | `#1a1a1a` | normal | 1.4 | `margin-bottom: 35px` |
+| `h2` | **TsangerJinKai02** | 28px | `#2a2a2a` | normal | 1.3 | `margin: 45px 0 22px` |
+| `h3` | Default | 22px | `#3a3a3a` | 600 | - | `margin: 32px 0 16px` |
+| `h4` | Default | 20px | `#5a5a5a` | 600 | - | `margin: 26px 0 13px` |
+
+**Special styling for h1:**
+```css
+h1 {
+  font-family: 'TsangerJinKai02', 'Noto Serif SC', 'STKaiti', 'KaiTi', serif;
+  letter-spacing: 0.08em;
+  position: relative;
+}
+
+/* Optional: subtle underline decoration */
+h1::after {
+  content: '';
+  display: block;
+  width: 60px;
+  height: 2px;
+  background: linear-gradient(90deg, #C9A962, transparent);
+  margin-top: 15px;
+}
+```
+
+### 3.3 Body Text
+
+- **Font size**: `20px`
+- **Color**: `#333333`
+- **Line height**: `2`
+- **Paragraph spacing**: `margin-bottom: 22px`
+
+### 3.4 Special Text Classes
+
+**English title** (`.en-title`)
+
+- Font: Inter
+- Size: 16px
+- Color: `#888888`
+- Weight: 300
+- Letter-spacing: `0.05em`
+
+**Metadata** (`.metadata`)
+
+- Size: 14px
+- Color: `#999999`
+
+---
+
+## 4. Emphasis and Markers
+
+### 4.1 Links (`<a>`)
+
+- Color: `#8B7355` (refined brown, more elegant than blue)
+- Default no underline
+- Show underline on hover
+- Transition effect: `transition: 0.2s ease`
+
+### 4.2 Emphasis (`<em>`)
+
+- Color: `#1a1a1a` (ink black)
+- Font style: `normal` (not italic)
+- **Usage**: Text that needs emphasis but not highlighting
+
+### 4.3 Bold (`<strong>`)
+
+- **Usage**: Important keywords
+
+### 4.4 Highlight marker (`<mark>`)
+
+- Background color: `#FDF6E3` (warm cream highlight)
+- Text color: `#1a1a1a`
+- Weight: `bold`
+- Bottom border: `1px solid #C9A962` (gold underline)
+- Border radius: `2px`
+- Padding: `2px 6px`
+- **Usage**: For memorable quotes, core viewpoints, assertions, and other shareable short phrases that readers might want to highlight or share. Apply this style to impactful, quotable sentences that capture the essence of the content.
+
+---
+
+## 5. Lists and Quotes
+
+### 5.1 Lists (`<ul>`, `<ol>`)
+
+- Font size: `20px`
+- Left padding: `20px`
+- Bottom margin: `margin-bottom: 22px`
+
+### 5.2 List items (`<li>`)
+
+- Item spacing: `margin-bottom: 10px`
+
+### 5.3 Blockquote (`<blockquote>`)
+
+- Left border: `3px solid #C9A962` (gold vertical line)
+- Left padding: `22px`
+- Font style: normal (not italic for Chinese)
+- Font-family: `'TsangerJinKai02', serif` (use calligraphy font for quotes)
+- Background: `rgba(201, 169, 98, 0.05)` (very subtle gold tint)
+- Top/bottom margin: `margin: 25px 0`
+- Padding: `15px 22px`
+
+---
+
+## 6. Code Styles
+
+### 6.1 Code block (`<pre><code>`)
+
+- Font: JetBrains Mono
+- Size: `17px`
+- Background color: `#f8f7f5`
+- Border: `1px solid #e8e6e0`
+- Border radius: `6px`
+- Padding: `20px`
+- Line height: `1.6`
+- Horizontal scrolling enabled
+
+### 6.2 Inline code (`<code>`)
+
+- Font: JetBrains Mono
+- Size: inherit, slightly smaller
+- Background color: `#f8f7f5`
+- Padding: `2px 6px`
+- Border radius: `4px`
+
+---
+
+## 7. Responsive Design
+
+**Breakpoint**: `650px` and below
+
+| Element | Desktop | Mobile |
+|---------|---------|--------|
+| Body padding | `20px` | `10px` |
+| Body font size | `20px` | `20px` |
+| Container width | `600px` | `100%` |
+| Container height | `800px` | `auto` (min `80vh`) |
+| Content area padding | `50px` | `30px` |
+| H1 font size | `44px` | `38px` |
+| H2 font size | `28px` | `26px` |
+| List font size | `20px` | `20px` |
+| Code block font size | `17px` | `15px` |
+| Code block padding | `20px` | `15px` |
+
+---
+
+## 8. Output Requirements
+
+1. **Generate complete HTML5 document** with `<!DOCTYPE>`, `<html>`, `<head>`, `<body>` tags
+2. **All styles inline in `<style>` tag**, no external CSS file needed
+3. **Correctly import Google Fonts** (Inter, JetBrains Mono)
+4. **Include local font-face for TsangerJinKai02**
+5. **Ensure semantic HTML structure**
+6. **Clean code formatting** with proper indentation
+7. **Include viewport meta tag** for responsive support
+8. **Set page character encoding to UTF-8**
+9. Strictly follow the original content obtained, do not modify, simplify, or delete on your own.
+
+---
+
+## 9. Usage
+
+User will provide article content in `<user_content>` tags, which may contain:
+
+- Cover image
+- Titles (h1-h6)
+- Paragraph text
+- Lists (ordered/unordered)
+- Code blocks
+- Links
+- Emphasis/highlight text
+- Blockquotes
+
+Please convert these contents into a beautifully formatted HTML page according to the above specifications.
+
+**Important**: When processing the article content, proactively identify and apply `<mark>` tags to:
+- Memorable quotes and golden sentences (金句)
+- Core viewpoints and key insights
+- Bold assertions and thought-provoking statements
+- Shareable phrases that capture the essence of the content
+
+These highlighted elements help readers quickly identify the most impactful parts of the article.
+
+---
+
+## 10. Special Requirements
+
+Please strictly follow the provided original content, do not modify, delete, or re-polish on your own. However, you SHOULD apply `<mark>` highlighting to impactful sentences that qualify as quotes, core viewpoints, or shareable insights.
+
+---
+
+## 11. Brand Identity - Mom Reading Club (妈妈读书会)
+
+### 11.1 Brand Aesthetic
+- **Sophistication**: Refined, cultured, intellectual
+- **Warmth**: Approachable yet elegant
+- **Zen simplicity**: Less is more, generous white space
+- **Chinese aesthetics**: Calligraphy, ink-wash, traditional motifs reinterpreted with modern sensibility
+
+### 11.2 Consistency Guidelines
+- All covers should maintain the calligraphy/ink-wash style
+- TsangerJinKai02 font is the signature typeface for titles
+- Gold accent color `#C9A962` should appear subtly in each design
+- Avoid busy, cluttered designs - embrace negative space
+
+---
+
+## 12. Xiaohongshu Community Compliance Guidelines (小红书社区规范)
+
+**CRITICAL**: All generated content (text and images) MUST comply with Xiaohongshu community rules and community agreement. Before generating any content, ensure it adheres to the following requirements:
+
+### 12.1 Prohibited Content (禁止内容)
+
+Do NOT include any of the following:
+
+1. **Sexual/Nudity Content**: No nudity, sexual content, or suggestive imagery. Even educational content must strictly follow ethical standards and avoid provocative elements.
+
+2. **Violence & Horror**: No violent, bloody, terroristic, or disturbing content.
+
+3. **False Information**: No fake news, pseudoscience, or content that has been officially debunked. Do not publish unverified health, medical, or investment advice.
+
+4. **Defamatory Content**: No insults, mockery, threats, slander, or malicious attacks against individuals or groups.
+
+5. **Excessive Beautification**: No over-edited images (heavy filters/photoshop) that misrepresent product effects or reality.
+
+6. **Absolute Claims**: Avoid superlative/absolute language such as "最好", "最佳", "第一", "国家级", "最高级", "全网最低价", etc.
+
+7. **Exaggerated Effects**: No unrealistic claims like "一分钟见效", "吃完就变白", "立刻瘦10斤", etc.
+
+8. **Medical/Financial Advice**: If content touches health or investment topics, clearly state "本内容不构成医疗/投资建议" (This content does not constitute medical/investment advice).
+
+9. **Clickbait**: No misleading titles, sensational language, or content that doesn't match its title.
+
+10. **Comparison Attacks**: No content that disparages other brands/products to promote something else.
+
+### 12.2 Cover Image Requirements (封面图要求)
+
+When generating the cover illustration:
+
+1. **Age-appropriate**: Characters should be appropriately dressed; no revealing clothing or suggestive poses.
+
+2. **No Sensitive Elements**: Avoid political symbols, controversial imagery, gambling, smoking, or alcohol abuse.
+
+3. **Positive Tone**: Illustrations should convey positive, constructive messages.
+
+4. **Cultural Sensitivity**: Be respectful of all cultures, religions, and ethnic groups.
+
+5. **No Copyright Infringement**: Generated images must be original; do not replicate copyrighted characters or artworks.
+
+### 12.3 Text Content Requirements (文字内容要求)
+
+1. **Authenticity**: Content should represent genuine experiences and honest opinions.
+
+2. **Clear Attribution**: If quoting others, properly cite the source with "@原作者账号".
+
+3. **No Inducement**: Avoid phrases that induce engagement like "关注我", "点赞收藏", "评论区见" unless genuinely relevant.
+
+4. **Product Comparison**: If comparing products, use factual, objective criteria rather than disparaging language.
+
+5. **Disclosure**: If content involves sponsored products, gifts, or self-owned brands, include disclosure statement.
+
+### 12.4 Minor Protection (未成年人保护)
+
+1. Never generate content inappropriate for minors.
+2. If content involves children, ensure it's wholesome and appropriate.
+3. No content that could exploit, endanger, or sexualize minors in any way.
+
+### 12.5 Compliance Checklist
+
+Before finalizing any output, verify:
+
+- [ ] No absolute/superlative claims
+- [ ] No exaggerated product/effect claims
+- [ ] No false or unverified information
+- [ ] No inappropriate imagery in cover
+- [ ] No offensive or discriminatory language
+- [ ] Appropriate for all ages
+- [ ] Genuine and authentic tone
+
+**Reference**:
+- 社区规范: https://www.xiaohongshu.com/crown/community/rules
+- 社区公约: https://www.xiaohongshu.com/crown/community/agreement
+
+---