mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-07-12 22:09:48 +08:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9e2ee0659b | |||
| 94c9309aa6 |
@@ -6,7 +6,7 @@
|
||||
},
|
||||
"metadata": {
|
||||
"description": "Skills shared by Baoyu for improving daily work efficiency",
|
||||
"version": "1.15.0"
|
||||
"version": "1.15.2"
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
|
||||
@@ -1,197 +1,315 @@
|
||||
---
|
||||
name: release-skills
|
||||
description: Release workflow for baoyu-skills plugin. Use when user says "release", "发布", "push", "推送", "new version", "新版本", "bump version", "更新版本", or wants to publish changes to remote. Analyzes changes since last tag, updates CHANGELOG (EN/CN), bumps marketplace.json version, commits, and creates version tag. MUST be used before any git push with uncommitted skill changes.
|
||||
description: Universal release workflow. Auto-detects version files and changelogs. Supports Node.js, Python, Rust, Claude Plugin, and generic projects. Use when user says "release", "发布", "new version", "bump version", "push", "推送".
|
||||
---
|
||||
|
||||
# Release Skills
|
||||
|
||||
Automate the release process for baoyu-skills plugin: analyze changes, update changelogs, bump version, commit, and tag.
|
||||
Universal release workflow supporting any project type with multi-language changelog.
|
||||
|
||||
## CRITICAL: Mandatory Release Checklist
|
||||
## Quick Start
|
||||
|
||||
**NEVER skip these steps when releasing:**
|
||||
Just run `/release-skills` - auto-detects your project configuration.
|
||||
|
||||
1. ✅ Update `CHANGELOG.md` (English)
|
||||
2. ✅ Update `CHANGELOG.zh.md` (Chinese)
|
||||
3. ✅ Update `marketplace.json` version
|
||||
4. ✅ Update `README.md` / `README.zh.md` if needed
|
||||
5. ✅ Commit all changes together
|
||||
6. ✅ Create version tag
|
||||
## Supported Projects
|
||||
|
||||
**If user says "直接 push" or "just push" - STILL follow all steps above first!**
|
||||
|
||||
## When to Use
|
||||
|
||||
Trigger this skill when user requests:
|
||||
- "release", "发布", "create release", "new version"
|
||||
- "bump version", "update version"
|
||||
- "prepare release"
|
||||
- "push to remote" (with uncommitted changes)
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Analyze Changes Since Last Tag
|
||||
|
||||
```bash
|
||||
# Get the latest version tag
|
||||
LAST_TAG=$(git tag --sort=-v:refname | head -1)
|
||||
|
||||
# Show changes since last tag
|
||||
git log ${LAST_TAG}..HEAD --oneline
|
||||
git diff ${LAST_TAG}..HEAD --stat
|
||||
```
|
||||
|
||||
Categorize changes by type based on commit messages and file changes:
|
||||
|
||||
| Type | Prefix | Description |
|
||||
|------|--------|-------------|
|
||||
| feat | `feat:` | New features, new skills |
|
||||
| fix | `fix:` | Bug fixes |
|
||||
| docs | `docs:` | Documentation only |
|
||||
| refactor | `refactor:` | Code refactoring |
|
||||
| style | `style:` | Formatting, styling |
|
||||
| chore | `chore:` | Build, tooling, maintenance |
|
||||
|
||||
**Breaking Change Detection**: If changes include:
|
||||
- Removed skills or scripts
|
||||
- Changed API/interfaces
|
||||
- Renamed public functions/options
|
||||
|
||||
Warn user: "Breaking changes detected. Consider major version bump (--major flag)."
|
||||
|
||||
### Step 2: Determine Version Bump
|
||||
|
||||
Current version location: `.claude-plugin/marketplace.json` → `metadata.version`
|
||||
|
||||
Version rules:
|
||||
- **Patch** (0.6.1 → 0.6.2): Bug fixes, docs updates, minor improvements
|
||||
- **Minor** (0.6.x → 0.7.0): New features, new skills, significant enhancements
|
||||
- **Major** (0.x → 1.0): Breaking changes, only when user explicitly requests with `--major`
|
||||
|
||||
Default behavior:
|
||||
- If changes include `feat:` or new skills → Minor bump
|
||||
- Otherwise → Patch bump
|
||||
|
||||
### Step 3: Check and Update README
|
||||
|
||||
Before updating changelogs, check if README files need updates based on changes:
|
||||
|
||||
**When to update README**:
|
||||
- New skills added → Add to skill list
|
||||
- Skills removed → Remove from skill list
|
||||
- Skill renamed → Update references
|
||||
- New features affecting usage → Update usage section
|
||||
- Breaking changes → Update migration notes
|
||||
|
||||
**Files to sync**:
|
||||
- `README.md` (English)
|
||||
- `README.zh.md` (Chinese)
|
||||
|
||||
If changes include new skills or significant feature changes, update both README files to reflect the new capabilities. Keep both files in sync with the same structure and information.
|
||||
|
||||
### Step 4: Update Changelogs
|
||||
|
||||
Files to update:
|
||||
- `CHANGELOG.md` (English)
|
||||
- `CHANGELOG.zh.md` (Chinese)
|
||||
|
||||
Format (insert after header, before previous version):
|
||||
|
||||
```markdown
|
||||
## {NEW_VERSION} - {YYYY-MM-DD}
|
||||
|
||||
### Features
|
||||
- `skill-name`: description of new feature
|
||||
|
||||
### Fixes
|
||||
- `skill-name`: description of fix
|
||||
|
||||
### Documentation
|
||||
- description of docs changes
|
||||
|
||||
### Other
|
||||
- description of other changes
|
||||
```
|
||||
|
||||
Only include sections that have changes. Omit empty sections.
|
||||
|
||||
For Chinese changelog, translate the content maintaining the same structure.
|
||||
|
||||
### Step 5: Update marketplace.json
|
||||
|
||||
Update `.claude-plugin/marketplace.json`:
|
||||
```json
|
||||
{
|
||||
"metadata": {
|
||||
"version": "{NEW_VERSION}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Step 6: Commit Changes
|
||||
|
||||
```bash
|
||||
git add README.md README.zh.md CHANGELOG.md CHANGELOG.zh.md .claude-plugin/marketplace.json
|
||||
git commit -m "chore: release v{NEW_VERSION}"
|
||||
```
|
||||
|
||||
**Note**: Do NOT add Co-Authored-By line. This is a release commit, not a code contribution.
|
||||
|
||||
### Step 7: Create Version Tag
|
||||
|
||||
```bash
|
||||
git tag v{NEW_VERSION}
|
||||
```
|
||||
|
||||
**Important**: Do NOT push to remote. User will push manually when ready.
|
||||
| Project Type | Version File | Auto-Detected |
|
||||
|--------------|--------------|---------------|
|
||||
| Node.js | package.json | ✓ |
|
||||
| Python | pyproject.toml | ✓ |
|
||||
| Rust | Cargo.toml | ✓ |
|
||||
| Claude Plugin | marketplace.json | ✓ |
|
||||
| Generic | VERSION / version.txt | ✓ |
|
||||
|
||||
## Options
|
||||
|
||||
| Flag | Description |
|
||||
|------|-------------|
|
||||
| `--dry-run` | Preview changes without executing. Show what would be updated. |
|
||||
| `--major` | Force major version bump (0.x → 1.0 or 1.x → 2.0) |
|
||||
| `--dry-run` | Preview changes without executing |
|
||||
| `--major` | Force major version bump |
|
||||
| `--minor` | Force minor version bump |
|
||||
| `--patch` | Force patch version bump |
|
||||
| `--pre <tag>` | (Reserved) Create pre-release version, e.g., `--pre beta` → `0.7.0-beta.1` |
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Detect Project Configuration
|
||||
|
||||
1. Check for `.releaserc.yml` (optional config override)
|
||||
2. Auto-detect version file by scanning (priority order):
|
||||
- `package.json` (Node.js)
|
||||
- `pyproject.toml` (Python)
|
||||
- `Cargo.toml` (Rust)
|
||||
- `marketplace.json` or `.claude-plugin/marketplace.json` (Claude Plugin)
|
||||
- `VERSION` or `version.txt` (Generic)
|
||||
3. Scan for changelog files using glob patterns:
|
||||
- `CHANGELOG*.md`
|
||||
- `HISTORY*.md`
|
||||
- `CHANGES*.md`
|
||||
4. Identify language of each changelog by filename suffix
|
||||
5. Display detected configuration
|
||||
|
||||
**Language Detection Rules**:
|
||||
|
||||
| Filename Pattern | Language |
|
||||
|------------------|----------|
|
||||
| `CHANGELOG.md` (no suffix) | en (default) |
|
||||
| `CHANGELOG.zh.md` / `CHANGELOG_CN.md` / `CHANGELOG.zh-CN.md` | zh |
|
||||
| `CHANGELOG.ja.md` / `CHANGELOG_JP.md` | ja |
|
||||
| `CHANGELOG.ko.md` / `CHANGELOG_KR.md` | ko |
|
||||
| `CHANGELOG.de.md` / `CHANGELOG_DE.md` | de |
|
||||
| `CHANGELOG.fr.md` / `CHANGELOG_FR.md` | fr |
|
||||
| `CHANGELOG.es.md` / `CHANGELOG_ES.md` | es |
|
||||
| `CHANGELOG.{lang}.md` | Corresponding language code |
|
||||
|
||||
**Output Example**:
|
||||
```
|
||||
Project detected:
|
||||
Version file: package.json (1.2.3)
|
||||
Changelogs:
|
||||
- CHANGELOG.md (en)
|
||||
- CHANGELOG.zh.md (zh)
|
||||
- CHANGELOG.ja.md (ja)
|
||||
```
|
||||
|
||||
### Step 2: Analyze Changes Since Last Tag
|
||||
|
||||
```bash
|
||||
LAST_TAG=$(git tag --sort=-v:refname | head -1)
|
||||
git log ${LAST_TAG}..HEAD --oneline
|
||||
git diff ${LAST_TAG}..HEAD --stat
|
||||
```
|
||||
|
||||
Categorize by conventional commit types:
|
||||
|
||||
| Type | Description |
|
||||
|------|-------------|
|
||||
| feat | New features |
|
||||
| fix | Bug fixes |
|
||||
| docs | Documentation |
|
||||
| refactor | Code refactoring |
|
||||
| perf | Performance improvements |
|
||||
| test | Test changes |
|
||||
| style | Formatting, styling |
|
||||
| chore | Maintenance (skip in changelog) |
|
||||
|
||||
**Breaking Change Detection**:
|
||||
- Commit message starts with `BREAKING CHANGE`
|
||||
- Commit body/footer contains `BREAKING CHANGE:`
|
||||
- Removed public APIs, renamed exports, changed interfaces
|
||||
|
||||
If breaking changes detected, warn user: "Breaking changes detected. Consider major version bump (--major flag)."
|
||||
|
||||
### Step 3: Determine Version Bump
|
||||
|
||||
Rules (in priority order):
|
||||
1. User flag `--major/--minor/--patch` → Use specified
|
||||
2. BREAKING CHANGE detected → Major bump (1.x.x → 2.0.0)
|
||||
3. `feat:` commits present → Minor bump (1.2.x → 1.3.0)
|
||||
4. Otherwise → Patch bump (1.2.3 → 1.2.4)
|
||||
|
||||
Display version change: `1.2.3 → 1.3.0`
|
||||
|
||||
### Step 4: Generate Multi-language Changelogs
|
||||
|
||||
For each detected changelog file:
|
||||
|
||||
1. **Identify language** from filename suffix
|
||||
2. **Generate content in that language**:
|
||||
- Section titles in target language
|
||||
- Change descriptions written naturally in target language (not translated)
|
||||
- Date format: YYYY-MM-DD (universal)
|
||||
3. **Insert at file head** (preserve existing content)
|
||||
|
||||
**Section Title Translations** (built-in):
|
||||
|
||||
| Type | en | zh | ja | ko | de | fr | es |
|
||||
|------|----|----|----|----|----|----|-----|
|
||||
| feat | Features | 新功能 | 新機能 | 새로운 기능 | Funktionen | Fonctionnalités | Características |
|
||||
| fix | Fixes | 修复 | 修正 | 수정 | Fehlerbehebungen | Corrections | Correcciones |
|
||||
| docs | Documentation | 文档 | ドキュメント | 문서 | Dokumentation | Documentation | Documentación |
|
||||
| refactor | Refactor | 重构 | リファクタリング | 리팩토링 | Refactoring | Refactorisation | Refactorización |
|
||||
| perf | Performance | 性能优化 | パフォーマンス | 성능 | Leistung | Performance | Rendimiento |
|
||||
| breaking | Breaking Changes | 破坏性变更 | 破壊的変更 | 주요 변경사항 | Breaking Changes | Changements majeurs | Cambios importantes |
|
||||
|
||||
**Changelog Format**:
|
||||
|
||||
```markdown
|
||||
## {VERSION} - {YYYY-MM-DD}
|
||||
|
||||
### Features
|
||||
- Description of new feature
|
||||
|
||||
### Fixes
|
||||
- Description of fix
|
||||
|
||||
### Documentation
|
||||
- Description of docs changes
|
||||
```
|
||||
|
||||
Only include sections that have changes. Omit empty sections.
|
||||
|
||||
**Multi-language Example**:
|
||||
|
||||
English (CHANGELOG.md):
|
||||
```markdown
|
||||
## 1.3.0 - 2026-01-22
|
||||
|
||||
### Features
|
||||
- Add user authentication module
|
||||
- Support OAuth2 login
|
||||
|
||||
### Fixes
|
||||
- Fix memory leak in connection pool
|
||||
```
|
||||
|
||||
Chinese (CHANGELOG.zh.md):
|
||||
```markdown
|
||||
## 1.3.0 - 2026-01-22
|
||||
|
||||
### 新功能
|
||||
- 新增用户认证模块
|
||||
- 支持 OAuth2 登录
|
||||
|
||||
### 修复
|
||||
- 修复连接池内存泄漏问题
|
||||
```
|
||||
|
||||
Japanese (CHANGELOG.ja.md):
|
||||
```markdown
|
||||
## 1.3.0 - 2026-01-22
|
||||
|
||||
### 新機能
|
||||
- ユーザー認証モジュールを追加
|
||||
- OAuth2 ログインをサポート
|
||||
|
||||
### 修正
|
||||
- コネクションプールのメモリリークを修正
|
||||
```
|
||||
|
||||
### Step 5: Update Version File
|
||||
|
||||
1. Read version file (JSON/TOML/text)
|
||||
2. Update version number
|
||||
3. Write back (preserve formatting)
|
||||
|
||||
**Version Paths by File Type**:
|
||||
|
||||
| File | Path |
|
||||
|------|------|
|
||||
| package.json | `$.version` |
|
||||
| pyproject.toml | `project.version` |
|
||||
| Cargo.toml | `package.version` |
|
||||
| marketplace.json | `$.metadata.version` |
|
||||
| VERSION / version.txt | Direct content |
|
||||
|
||||
### Step 6: Commit and Tag
|
||||
|
||||
```bash
|
||||
git add <all modified files>
|
||||
git commit -m "chore: release v{VERSION}"
|
||||
git tag v{VERSION}
|
||||
```
|
||||
|
||||
**Note**: Do NOT add Co-Authored-By line. This is a release commit, not a code contribution.
|
||||
|
||||
**Important**: Do NOT push to remote. User will push manually when ready.
|
||||
|
||||
**Post-Release Output**:
|
||||
```
|
||||
Release v1.3.0 created locally.
|
||||
|
||||
To publish:
|
||||
git push origin main
|
||||
git push origin v1.3.0
|
||||
```
|
||||
|
||||
## Configuration (.releaserc.yml)
|
||||
|
||||
Optional config file in project root to override defaults:
|
||||
|
||||
```yaml
|
||||
# .releaserc.yml - Optional configuration
|
||||
|
||||
# Version file (auto-detected if not specified)
|
||||
version:
|
||||
file: package.json
|
||||
path: $.version # JSONPath for JSON, dotted path for TOML
|
||||
|
||||
# Changelog files (auto-detected if not specified)
|
||||
changelog:
|
||||
files:
|
||||
- path: CHANGELOG.md
|
||||
lang: en
|
||||
- path: CHANGELOG.zh.md
|
||||
lang: zh
|
||||
- path: CHANGELOG.ja.md
|
||||
lang: ja
|
||||
|
||||
# Section mapping (conventional commit type → changelog section)
|
||||
# Use null to skip a type in changelog
|
||||
sections:
|
||||
feat: Features
|
||||
fix: Fixes
|
||||
docs: Documentation
|
||||
refactor: Refactor
|
||||
perf: Performance
|
||||
test: Tests
|
||||
chore: null
|
||||
|
||||
# Commit message format
|
||||
commit:
|
||||
message: "chore: release v{version}"
|
||||
|
||||
# Tag format
|
||||
tag:
|
||||
prefix: v # Results in v1.0.0
|
||||
sign: false
|
||||
|
||||
# Additional files to include in release commit
|
||||
include:
|
||||
- README.md
|
||||
- package.json
|
||||
```
|
||||
|
||||
## Dry-Run Mode
|
||||
|
||||
When `--dry-run` is specified:
|
||||
1. Show all changes since last tag
|
||||
2. Show proposed version bump (current → new)
|
||||
3. Show draft changelog entries (EN and CN)
|
||||
4. Show files that would be modified
|
||||
5. Do NOT make any actual changes
|
||||
|
||||
Output format:
|
||||
```
|
||||
=== DRY RUN MODE ===
|
||||
|
||||
Last tag: v0.6.1
|
||||
Proposed version: v0.7.0
|
||||
Project detected:
|
||||
Version file: package.json (1.2.3)
|
||||
Changelogs: CHANGELOG.md (en), CHANGELOG.zh.md (zh)
|
||||
|
||||
Last tag: v1.2.3
|
||||
Proposed version: v1.3.0
|
||||
|
||||
Changes detected:
|
||||
- feat: new skill baoyu-foo added
|
||||
- fix: baoyu-bar timeout issue
|
||||
- docs: updated README
|
||||
feat: add user authentication
|
||||
feat: support oauth2 login
|
||||
fix: memory leak in pool
|
||||
|
||||
Changelog preview (EN):
|
||||
## 0.7.0 - 2026-01-17
|
||||
### Features
|
||||
- `baoyu-foo`: new skill for ...
|
||||
### Fixes
|
||||
- `baoyu-bar`: fixed timeout issue
|
||||
Changelog preview (en):
|
||||
## 1.3.0 - 2026-01-22
|
||||
### Features
|
||||
- Add user authentication module
|
||||
- Support OAuth2 login
|
||||
### Fixes
|
||||
- Fix memory leak in connection pool
|
||||
|
||||
README updates needed: Yes/No
|
||||
(If yes, show proposed changes)
|
||||
Changelog preview (zh):
|
||||
## 1.3.0 - 2026-01-22
|
||||
### 新功能
|
||||
- 新增用户认证模块
|
||||
- 支持 OAuth2 登录
|
||||
### 修复
|
||||
- 修复连接池内存泄漏问题
|
||||
|
||||
Files to modify:
|
||||
- README.md (if updates needed)
|
||||
- README.zh.md (if updates needed)
|
||||
- CHANGELOG.md
|
||||
- CHANGELOG.zh.md
|
||||
- .claude-plugin/marketplace.json
|
||||
- package.json
|
||||
- CHANGELOG.md
|
||||
- CHANGELOG.zh.md
|
||||
|
||||
No changes made. Run without --dry-run to execute.
|
||||
```
|
||||
@@ -202,16 +320,16 @@ No changes made. Run without --dry-run to execute.
|
||||
/release-skills # Auto-detect version bump
|
||||
/release-skills --dry-run # Preview only
|
||||
/release-skills --minor # Force minor bump
|
||||
/release-skills --patch # Force patch bump
|
||||
/release-skills --major # Force major bump (with confirmation)
|
||||
```
|
||||
|
||||
## Post-Release Reminder
|
||||
## When to Use
|
||||
|
||||
After successful release, remind user:
|
||||
```
|
||||
Release v{NEW_VERSION} created locally.
|
||||
Trigger this skill when user requests:
|
||||
- "release", "发布", "create release", "new version", "新版本"
|
||||
- "bump version", "update version", "更新版本"
|
||||
- "prepare release"
|
||||
- "push to remote" (with uncommitted changes)
|
||||
|
||||
To publish:
|
||||
git push origin main
|
||||
git push origin v{NEW_VERSION}
|
||||
```
|
||||
**Important**: If user says "just push" or "直接 push" with uncommitted changes, STILL follow all steps above first.
|
||||
|
||||
@@ -2,6 +2,16 @@
|
||||
|
||||
English | [中文](./CHANGELOG.zh.md)
|
||||
|
||||
## 1.15.2 - 2026-01-23
|
||||
|
||||
### Documentation
|
||||
- `release-skills`: comprehensive SKILL.md rewrite—adds multi-language changelog support, .releaserc.yml configuration, dry-run mode, language detection rules, and section title translations for 7 languages.
|
||||
|
||||
## 1.15.1 - 2026-01-22
|
||||
|
||||
### Refactor
|
||||
- `baoyu-xhs-images`: restructures reference documents into modular architecture—reorganizes scattered files into `config/` (settings), `elements/` (visual building blocks), `presets/` (style definitions), and `workflows/` (process guides) directories for improved maintainability.
|
||||
|
||||
## 1.15.0 - 2026-01-22
|
||||
|
||||
### Features
|
||||
|
||||
@@ -2,6 +2,16 @@
|
||||
|
||||
[English](./CHANGELOG.md) | 中文
|
||||
|
||||
## 1.15.2 - 2026-01-23
|
||||
|
||||
### 文档
|
||||
- `release-skills`:SKILL.md 全面重写——新增多语言 changelog 支持、.releaserc.yml 配置文件、dry-run 模式、语言检测规则、7 种语言的章节标题翻译。
|
||||
|
||||
## 1.15.1 - 2026-01-22
|
||||
|
||||
### 重构
|
||||
- `baoyu-xhs-images`:参考文档模块化重构——将分散的文件整理为 `config/`(配置设置)、`elements/`(视觉构建块)、`presets/`(风格预设)、`workflows/`(流程指南)四个目录,提升可维护性。
|
||||
|
||||
## 1.15.0 - 2026-01-22
|
||||
|
||||
### 新功能
|
||||
|
||||
+180
-115
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: baoyu-xhs-images
|
||||
description: Xiaohongshu (Little Red Book) infographic series generator with multiple style options. Breaks down content into 1-10 cartoon-style infographics. Use when user asks to create "小红书图片", "XHS images", or "RedNote infographics".
|
||||
description: Generates Xiaohongshu (Little Red Book) infographic series with 9 visual styles and 6 layouts. Breaks content into 1-10 cartoon-style images optimized for XHS engagement. Use when user mentions "小红书图片", "XHS images", "RedNote infographics", "小红书种草", or wants social media infographics for Chinese platforms.
|
||||
---
|
||||
|
||||
# Xiaohongshu Infographic Series Generator
|
||||
@@ -61,7 +61,7 @@ Style × Layout can be freely combined. Example: `--style notion --layout dense`
|
||||
| `notion` | Minimalist hand-drawn line art, intellectual |
|
||||
| `chalkboard` | Colorful chalk on black board, educational |
|
||||
|
||||
Detailed style definitions: `references/styles/<style>.md`
|
||||
Detailed style definitions: `references/presets/<style>.md`
|
||||
|
||||
## Layout Gallery
|
||||
|
||||
@@ -74,7 +74,7 @@ Detailed style definitions: `references/styles/<style>.md`
|
||||
| `comparison` | Side-by-side contrast layout |
|
||||
| `flow` | Process and timeline layout (3-6 steps) |
|
||||
|
||||
Detailed layout definitions: `references/layouts/<layout>.md`
|
||||
Detailed layout definitions: `references/elements/canvas.md`
|
||||
|
||||
## Auto Selection
|
||||
|
||||
@@ -90,6 +90,37 @@ Detailed layout definitions: `references/layouts/<layout>.md`
|
||||
| Knowledge, concept, productivity, SaaS | `notion` | dense/list |
|
||||
| Education, tutorial, learning, teaching, classroom | `chalkboard` | balanced/dense |
|
||||
|
||||
## Outline Strategies
|
||||
|
||||
Three differentiated outline strategies for different content goals:
|
||||
|
||||
### Strategy A: Story-Driven (故事驱动型)
|
||||
|
||||
| Aspect | Description |
|
||||
|--------|-------------|
|
||||
| **Concept** | Personal experience as main thread, emotional resonance first |
|
||||
| **Features** | Start from pain point, show before/after change, strong authenticity |
|
||||
| **Best for** | Reviews, personal shares, transformation stories |
|
||||
| **Structure** | Hook → Problem → Discovery → Experience → Conclusion |
|
||||
|
||||
### Strategy B: Information-Dense (信息密集型)
|
||||
|
||||
| Aspect | Description |
|
||||
|--------|-------------|
|
||||
| **Concept** | Value-first, efficient information delivery |
|
||||
| **Features** | Clear structure, explicit points, professional credibility |
|
||||
| **Best for** | Tutorials, comparisons, product reviews, checklists |
|
||||
| **Structure** | Core conclusion → Info card → Pros/Cons → Recommendation |
|
||||
|
||||
### Strategy C: Visual-First (视觉优先型)
|
||||
|
||||
| Aspect | Description |
|
||||
|--------|-------------|
|
||||
| **Concept** | Visual impact as core, minimal text |
|
||||
| **Features** | Large images, atmospheric, instant appeal |
|
||||
| **Best for** | High-aesthetic products, lifestyle, mood-based content |
|
||||
| **Structure** | Hero image → Detail shots → Lifestyle scene → CTA |
|
||||
|
||||
## File Structure
|
||||
|
||||
Each session creates an independent directory named by content slug:
|
||||
@@ -97,11 +128,11 @@ Each session creates an independent directory named by content slug:
|
||||
```
|
||||
xhs-images/{topic-slug}/
|
||||
├── source-{slug}.{ext} # Source files (text, images, etc.)
|
||||
├── analysis.md # Deep analysis results
|
||||
├── outline-style-[slug].md # Variant A (e.g., outline-style-notion.md)
|
||||
├── outline-style-[slug].md # Variant B (e.g., outline-style-notion.md)
|
||||
├── outline-style-[slug].md # Variant C (e.g., outline-style-minimal.md)
|
||||
├── outline.md # Final selected
|
||||
├── analysis.md # Deep analysis + questions asked
|
||||
├── outline-strategy-a.md # Strategy A: Story-driven
|
||||
├── outline-strategy-b.md # Strategy B: Information-dense
|
||||
├── outline-strategy-c.md # Strategy C: Visual-first
|
||||
├── outline.md # Final selected/merged outline
|
||||
├── prompts/
|
||||
│ ├── 01-cover-[slug].md
|
||||
│ ├── 02-content-[slug].md
|
||||
@@ -127,6 +158,27 @@ Copy all sources with naming `source-{slug}.{ext}`:
|
||||
|
||||
## Workflow
|
||||
|
||||
### Progress Checklist
|
||||
|
||||
Copy and track progress:
|
||||
|
||||
```
|
||||
XHS Infographic Progress:
|
||||
- [ ] Step 0: Check preferences (EXTEND.md)
|
||||
- [ ] Step 1: Analyze content → analysis.md
|
||||
- [ ] Step 2: Confirmation 1 - Content understanding ⚠️ REQUIRED
|
||||
- [ ] Step 3: Generate 3 outline + style variants
|
||||
- [ ] Step 4: Confirmation 2 - Outline & style selection ⚠️ REQUIRED
|
||||
- [ ] Step 5: Generate images (sequential)
|
||||
- [ ] Step 6: Completion report
|
||||
```
|
||||
|
||||
### Flow
|
||||
|
||||
```
|
||||
Input → Analyze → [Confirm 1] → 3 Outlines → [Confirm 2: Outline + Style] → Generate → Complete
|
||||
```
|
||||
|
||||
### Step 0: Check Preferences
|
||||
|
||||
**Check paths** (priority order):
|
||||
@@ -146,11 +198,11 @@ Copy all sources with naming `source-{slug}.{ext}`:
|
||||
3. Continue to Step 1
|
||||
|
||||
**If NO preferences found**:
|
||||
1. Ask user with AskUserQuestion (see `references/first-time-setup.md`)
|
||||
1. Ask user with AskUserQuestion (see `references/config/first-time-setup.md`)
|
||||
2. Create EXTEND.md with user choices
|
||||
3. Continue to Step 1
|
||||
|
||||
Schema reference: `references/preferences-schema.md`
|
||||
Schema reference: `references/config/preferences-schema.md`
|
||||
|
||||
### Step 1: Analyze Content → `analysis.md`
|
||||
|
||||
@@ -161,7 +213,7 @@ Read source content, save it if needed, and perform deep analysis.
|
||||
- If user provides a file path: use as-is
|
||||
- If user pastes content: save to `source.md` in target directory
|
||||
2. Read source content
|
||||
3. **Deep analysis** following `references/analysis-framework.md`:
|
||||
3. **Deep analysis** following `references/workflows/analysis-framework.md`:
|
||||
- Content type classification (种草/干货/测评/教程/避坑...)
|
||||
- Hook analysis (爆款标题潜力)
|
||||
- Target audience identification
|
||||
@@ -170,75 +222,101 @@ Read source content, save it if needed, and perform deep analysis.
|
||||
- Swipe flow design
|
||||
4. Detect source language
|
||||
5. Determine recommended image count (2-10)
|
||||
6. Select 3 style+layout combinations
|
||||
6. **Generate clarifying questions** (see Step 2)
|
||||
7. **Save to `analysis.md`**
|
||||
|
||||
### Step 2: Generate 3 Outline Variants
|
||||
### Step 2: Confirmation 1 - Content Understanding ⚠️
|
||||
|
||||
Based on analysis, create three distinct style variants.
|
||||
**Purpose**: Validate understanding + collect missing info. **Do NOT skip.**
|
||||
|
||||
**For each variant**:
|
||||
1. **Generate outline** (`outline-style-[slug].md`):
|
||||
- YAML front matter with style, layout, image_count
|
||||
- Cover design with hook
|
||||
- Each image: layout, core message, text content, visual concept
|
||||
- **Written in user's preferred language**
|
||||
- Reference: `references/outline-template.md`
|
||||
**Display summary**:
|
||||
- Content type + topic identified
|
||||
- Key points extracted
|
||||
- Tone detected
|
||||
- Source images count
|
||||
|
||||
| Variant | Selection Logic | Example Filename |
|
||||
|---------|-----------------|------------------|
|
||||
| A | Primary recommendation | `outline-style-notion.md` |
|
||||
| B | Alternative style | `outline-style-notion.md` |
|
||||
| C | Different audience/mood | `outline-style-minimal.md` |
|
||||
**Use AskUserQuestion** for:
|
||||
1. Core selling point (multiSelect: true)
|
||||
2. Target audience
|
||||
3. Style preference: Authentic sharing / Professional review / Aesthetic mood / Auto
|
||||
4. Additional context (optional)
|
||||
|
||||
**All variants are preserved after selection for reference.**
|
||||
**After response**: Update `analysis.md` → Step 3
|
||||
|
||||
### Step 3: User Confirms All Options
|
||||
### Step 3: Generate 3 Outline + Style Variants
|
||||
|
||||
**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.
|
||||
Based on analysis + user context, create three distinct strategy variants. Each variant includes both **outline structure** and **visual style recommendation**.
|
||||
|
||||
**Prioritize user preferences** (from Step 0):
|
||||
- If user has `preferred_style`: Show as first option with "(Your preference)"
|
||||
- If user has `preferred_layout`: Show as first option with "(Your preference)"
|
||||
**For each strategy**:
|
||||
|
||||
**Determine which questions to ask**:
|
||||
| Strategy | Filename | Outline | Recommended Style |
|
||||
|----------|----------|---------|-------------------|
|
||||
| A | `outline-strategy-a.md` | Story-driven: emotional, before/after | warm, cute, fresh |
|
||||
| B | `outline-strategy-b.md` | Information-dense: structured, factual | notion, minimal, chalkboard |
|
||||
| C | `outline-strategy-c.md` | Visual-first: atmospheric, minimal text | bold, pop, retro |
|
||||
|
||||
| Question | When to Ask |
|
||||
|----------|-------------|
|
||||
| Style variant | Always (required) |
|
||||
| Default layout | Only if user might want to override |
|
||||
| Language | Only if `source_language ≠ user_language` |
|
||||
**Outline format** (YAML front matter + content):
|
||||
```yaml
|
||||
---
|
||||
strategy: a # a, b, or c
|
||||
name: Story-Driven
|
||||
style: warm # recommended style for this strategy
|
||||
style_reason: "Warm tones enhance emotional storytelling and personal connection"
|
||||
layout: balanced # primary layout
|
||||
image_count: 5
|
||||
---
|
||||
|
||||
**Language handling**:
|
||||
- If source language = user language: Just inform user (e.g., "Images will be in Chinese")
|
||||
- If different: Ask which language to use
|
||||
## P1 Cover
|
||||
**Type**: cover
|
||||
**Hook**: "入冬后脸不干了🥹终于找到对的面霜"
|
||||
**Visual**: Product hero shot with cozy winter atmosphere
|
||||
**Layout**: sparse
|
||||
|
||||
**AskUserQuestion format**:
|
||||
## P2 Problem
|
||||
**Type**: pain-point
|
||||
**Message**: Previous struggles with dry skin
|
||||
**Visual**: Before state, relatable scenario
|
||||
**Layout**: balanced
|
||||
|
||||
```
|
||||
Question 1 (Style): Which style variant?
|
||||
- User preference: notion + dense (Your preference) - 您的默认设置
|
||||
- A: notion + list - AI推荐: 清爽知识卡片
|
||||
- B: minimal + balanced - AI推荐: 简约高端风格
|
||||
- Custom: 自定义风格描述
|
||||
|
||||
Question 2 (Layout) - only if relevant:
|
||||
- Your preference: dense (Your preference)
|
||||
- Keep variant default (Recommended)
|
||||
- sparse / balanced / list / comparison / flow
|
||||
|
||||
Question 3 (Language) - only if mismatch:
|
||||
- 中文 (匹配原文)
|
||||
- English (your preference)
|
||||
...
|
||||
```
|
||||
|
||||
**After confirmation**:
|
||||
1. Copy selected `outline-style-[slug].md` → `outline.md`
|
||||
2. Update YAML front matter with confirmed options
|
||||
3. If custom style: regenerate outline with that style
|
||||
4. User may edit `outline.md` directly for fine-tuning
|
||||
**Differentiation requirements**:
|
||||
- Each strategy MUST have different outline structure AND different recommended style
|
||||
- Adapt page count: A typically 4-6, B typically 3-5, C typically 3-4
|
||||
- Include `style_reason` explaining why this style fits the strategy
|
||||
- Consider user's style preference from Step 2
|
||||
|
||||
### Step 4: Generate Images
|
||||
Reference: `references/workflows/outline-template.md`
|
||||
|
||||
### Step 4: Confirmation 2 - Outline & Style Selection ⚠️
|
||||
|
||||
**Purpose**: User chooses outline strategy AND confirms visual style. **Do NOT skip.**
|
||||
|
||||
**Display each strategy**:
|
||||
- Strategy name + page count + recommended style
|
||||
- Page-by-page summary (P1 → P2 → P3...)
|
||||
|
||||
**Use AskUserQuestion** with two questions:
|
||||
|
||||
**Question 1: Outline Strategy**
|
||||
- Strategy A (Recommended if "authentic sharing")
|
||||
- Strategy B (Recommended if "professional review")
|
||||
- Strategy C (Recommended if "aesthetic mood")
|
||||
- Combine: specify pages from each
|
||||
|
||||
**Question 2: Visual Style**
|
||||
- Use strategy's recommended style (show which style)
|
||||
- Or select from: cute / fresh / warm / bold / minimal / retro / pop / notion / chalkboard
|
||||
- Or type custom style description
|
||||
|
||||
**After response**:
|
||||
- Single strategy → copy to `outline.md` with confirmed style
|
||||
- Combination → merge specified pages with confirmed style
|
||||
- Custom request → regenerate based on feedback
|
||||
- Update `outline.md` frontmatter with final style choice
|
||||
|
||||
### Step 5: Generate Images
|
||||
|
||||
With confirmed outline + style + layout:
|
||||
|
||||
@@ -254,7 +332,7 @@ Include a subtle watermark "[content]" positioned at [position]
|
||||
with approximately [opacity*100]% visibility. The watermark should
|
||||
be legible but not distracting from the main content.
|
||||
```
|
||||
Reference: `references/watermark-guide.md`
|
||||
Reference: `references/config/watermark-guide.md`
|
||||
|
||||
**Image Generation Skill Selection**:
|
||||
- Check available image generation skills
|
||||
@@ -266,22 +344,23 @@ If image generation skill supports `--sessionId`:
|
||||
2. Use same session ID for all images
|
||||
3. Ensures visual consistency across generated images
|
||||
|
||||
### Step 5: Completion Report
|
||||
### Step 6: Completion Report
|
||||
|
||||
```
|
||||
Xiaohongshu Infographic Series Complete!
|
||||
|
||||
Topic: [topic]
|
||||
Strategy: [A/B/C/Combined]
|
||||
Style: [style name]
|
||||
Layout: [layout name or "varies"]
|
||||
Location: [directory path]
|
||||
Images: N total
|
||||
|
||||
✓ analysis.md
|
||||
✓ outline-style-notion.md
|
||||
✓ outline-style-chalkboard.md
|
||||
✓ outline-style-minimal.md
|
||||
✓ outline.md (selected: notion + dense)
|
||||
✓ outline-strategy-a.md
|
||||
✓ outline-strategy-b.md
|
||||
✓ outline-strategy-c.md
|
||||
✓ outline.md (selected: [strategy])
|
||||
|
||||
Files:
|
||||
- 01-cover-[slug].png ✓ Cover (sparse)
|
||||
@@ -292,25 +371,11 @@ Files:
|
||||
|
||||
## Image Modification
|
||||
|
||||
### Edit Single Image
|
||||
|
||||
1. Identify image to edit (e.g., `03-content-chatgpt.png`)
|
||||
2. Update prompt in `prompts/03-content-chatgpt.md` if needed
|
||||
3. Regenerate image using same session ID
|
||||
|
||||
### Add New Image
|
||||
|
||||
1. Specify insertion position (e.g., after image 3)
|
||||
2. Create new prompt with appropriate slug
|
||||
3. Generate new image
|
||||
4. **Renumber files**: All subsequent images increment NN by 1
|
||||
5. Update `outline.md` with new image entry
|
||||
|
||||
### Delete Image
|
||||
|
||||
1. Remove image file and prompt file
|
||||
2. **Renumber files**: All subsequent images decrement NN by 1
|
||||
3. Update `outline.md` to remove image entry
|
||||
| Action | Steps |
|
||||
|--------|-------|
|
||||
| **Edit** | Update prompt → Regenerate with same session ID |
|
||||
| **Add** | Specify position → Create prompt → Generate → Renumber subsequent files (NN+1) → Update outline |
|
||||
| **Delete** | Remove files → Renumber subsequent (NN-1) → Update outline |
|
||||
|
||||
## Content Breakdown Principles
|
||||
|
||||
@@ -334,39 +399,39 @@ Files:
|
||||
|
||||
## References
|
||||
|
||||
Detailed templates and guidelines in `references/` directory:
|
||||
- `analysis-framework.md` - XHS-specific content analysis
|
||||
- `outline-template.md` - Outline format and examples
|
||||
- `styles/<style>.md` - Detailed style definitions
|
||||
- `layouts/<layout>.md` - Detailed layout definitions
|
||||
- `base-prompt.md` - Base prompt template
|
||||
- `preferences-schema.md` - EXTEND.md YAML schema
|
||||
- `watermark-guide.md` - Watermark configuration guide
|
||||
- `first-time-setup.md` - First-time setup flow
|
||||
Detailed templates in `references/` directory:
|
||||
|
||||
**Elements** (Visual building blocks):
|
||||
- `elements/canvas.md` - Aspect ratios, safe zones, grid layouts
|
||||
- `elements/image-effects.md` - Cutout, stroke, filters
|
||||
- `elements/typography.md` - Decorated text (花字), tags, text direction
|
||||
- `elements/decorations.md` - Emphasis marks, backgrounds, doodles, frames
|
||||
|
||||
**Presets** (Style presets):
|
||||
- `presets/<name>.md` - Element combination definitions (cute, notion, warm...)
|
||||
|
||||
**Workflows** (Process guides):
|
||||
- `workflows/analysis-framework.md` - Content analysis framework
|
||||
- `workflows/outline-template.md` - Outline template with layout guide
|
||||
- `workflows/prompt-assembly.md` - Prompt assembly guide
|
||||
|
||||
**Config** (Settings):
|
||||
- `config/preferences-schema.md` - EXTEND.md schema
|
||||
- `config/first-time-setup.md` - First-time setup flow
|
||||
- `config/watermark-guide.md` - Watermark configuration
|
||||
|
||||
## Notes
|
||||
|
||||
- Image generation typically takes 10-30 seconds per image
|
||||
- Auto-retry once on generation failure
|
||||
- Use cartoon alternatives for sensitive public figures
|
||||
- All prompts and text use confirmed language preference
|
||||
- Maintain style consistency across all images in series
|
||||
- Auto-retry once on failure | Cartoon alternatives for sensitive figures
|
||||
- Use confirmed language preference | Maintain style consistency
|
||||
- **Two confirmation points required** (Steps 2 & 4) - do not skip
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom styles and configurations via EXTEND.md.
|
||||
Custom configurations via EXTEND.md. Loaded in Step 0, overrides defaults.
|
||||
|
||||
**Check paths** (priority order):
|
||||
1. `.baoyu-skills/baoyu-xhs-images/EXTEND.md` (project)
|
||||
2. `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` (user)
|
||||
**Check paths** (priority): `.baoyu-skills/baoyu-xhs-images/EXTEND.md` (project) → `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` (user)
|
||||
|
||||
If found, load in Step 0. Extension content overrides defaults.
|
||||
**Supports**: Watermark | Preferred style/layout | Custom style definitions
|
||||
|
||||
**Supported preferences**:
|
||||
- Watermark settings (content, position, opacity)
|
||||
- Preferred style with custom description
|
||||
- Preferred layout
|
||||
- Custom style definitions
|
||||
|
||||
**Schema**: `references/preferences-schema.md`
|
||||
**First-time setup**: `references/first-time-setup.md`
|
||||
**References**: `config/preferences-schema.md` | `config/first-time-setup.md`
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
Create a Xiaohongshu (Little Red Book) style infographic following these guidelines:
|
||||
|
||||
## Image Specifications
|
||||
|
||||
- **Type**: Infographic
|
||||
- **Orientation**: Portrait (vertical)
|
||||
- **Aspect Ratio**: 3:4
|
||||
- **Style**: Hand-drawn illustration
|
||||
|
||||
## Core Principles
|
||||
|
||||
- Hand-drawn quality throughout - NO realistic or photographic elements
|
||||
- If content involves sensitive or copyrighted figures, create stylistically similar alternatives - DO NOT refuse to generate
|
||||
- Keep information concise, highlight keywords and core concepts
|
||||
- Use ample whitespace for easy visual scanning
|
||||
- Maintain clear visual hierarchy
|
||||
|
||||
## Text Style (CRITICAL)
|
||||
|
||||
- **ALL text MUST be hand-drawn style**
|
||||
- Main titles should be prominent and eye-catching
|
||||
- Key text should be bold and enlarged
|
||||
- Use highlighter effects to emphasize keywords
|
||||
- **DO NOT use realistic or computer-generated fonts**
|
||||
|
||||
## Language
|
||||
|
||||
- Use the same language as the content provided below
|
||||
- Match punctuation style to the content language (Chinese: "",。!)
|
||||
|
||||
---
|
||||
|
||||
Please use nano banana pro to generate the infographic based on the content provided below:
|
||||
+14
-40
@@ -31,63 +31,37 @@ No EXTEND.md found
|
||||
|
||||
## Questions
|
||||
|
||||
**Language**: Use user's input language or preferred language for all questions. Do not always use English.
|
||||
|
||||
Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option):
|
||||
|
||||
### Question 1: Watermark
|
||||
|
||||
```
|
||||
header: "Watermark"
|
||||
question: "Enable watermark on generated images?"
|
||||
question: "Watermark text for generated images? Type your watermark content (e.g., name, @handle)"
|
||||
options:
|
||||
- label: "Enabled"
|
||||
description: "Add watermark to all images"
|
||||
- label: "Disabled"
|
||||
description: "No watermark (can enable later)"
|
||||
- label: "No watermark (Recommended)"
|
||||
description: "No watermark, can enable later in EXTEND.md"
|
||||
```
|
||||
|
||||
### Question 2: Watermark Content (if enabled)
|
||||
Position defaults to bottom-right.
|
||||
|
||||
```
|
||||
header: "Content"
|
||||
question: "What text for your watermark?"
|
||||
options:
|
||||
- label: "@username"
|
||||
description: "Your XHS handle (replace 'username')"
|
||||
- label: "Custom text"
|
||||
description: "Enter your own text"
|
||||
```
|
||||
|
||||
### Question 3: Watermark Position (if enabled)
|
||||
|
||||
```
|
||||
header: "Position"
|
||||
question: "Where to place watermark?"
|
||||
options:
|
||||
- label: "bottom-right"
|
||||
description: "Lower right corner (most common)"
|
||||
- label: "bottom-left"
|
||||
description: "Lower left corner"
|
||||
- label: "bottom-center"
|
||||
description: "Bottom center"
|
||||
- label: "top-right"
|
||||
description: "Upper right corner"
|
||||
```
|
||||
|
||||
### Question 4: Preferred Style
|
||||
### Question 2: Preferred Style
|
||||
|
||||
```
|
||||
header: "Style"
|
||||
question: "Default visual style preference?"
|
||||
question: "Default visual style preference? Or type another style name or your custom style"
|
||||
options:
|
||||
- label: "None (Recommended)"
|
||||
description: "Auto-select based on content analysis"
|
||||
- label: "cute"
|
||||
description: "Sweet, adorable - classic XHS aesthetic"
|
||||
- label: "notion"
|
||||
description: "Minimalist hand-drawn, intellectual"
|
||||
- label: "None"
|
||||
description: "Auto-select based on content"
|
||||
```
|
||||
|
||||
### Question 5: Save Location
|
||||
### Question 3: Save Location
|
||||
|
||||
```
|
||||
header: "Save"
|
||||
@@ -120,8 +94,8 @@ options:
|
||||
version: 1
|
||||
watermark:
|
||||
enabled: [true/false]
|
||||
content: "[user input]"
|
||||
position: [selected position]
|
||||
content: "[user input or empty]"
|
||||
position: bottom-right
|
||||
opacity: 0.7
|
||||
preferred_style:
|
||||
name: [selected style or null]
|
||||
@@ -137,4 +111,4 @@ custom_styles: []
|
||||
Users can edit EXTEND.md directly or run setup again:
|
||||
- Delete EXTEND.md to trigger setup
|
||||
- Edit YAML frontmatter for quick changes
|
||||
- Full schema: `references/preferences-schema.md`
|
||||
- Full schema: `config/preferences-schema.md`
|
||||
@@ -0,0 +1,108 @@
|
||||
# Canvas & Layout
|
||||
|
||||
Core canvas specifications and layout grids for Xiaohongshu infographics.
|
||||
|
||||
## Aspect Ratios
|
||||
|
||||
| Name | Ratio | Pixels | Note |
|
||||
|------|-------|--------|------|
|
||||
| portrait-3-4 | 3:4 | 1242×1660 | Highest traffic on XHS (recommended) |
|
||||
| square | 1:1 | 1242×1242 | Second recommended |
|
||||
| portrait-2-3 | 2:3 | 1242×1863 | Taller format |
|
||||
|
||||
**Default**: portrait-3-4 for maximum engagement.
|
||||
|
||||
## Safe Zones
|
||||
|
||||
Avoid placing critical content in these areas:
|
||||
|
||||
| Zone | Position | Reason |
|
||||
|------|----------|--------|
|
||||
| bottom-overlay | Bottom 10% | Title bar overlay on mobile |
|
||||
| top-right | Top-right corner | Like/share button overlay |
|
||||
| bottom-right | Bottom-right corner | Watermark position |
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ [like/share]│ ← top-right: avoid
|
||||
│ │
|
||||
│ │
|
||||
│ ✓ SAFE CONTENT AREA │
|
||||
│ │
|
||||
│ │
|
||||
│ [title bar overlay area] │ ← bottom 10%: avoid key info
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
## Grid Layouts
|
||||
|
||||
### Density-Based Layouts
|
||||
|
||||
| Layout | Info Density | Whitespace | Points/Image | Best For |
|
||||
|--------|--------------|------------|--------------|----------|
|
||||
| sparse | Low | 60-70% | 1-2 | Covers, quotes, impactful statements |
|
||||
| balanced | Medium | 40-50% | 3-4 | Standard content, tutorials |
|
||||
| dense | High | 20-30% | 5-8 | Knowledge cards, cheat sheets |
|
||||
|
||||
### Structure-Based Layouts
|
||||
|
||||
| Layout | Structure | Items | Best For |
|
||||
|--------|-----------|-------|----------|
|
||||
| list | Vertical enumeration | 4-7 | Rankings, checklists, step guides |
|
||||
| comparison | Left vs Right | 2 sections | Before/after, pros/cons |
|
||||
| flow | Connected nodes | 3-6 steps | Processes, timelines, workflows |
|
||||
|
||||
## Layout by Position
|
||||
|
||||
| Position | Recommended Layout | Why |
|
||||
|----------|-------------------|-----|
|
||||
| Cover | sparse | Maximum visual impact, clear title |
|
||||
| Setup | balanced | Context without overwhelming |
|
||||
| Core | balanced/dense/list | Based on content density |
|
||||
| Payoff | balanced/list | Clear takeaways |
|
||||
| Ending | sparse | Clean CTA, memorable close |
|
||||
|
||||
## Grid Cells
|
||||
|
||||
For multi-element compositions:
|
||||
|
||||
| Name | Cells | Use Case |
|
||||
|------|-------|----------|
|
||||
| single | 1 | Hero image, maximum impact |
|
||||
| dual | 2 | Before/after, comparison |
|
||||
| triptych | 3 | Steps, process flow |
|
||||
| quad | 4 | Product showcase |
|
||||
| six-grid | 6 | Checklist, collection |
|
||||
| nine-grid | 9 | Multi-image gallery |
|
||||
|
||||
## Visual Balance
|
||||
|
||||
### Sparse Layout
|
||||
- Single focal point centered
|
||||
- Breathing room on all sides
|
||||
- Symmetrical composition
|
||||
|
||||
### Balanced Layout
|
||||
- Top-weighted title
|
||||
- Evenly distributed content below
|
||||
- Clear visual hierarchy
|
||||
|
||||
### Dense Layout
|
||||
- Organized grid structure
|
||||
- Clear section boundaries
|
||||
- Compact but readable spacing
|
||||
|
||||
### List Layout
|
||||
- Left-aligned items
|
||||
- Clear number/bullet hierarchy
|
||||
- Consistent item format
|
||||
|
||||
### Comparison Layout
|
||||
- Symmetrical left/right
|
||||
- Clear visual contrast
|
||||
- Divider between sections
|
||||
|
||||
### Flow Layout
|
||||
- Directional flow (top→bottom or left→right)
|
||||
- Connected nodes with arrows
|
||||
- Clear progression indicators
|
||||
@@ -0,0 +1,145 @@
|
||||
# Decorative Assets
|
||||
|
||||
Visual embellishments and decorative elements for Xiaohongshu infographics.
|
||||
|
||||
## Emphasis Marks (强调标记)
|
||||
|
||||
Elements to draw attention to specific content.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| red-arrow | Red arrow pointing to target | Product features, key points |
|
||||
| circle-mark | Circle highlight annotation | Highlighting details |
|
||||
| underline | Straight or wavy underline | Text emphasis |
|
||||
| star-burst | Starburst explosion effect | Special offers, wow factor |
|
||||
| checkmark | Checkmark/tick symbol | Completed items, pros |
|
||||
| cross-mark | X mark symbol | Cons, things to avoid |
|
||||
| exclamation | Exclamation point decoration | Important warnings |
|
||||
| question | Question mark decoration | FAQ, curiosity |
|
||||
| numbering | Circled numbers | Steps, rankings |
|
||||
| bracket | Bracket highlighting | Grouping, emphasis |
|
||||
|
||||
## Backgrounds (背景)
|
||||
|
||||
Base layer treatments.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| solid-saturated | High-saturation solid color | Bold, energetic |
|
||||
| solid-pastel | Soft pastel solid color | Cute, gentle |
|
||||
| gradient-linear | Linear color gradient | Modern, dynamic |
|
||||
| gradient-radial | Radial color gradient | Spotlight effect |
|
||||
| frosted-glass | Frosted glass blur effect | Layered compositions |
|
||||
| paper-texture | Paper or craft texture | Handmade aesthetic |
|
||||
| fabric-texture | Fabric/cloth texture | Cozy, tactile |
|
||||
| chalkboard | Blackboard texture | Educational content |
|
||||
| grid | Subtle grid pattern | Structured, organized |
|
||||
| dots | Polka dot pattern | Playful, retro |
|
||||
|
||||
## Doodles & Emoji (涂鸦)
|
||||
|
||||
Hand-drawn decorative elements.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| hand-drawn-lines | Sketchy hand-drawn lines | Connections, borders |
|
||||
| stars-sparkles | Stars and sparkle effects | Magic, excellence |
|
||||
| flowers | Floral decorations | Beauty, feminine |
|
||||
| hearts | Heart symbols | Love, favorites |
|
||||
| clouds | Cloud shapes | Dreamy, thoughts |
|
||||
| arrows-curvy | Curved directional arrows | Flow, direction |
|
||||
| squiggles | Wavy squiggle lines | Energy, movement |
|
||||
| confetti | Scattered confetti | Celebration |
|
||||
| leaves | Leaf decorations | Nature, fresh |
|
||||
| bubbles | Circular bubble shapes | Playful, light |
|
||||
|
||||
## Emoji Integration
|
||||
|
||||
| Category | Examples | Use Case |
|
||||
|----------|----------|----------|
|
||||
| Reactions | 🥹 😍 🤯 | Emotional emphasis |
|
||||
| Objects | ✨ 💡 🎯 | Visual markers |
|
||||
| Actions | 👇 👆 ➡️ | Directional cues |
|
||||
| Nature | 🌸 🌿 ☀️ | Thematic decoration |
|
||||
|
||||
## Frames (边框)
|
||||
|
||||
Container and border treatments.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| polaroid | Instant photo frame | Photo showcase |
|
||||
| film-strip | Film negative border | Cinematic, retro |
|
||||
| phone-screenshot | Mobile device mockup | App/screen content |
|
||||
| torn-paper | Torn paper edge effect | Scrapbook aesthetic |
|
||||
| rounded-rect | Rounded rectangle border | Clean containers |
|
||||
| decorative | Ornate decorative border | Premium, elegant |
|
||||
| tape-corners | Washi tape corners | Crafty, casual |
|
||||
| stamp-border | Stamp perforated edge | Vintage, postal |
|
||||
|
||||
## Dividers (分隔线)
|
||||
|
||||
Section separators.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| line-simple | Simple horizontal line | Clean separation |
|
||||
| line-dashed | Dashed line | Subtle division |
|
||||
| line-wavy | Wavy line | Playful separation |
|
||||
| dots-row | Row of dots | Decorative division |
|
||||
| ornamental | Decorative flourish | Elegant separation |
|
||||
|
||||
## Stickers (贴纸)
|
||||
|
||||
Pre-composed decorative elements.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| badge-new | "NEW" badge | New products |
|
||||
| badge-hot | "HOT" badge | Trending items |
|
||||
| badge-sale | Sale/discount badge | Promotions |
|
||||
| seal-quality | Quality seal | Recommendations |
|
||||
| ribbon-award | Award ribbon | Best picks |
|
||||
| tag-price | Price tag shape | Pricing info |
|
||||
|
||||
## Style-Specific Decorations
|
||||
|
||||
### Cute Style
|
||||
- Hearts, stars, sparkles
|
||||
- Ribbon decorations, sticker-style
|
||||
- Cute character elements
|
||||
|
||||
### Notion Style
|
||||
- Simple line doodles
|
||||
- Geometric shapes, stick figures
|
||||
- Maximum whitespace, minimal decoration
|
||||
|
||||
### Warm Style
|
||||
- Sun rays, coffee cups, cozy items
|
||||
- Warm lighting effects
|
||||
- Friendly, inviting decorations
|
||||
|
||||
### Fresh Style
|
||||
- Plant leaves, clouds, water drops
|
||||
- Simple geometric shapes
|
||||
- Open, breathing composition
|
||||
|
||||
### Bold Style
|
||||
- Exclamation marks, arrows
|
||||
- Warning icons, strong shapes
|
||||
- High contrast elements
|
||||
|
||||
### Pop Style
|
||||
- Bold shapes, speech bubbles
|
||||
- Comic-style effects, starburst
|
||||
- Dynamic, energetic decorations
|
||||
|
||||
### Retro Style
|
||||
- Halftone dots, vintage badges
|
||||
- Classic icons, tape effects
|
||||
- Aged texture overlays
|
||||
|
||||
### Chalkboard Style
|
||||
- Chalk dust effects
|
||||
- Hand-drawn doodles
|
||||
- Mathematical formulas, simple icons
|
||||
@@ -0,0 +1,92 @@
|
||||
# Image Processing Layer
|
||||
|
||||
Visual effects applied to image elements in Xiaohongshu infographics.
|
||||
|
||||
## AI Cutout (抠图)
|
||||
|
||||
Subject extraction styles for product/figure isolation.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| clean | Sharp edges, precise boundaries | Product photography, tech items |
|
||||
| soft | Soft transition, feathered edges | Portrait cutout, organic subjects |
|
||||
| stylized | Hand-drawn edge treatment | Artistic compositions |
|
||||
|
||||
## Stroke Effects (描边)
|
||||
|
||||
Border treatments for cutout elements.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| white-solid | White solid line border | Classic sticker feel, high contrast |
|
||||
| colored-solid | Colored solid line border | Playful vibe, brand colors |
|
||||
| dashed | Dashed/dotted border | Handmade aesthetic, casual |
|
||||
| double | Double-layer stroke | Emphasis effect, premium feel |
|
||||
| glow | Soft outer glow | Dreamy, soft aesthetic |
|
||||
| shadow | Drop shadow effect | Depth, floating element |
|
||||
|
||||
**Stroke Width Guidelines**:
|
||||
- Thin: 2-4px - Subtle, elegant
|
||||
- Medium: 5-8px - Standard visibility
|
||||
- Thick: 10-15px - Bold emphasis
|
||||
|
||||
## Filters (滤镜)
|
||||
|
||||
Color grading and mood presets popular on XHS.
|
||||
|
||||
| Name | Chinese | Description | Mood |
|
||||
|------|---------|-------------|------|
|
||||
| clear-glow | 清透感 | Transparent, radiant, luminous | Fresh, youthful |
|
||||
| film-grain | 胶片感 | Vintage film aesthetic, grain texture | Nostalgic, artistic |
|
||||
| cream-skin | 奶油肌 | Smooth, creamy complexion tones | Soft, flattering |
|
||||
| japanese-magazine | 日杂感 | Lifestyle magazine aesthetic | Curated, aspirational |
|
||||
| high-saturation | 高饱和 | Vibrant, punchy colors | Energetic, eye-catching |
|
||||
| muted-tones | 莫兰迪 | Morandi-style desaturated palette | Sophisticated, calm |
|
||||
| warm-tone | 暖色调 | Golden hour warmth | Cozy, inviting |
|
||||
| cool-tone | 冷色调 | Blue-shifted coolness | Modern, clean |
|
||||
|
||||
## Texture Overlays
|
||||
|
||||
Additional texture effects.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| paper | Paper or fabric texture | Handmade feel |
|
||||
| noise | Fine grain noise | Analog aesthetic |
|
||||
| halftone | Dot pattern | Retro print style |
|
||||
| scratch | Light scratch marks | Vintage wear |
|
||||
|
||||
## Blending Modes
|
||||
|
||||
For layered compositions.
|
||||
|
||||
| Mode | Effect | Use Case |
|
||||
|------|--------|----------|
|
||||
| multiply | Darken, merge | Shadow effects |
|
||||
| screen | Lighten, glow | Light effects |
|
||||
| overlay | Contrast boost | Vibrant compositions |
|
||||
| soft-light | Subtle blending | Natural layering |
|
||||
|
||||
## Effect Combinations
|
||||
|
||||
Common effect stacks for different styles:
|
||||
|
||||
### Cute Style
|
||||
- Filter: clear-glow or cream-skin
|
||||
- Stroke: white-solid (medium)
|
||||
- Texture: none
|
||||
|
||||
### Notion Style
|
||||
- Filter: none or muted-tones
|
||||
- Stroke: white-solid (thin) or none
|
||||
- Texture: paper (subtle)
|
||||
|
||||
### Retro Style
|
||||
- Filter: film-grain
|
||||
- Stroke: double or dashed
|
||||
- Texture: halftone, scratch
|
||||
|
||||
### Bold Style
|
||||
- Filter: high-saturation
|
||||
- Stroke: colored-solid (thick)
|
||||
- Texture: none
|
||||
@@ -0,0 +1,96 @@
|
||||
# Typography System
|
||||
|
||||
Text styling elements for Xiaohongshu infographics.
|
||||
|
||||
## Decorated Text (花字)
|
||||
|
||||
Stylized text treatments for emphasis and visual appeal.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| gradient | Gradient color fill | Title emphasis, modern feel |
|
||||
| stroke-text | Outlined text with stroke | Cover headlines, high visibility |
|
||||
| shadow-3d | 3D shadow/extrusion effect | Key terms, depth |
|
||||
| highlight | Highlighter marker effect | Critical information, key points |
|
||||
| neon | Neon glow effect | Tech content, night aesthetic |
|
||||
| handwritten | Authentic handwritten style | Personal touch, casual |
|
||||
| bubble | Rounded, inflated letterforms | Cute, playful content |
|
||||
| brush | Brush stroke texture | Artistic, dynamic |
|
||||
|
||||
## Tags & Labels (标签)
|
||||
|
||||
Structured text containers.
|
||||
|
||||
| Name | Description | Use Case |
|
||||
|------|-------------|----------|
|
||||
| black-white | Black background, white text | Brand names, prices, categories |
|
||||
| white-black | White background, black text | Clean labels, minimal style |
|
||||
| bubble | Speech bubble style | Dialogue, annotations, callouts |
|
||||
| pointer | Arrow pointer with label | Product callouts, pointing to features |
|
||||
| ribbon | Ribbon/banner shape | Special offers, highlights |
|
||||
| stamp | Stamp/seal style | Authenticity, recommendations |
|
||||
| pill | Rounded pill shape | Tags, categories, keywords |
|
||||
|
||||
## Text Hierarchy
|
||||
|
||||
Recommended text sizing for visual hierarchy.
|
||||
|
||||
| Level | Role | Relative Size | Style |
|
||||
|-------|------|---------------|-------|
|
||||
| H1 | Main title | 100% | Bold, decorated |
|
||||
| H2 | Section header | 70-80% | Semi-bold |
|
||||
| H3 | Subsection | 50-60% | Medium weight |
|
||||
| Body | Content text | 40-50% | Regular |
|
||||
| Caption | Small notes | 30-35% | Light |
|
||||
|
||||
## Text Direction
|
||||
|
||||
| Direction | Description | Use Case |
|
||||
|-----------|-------------|----------|
|
||||
| horizontal | Standard left-to-right | Default for most content |
|
||||
| vertical | Top-to-bottom columns | Magazine style, traditional Chinese |
|
||||
| curved | Text following a curve | Decorative, around shapes |
|
||||
| diagonal | Angled text | Dynamic compositions |
|
||||
|
||||
## Text Effects
|
||||
|
||||
| Effect | Description | Use Case |
|
||||
|--------|-------------|----------|
|
||||
| shadow | Drop shadow behind text | Readability on busy backgrounds |
|
||||
| outline | Outline around letterforms | High contrast visibility |
|
||||
| glow | Soft glow around text | Dreamy, emphasis |
|
||||
| underline-wavy | Wavy underline decoration | Playful emphasis |
|
||||
| strikethrough | Crossed out text | Before/after, corrections |
|
||||
|
||||
## Language Considerations
|
||||
|
||||
### Chinese Text (中文)
|
||||
- Punctuation: 「」()、。!?
|
||||
- Spacing: No spaces between characters
|
||||
- Line height: 1.5-1.8x for readability
|
||||
|
||||
### Mixed Text
|
||||
- English in Chinese context: Maintain consistent baseline
|
||||
- Numbers: Use consistent number style (lining vs old-style)
|
||||
|
||||
## Style-Specific Typography
|
||||
|
||||
### Cute Style
|
||||
- Rounded, bubbly hand lettering
|
||||
- Soft shadows, playful decorations
|
||||
- Pink/pastel color accents
|
||||
|
||||
### Notion Style
|
||||
- Clean hand-drawn lettering
|
||||
- Simple sans-serif labels
|
||||
- Minimal decoration
|
||||
|
||||
### Bold Style
|
||||
- Impactful hand lettering with shadows
|
||||
- High contrast colors
|
||||
- Strong outlines
|
||||
|
||||
### Chalkboard Style
|
||||
- Chalk texture on all text
|
||||
- Visible imperfections
|
||||
- Multi-color chalk variety
|
||||
@@ -1,30 +0,0 @@
|
||||
# balanced
|
||||
|
||||
Standard content layout
|
||||
|
||||
## Information Density
|
||||
|
||||
- 3-4 key points per image
|
||||
- Whitespace: 40-50% of canvas
|
||||
|
||||
## Structure
|
||||
|
||||
- Title at top
|
||||
- 3-4 bullet points or sections below
|
||||
|
||||
## Text Elements
|
||||
|
||||
- Title + 3-4 bullet points or key messages
|
||||
|
||||
## Visual Balance
|
||||
|
||||
- Top-weighted title
|
||||
- Evenly distributed content below
|
||||
|
||||
## Best For
|
||||
|
||||
Regular content pages, tutorials, explanations
|
||||
|
||||
## Best Style Pairings
|
||||
|
||||
All styles work well
|
||||
@@ -1,31 +0,0 @@
|
||||
# comparison
|
||||
|
||||
Side-by-side contrast layout
|
||||
|
||||
## Information Density
|
||||
|
||||
- 2 main sections with 2-4 points each
|
||||
- Whitespace: 30-40% of canvas
|
||||
|
||||
## Structure
|
||||
|
||||
- Left vs Right layout
|
||||
- Before/After, Pros/Cons format
|
||||
- Clear divider between sections
|
||||
|
||||
## Text Elements
|
||||
|
||||
- Title + left label + right label + mirrored points
|
||||
|
||||
## Visual Balance
|
||||
|
||||
- Symmetrical left/right
|
||||
- Clear visual contrast
|
||||
|
||||
## Best For
|
||||
|
||||
Comparisons, transformations, decision helpers, 对比图
|
||||
|
||||
## Best Style Pairings
|
||||
|
||||
bold (dramatic contrast), notion (data comparison), warm (before/after stories)
|
||||
@@ -1,31 +0,0 @@
|
||||
# dense
|
||||
|
||||
High information density, knowledge card style
|
||||
|
||||
## Information Density
|
||||
|
||||
- 5-8 key points per image
|
||||
- Whitespace: 20-30% of canvas
|
||||
|
||||
## Structure
|
||||
|
||||
- Multiple sections, structured grid
|
||||
- More text, compact but organized
|
||||
|
||||
## Text Elements
|
||||
|
||||
- Title + multiple sections with headers + numerous points
|
||||
|
||||
## Visual Balance
|
||||
|
||||
- Organized chaos
|
||||
- Clear section boundaries
|
||||
- Compact spacing
|
||||
|
||||
## Best For
|
||||
|
||||
Summary cards, cheat sheets, comprehensive guides, 干货总结
|
||||
|
||||
## Best Style Pairings
|
||||
|
||||
notion, minimal, chalkboard (clean styles prevent visual overload)
|
||||
@@ -1,30 +0,0 @@
|
||||
# flow
|
||||
|
||||
Process and timeline layout
|
||||
|
||||
## Information Density
|
||||
|
||||
- 3-6 steps/stages
|
||||
- Whitespace: 30-40% of canvas
|
||||
|
||||
## Structure
|
||||
|
||||
- Connected nodes with arrows
|
||||
- Sequential flow, directional
|
||||
|
||||
## Text Elements
|
||||
|
||||
- Title + step labels + optional descriptions per step
|
||||
|
||||
## Visual Balance
|
||||
|
||||
- Directional flow (top→bottom or left→right)
|
||||
- Clear progression
|
||||
|
||||
## Best For
|
||||
|
||||
Processes, timelines, cause-effect chains, workflows
|
||||
|
||||
## Best Style Pairings
|
||||
|
||||
notion (process diagrams), chalkboard (educational flows), fresh (organic flows)
|
||||
@@ -1,31 +0,0 @@
|
||||
# list
|
||||
|
||||
Enumeration and ranking format
|
||||
|
||||
## Information Density
|
||||
|
||||
- 4-7 items
|
||||
- Whitespace: 30-40% of canvas
|
||||
|
||||
## Structure
|
||||
|
||||
- Numbered or bulleted vertical list
|
||||
- Consistent item format
|
||||
|
||||
## Text Elements
|
||||
|
||||
- Title + numbered/bulleted items
|
||||
- Consistent format per item
|
||||
|
||||
## Visual Balance
|
||||
|
||||
- Left-aligned list
|
||||
- Clear number/bullet hierarchy
|
||||
|
||||
## Best For
|
||||
|
||||
Top N lists, checklists, step-by-step guides, rankings
|
||||
|
||||
## Best Style Pairings
|
||||
|
||||
All styles, especially cute (checklist), bold (rankings)
|
||||
@@ -1,31 +0,0 @@
|
||||
# sparse
|
||||
|
||||
Minimal information, maximum impact
|
||||
|
||||
## Information Density
|
||||
|
||||
- 1-2 key points per image
|
||||
- Whitespace: 60-70% of canvas
|
||||
|
||||
## Structure
|
||||
|
||||
- Single focal point centered
|
||||
- One core message
|
||||
- Single centered focal point
|
||||
|
||||
## Text Elements
|
||||
|
||||
- Title only, or title + one subtitle/tagline
|
||||
|
||||
## Visual Balance
|
||||
|
||||
- Centered, symmetrical
|
||||
- Breathing room on all sides
|
||||
|
||||
## Best For
|
||||
|
||||
Covers, quotes, impactful statements, emotional content
|
||||
|
||||
## Best Style Pairings
|
||||
|
||||
Any style, especially effective with bold, minimal, notion
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
name: bold
|
||||
category: impact
|
||||
---
|
||||
|
||||
# Bold Style
|
||||
|
||||
High impact, attention-grabbing aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual
|
||||
|
||||
image_effects:
|
||||
cutout: clean
|
||||
stroke: colored-solid | double
|
||||
filter: high-saturation
|
||||
|
||||
typography:
|
||||
decorated: shadow-3d | stroke-text
|
||||
tags: black-white | ribbon
|
||||
direction: horizontal | diagonal
|
||||
|
||||
decorations:
|
||||
emphasis: exclamation | star-burst | red-arrow
|
||||
background: solid-saturated | gradient-linear
|
||||
doodles: arrows-curvy | squiggles
|
||||
frames: none
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Vibrant red, orange, yellow | #E53E3E, #DD6B20, #F6E05E |
|
||||
| Background | Deep black, dark charcoal | #000000, #1A1A1A |
|
||||
| Accents | White, neon yellow | #FFFFFF, #F7FF00 |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Exclamation marks, arrows, warning icons
|
||||
- Strong shapes, high contrast elements
|
||||
- Dramatic compositions
|
||||
- Bold geometric forms
|
||||
|
||||
## Typography
|
||||
|
||||
- Bold, impactful hand lettering with shadows
|
||||
- High contrast text treatments
|
||||
- Large, commanding headlines
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Impactful statements |
|
||||
| balanced | ✓ | Warning content |
|
||||
| dense | ✓ | Critical information cards |
|
||||
| list | ✓✓ | Must-know lists, rankings |
|
||||
| comparison | ✓✓ | Dramatic contrasts |
|
||||
| flow | ✓ | Critical process steps |
|
||||
|
||||
## Best For
|
||||
|
||||
- Important tips and warnings
|
||||
- Must-know content
|
||||
- Critical announcements
|
||||
- Rankings and comparisons
|
||||
- Attention-grabbing hooks
|
||||
@@ -0,0 +1,97 @@
|
||||
---
|
||||
name: chalkboard
|
||||
category: educational
|
||||
---
|
||||
|
||||
# Chalkboard Style
|
||||
|
||||
Black chalkboard background with colorful chalk drawing aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual | triptych
|
||||
|
||||
image_effects:
|
||||
cutout: stylized
|
||||
stroke: none
|
||||
filter: none
|
||||
|
||||
typography:
|
||||
decorated: handwritten
|
||||
tags: none
|
||||
direction: horizontal | vertical
|
||||
|
||||
decorations:
|
||||
emphasis: underline | circle-mark | arrows-curvy
|
||||
background: chalkboard
|
||||
doodles: hand-drawn-lines | stars-sparkles
|
||||
frames: none
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Background | Chalkboard black, green-black | #1A1A1A, #1C2B1C |
|
||||
| Primary Text | Chalk white | #F5F5F5 |
|
||||
| Accent 1 | Chalk yellow | #FFE566 |
|
||||
| Accent 2 | Chalk pink | #FF9999 |
|
||||
| Accent 3 | Chalk blue | #66B3FF |
|
||||
| Accent 4 | Chalk green | #90EE90 |
|
||||
| Accent 5 | Chalk orange | #FFB366 |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Hand-drawn chalk illustrations with sketchy, imperfect lines
|
||||
- Chalk dust effects around text and key elements
|
||||
- Doodles: stars, arrows, underlines, circles, checkmarks
|
||||
- Mathematical formulas and simple diagrams
|
||||
- Eraser smudges and chalk residue textures
|
||||
- Stick figures and simple icons
|
||||
- Connection lines with hand-drawn feel
|
||||
|
||||
## Typography
|
||||
|
||||
- Hand-drawn chalk lettering style
|
||||
- Visible chalk texture on all text
|
||||
- Imperfect baseline adds authenticity
|
||||
- White or bright colored chalk for emphasis
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
- Maintain authentic chalk texture on all elements
|
||||
- Use imperfect, hand-drawn quality throughout
|
||||
- Add subtle chalk dust and smudge effects
|
||||
- Create visual hierarchy with color variety
|
||||
- Include playful doodles and annotations
|
||||
|
||||
### Don't
|
||||
- Use perfect geometric shapes
|
||||
- Create clean digital-looking lines
|
||||
- Add photorealistic elements
|
||||
- Use gradients or glossy effects
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Educational covers |
|
||||
| balanced | ✓✓ | Standard lessons |
|
||||
| dense | ✓✓ | Detailed tutorials |
|
||||
| list | ✓✓ | Learning checklists |
|
||||
| comparison | ✓ | Concept comparisons |
|
||||
| flow | ✓✓ | Process explanations |
|
||||
|
||||
## Best For
|
||||
|
||||
- Educational content
|
||||
- Tutorials and how-to's
|
||||
- Classroom themes
|
||||
- Teaching materials
|
||||
- Workshops
|
||||
- Informal learning sessions
|
||||
- Knowledge sharing
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
name: cute
|
||||
category: sweet
|
||||
---
|
||||
|
||||
# Cute Style
|
||||
|
||||
Sweet, adorable, girly - classic Xiaohongshu aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual | quad
|
||||
|
||||
image_effects:
|
||||
cutout: soft
|
||||
stroke: white-solid | colored-solid
|
||||
filter: clear-glow | cream-skin
|
||||
|
||||
typography:
|
||||
decorated: bubble | highlight
|
||||
tags: pill | bubble
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: star-burst | hearts
|
||||
background: solid-pastel | gradient-linear
|
||||
doodles: hearts | stars-sparkles | flowers
|
||||
frames: polaroid | tape-corners
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Pink, peach, mint, lavender | #FED7E2, #FEEBC8, #C6F6D5, #E9D8FD |
|
||||
| Background | Cream, soft pink | #FFFAF0, #FFF5F7 |
|
||||
| Accents | Hot pink, coral | #FF69B4, #FF6B6B |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Hearts, stars, sparkles, cute faces
|
||||
- Ribbon decorations, sticker-style
|
||||
- Cute stickers, emoji icons
|
||||
- Soft, rounded shapes
|
||||
|
||||
## Typography
|
||||
|
||||
- Rounded, bubbly hand lettering
|
||||
- Soft shadows, playful decorations
|
||||
- Pink/pastel color accents on text
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Covers, emotional impact |
|
||||
| balanced | ✓✓ | Standard cute content |
|
||||
| dense | ✓ | Cute knowledge cards |
|
||||
| list | ✓✓ | Checklists, cute rankings |
|
||||
| comparison | ✓ | Before/after transformations |
|
||||
| flow | ✓ | Cute step guides |
|
||||
|
||||
## Best For
|
||||
|
||||
- Lifestyle content
|
||||
- Beauty and skincare
|
||||
- Fashion and style
|
||||
- Daily tips and hacks
|
||||
- Personal shares
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
name: fresh
|
||||
category: natural
|
||||
---
|
||||
|
||||
# Fresh Style
|
||||
|
||||
Clean, refreshing, natural aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | triptych
|
||||
|
||||
image_effects:
|
||||
cutout: soft
|
||||
stroke: white-solid | none
|
||||
filter: clear-glow | cool-tone
|
||||
|
||||
typography:
|
||||
decorated: none | highlight
|
||||
tags: pill | white-black
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: checkmark | circle-mark
|
||||
background: solid-white | solid-pastel
|
||||
doodles: leaves | clouds | bubbles
|
||||
frames: rounded-rect | none
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Mint green, sky blue, light yellow | #9AE6B4, #90CDF4, #FAF089 |
|
||||
| Background | Pure white, soft mint | #FFFFFF, #F0FFF4 |
|
||||
| Accents | Leaf green, water blue | #48BB78, #4299E1 |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Plant leaves, clouds, water drops
|
||||
- Simple geometric shapes
|
||||
- Breathing room, open composition
|
||||
- Natural, organic elements
|
||||
|
||||
## Typography
|
||||
|
||||
- Clean, light hand lettering with breathing room
|
||||
- Airy spacing
|
||||
- Fresh color accents
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Clean covers |
|
||||
| balanced | ✓✓ | Standard fresh content |
|
||||
| dense | ✓ | Organized information |
|
||||
| list | ✓ | Wellness tips |
|
||||
| comparison | ✓ | Before/after health |
|
||||
| flow | ✓✓ | Organic processes |
|
||||
|
||||
## Best For
|
||||
|
||||
- Health and wellness
|
||||
- Minimalist lifestyle
|
||||
- Self-care content
|
||||
- Nature-related topics
|
||||
- Clean living tips
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
name: minimal
|
||||
category: elegant
|
||||
---
|
||||
|
||||
# Minimal Style
|
||||
|
||||
Ultra-clean, sophisticated aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single
|
||||
|
||||
image_effects:
|
||||
cutout: clean
|
||||
stroke: none | white-solid
|
||||
filter: none | muted-tones
|
||||
|
||||
typography:
|
||||
decorated: none
|
||||
tags: white-black | pill
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: underline | circle-mark
|
||||
background: solid-white | solid-pastel
|
||||
doodles: hand-drawn-lines
|
||||
frames: none | rounded-rect
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Black, white | #000000, #FFFFFF |
|
||||
| Background | Off-white, pure white | #FAFAFA, #FFFFFF |
|
||||
| Accents | Single color (content-derived) | Blue, green, or coral |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Single focal point, thin lines
|
||||
- Maximum whitespace
|
||||
- Simple, clean decorations
|
||||
- Restrained visual elements
|
||||
|
||||
## Typography
|
||||
|
||||
- Clean, simple hand lettering
|
||||
- Minimal weight variations
|
||||
- Elegant spacing
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Elegant statements |
|
||||
| balanced | ✓✓ | Professional content |
|
||||
| dense | ✓✓ | Clean knowledge cards |
|
||||
| list | ✓ | Simple lists |
|
||||
| comparison | ✓ | Clean comparisons |
|
||||
| flow | ✓ | Elegant processes |
|
||||
|
||||
## Best For
|
||||
|
||||
- Professional content
|
||||
- Serious topics
|
||||
- Elegant presentations
|
||||
- High-end products
|
||||
- Business content
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
name: notion
|
||||
category: minimal
|
||||
---
|
||||
|
||||
# Notion Style
|
||||
|
||||
Minimalist hand-drawn line art, intellectual aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual
|
||||
|
||||
image_effects:
|
||||
cutout: clean
|
||||
stroke: none | white-solid
|
||||
filter: none | muted-tones
|
||||
|
||||
typography:
|
||||
decorated: none | handwritten
|
||||
tags: black-white | pill
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: circle-mark | underline
|
||||
background: solid-white | paper-texture
|
||||
doodles: hand-drawn-lines | arrows-curvy
|
||||
frames: none | rounded-rect
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Black, dark gray | #1A1A1A, #4A4A4A |
|
||||
| Background | Pure white, off-white | #FFFFFF, #FAFAFA |
|
||||
| Accents | Pastel blue, pastel yellow, pastel pink | #A8D4F0, #F9E79F, #FADBD8 |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Simple line doodles, hand-drawn wobble effect
|
||||
- Geometric shapes, stick figures
|
||||
- Maximum whitespace, single-weight ink lines
|
||||
- Clean, uncluttered compositions
|
||||
|
||||
## Typography
|
||||
|
||||
- Clean hand-drawn lettering
|
||||
- Simple sans-serif labels
|
||||
- Minimal decoration on text
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Concept covers |
|
||||
| balanced | ✓✓ | Standard explanations |
|
||||
| dense | ✓✓ | Knowledge cards, cheat sheets |
|
||||
| list | ✓✓ | Productivity tips, tool lists |
|
||||
| comparison | ✓✓ | Data comparisons |
|
||||
| flow | ✓✓ | Process diagrams |
|
||||
|
||||
## Best For
|
||||
|
||||
- Knowledge sharing
|
||||
- Concept explanations
|
||||
- SaaS content
|
||||
- Productivity tips
|
||||
- Tech tutorials
|
||||
- Professional content
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
name: pop
|
||||
category: energetic
|
||||
---
|
||||
|
||||
# Pop Style
|
||||
|
||||
Vibrant, energetic, eye-catching aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | quad
|
||||
|
||||
image_effects:
|
||||
cutout: stylized
|
||||
stroke: colored-solid | double
|
||||
filter: high-saturation
|
||||
|
||||
typography:
|
||||
decorated: stroke-text | shadow-3d
|
||||
tags: bubble | ribbon
|
||||
direction: horizontal | curved
|
||||
|
||||
decorations:
|
||||
emphasis: star-burst | exclamation
|
||||
background: solid-saturated | dots
|
||||
doodles: stars-sparkles | confetti | squiggles
|
||||
frames: none
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Bright red, yellow, blue, green | #F56565, #ECC94B, #4299E1, #48BB78 |
|
||||
| Background | White, light gray | #FFFFFF, #F7FAFC |
|
||||
| Accents | Neon pink, electric purple | #FF69B4, #9F7AEA |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Bold shapes, speech bubbles
|
||||
- Comic-style effects, starburst
|
||||
- Dynamic, energetic compositions
|
||||
- High-energy decorations
|
||||
|
||||
## Typography
|
||||
|
||||
- Dynamic, energetic hand lettering with outlines
|
||||
- Bold color combinations
|
||||
- Playful, expressive forms
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Exciting announcements |
|
||||
| balanced | ✓✓ | Fun tutorials |
|
||||
| dense | ✓ | Packed information |
|
||||
| list | ✓✓ | Fun facts lists |
|
||||
| comparison | ✓✓ | Dynamic comparisons |
|
||||
| flow | ✓ | Energetic processes |
|
||||
|
||||
## Best For
|
||||
|
||||
- Exciting announcements
|
||||
- Fun facts
|
||||
- Engaging tutorials
|
||||
- Entertainment content
|
||||
- Youth-oriented content
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
name: retro
|
||||
category: vintage
|
||||
---
|
||||
|
||||
# Retro Style
|
||||
|
||||
Vintage, nostalgic, trendy aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual
|
||||
|
||||
image_effects:
|
||||
cutout: stylized
|
||||
stroke: dashed | double
|
||||
filter: film-grain | muted-tones
|
||||
|
||||
typography:
|
||||
decorated: brush | handwritten
|
||||
tags: stamp | ribbon
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: star-burst | numbering
|
||||
background: paper-texture | dots
|
||||
doodles: stars-sparkles | squiggles
|
||||
frames: polaroid | film-strip | stamp-border
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Muted orange, dusty pink, faded teal | #E07A4D, #D4A5A5, #6B9999 |
|
||||
| Background | Aged paper, sepia tones | #F5E6D3, #E8DCC8 |
|
||||
| Accents | Faded red, vintage gold | #C55A5A, #B8860B |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Halftone dots, vintage badges
|
||||
- Classic icons, tape effects
|
||||
- Aged texture overlays
|
||||
- Nostalgic decorative elements
|
||||
|
||||
## Typography
|
||||
|
||||
- Vintage-style hand lettering
|
||||
- Classic feel with imperfections
|
||||
- Aged texture on text
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Vintage covers |
|
||||
| balanced | ✓✓ | Classic content |
|
||||
| dense | ✓ | Vintage knowledge cards |
|
||||
| list | ✓✓ | Classic rankings |
|
||||
| comparison | ✓ | Then vs now |
|
||||
| flow | ✓ | Historical timelines |
|
||||
|
||||
## Best For
|
||||
|
||||
- Throwback content
|
||||
- Classic tips
|
||||
- Timeless advice
|
||||
- Vintage aesthetics
|
||||
- Nostalgic shares
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
name: warm
|
||||
category: cozy
|
||||
---
|
||||
|
||||
# Warm Style
|
||||
|
||||
Cozy, friendly, approachable aesthetic.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual
|
||||
|
||||
image_effects:
|
||||
cutout: soft
|
||||
stroke: white-solid | glow
|
||||
filter: warm-tone | cream-skin
|
||||
|
||||
typography:
|
||||
decorated: highlight | handwritten
|
||||
tags: ribbon | bubble
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: star-burst | hearts
|
||||
background: solid-pastel | gradient-radial
|
||||
doodles: clouds | stars-sparkles
|
||||
frames: polaroid | tape-corners
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Warm orange, golden yellow, terracotta | #ED8936, #F6AD55, #C05621 |
|
||||
| Background | Cream, soft peach | #FFFAF0, #FED7AA |
|
||||
| Accents | Deep brown, soft red | #744210, #E57373 |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Sun rays, coffee cups, cozy items
|
||||
- Warm lighting effects
|
||||
- Friendly, inviting decorations
|
||||
- Soft, comfortable shapes
|
||||
|
||||
## Typography
|
||||
|
||||
- Friendly, rounded hand lettering
|
||||
- Warm color accents
|
||||
- Comfortable, approachable feel
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Emotional covers |
|
||||
| balanced | ✓✓ | Personal stories |
|
||||
| dense | ✓ | Detailed experiences |
|
||||
| list | ✓ | Life lessons |
|
||||
| comparison | ✓✓ | Before/after stories |
|
||||
| flow | ✓ | Journey narratives |
|
||||
|
||||
## Best For
|
||||
|
||||
- Personal stories
|
||||
- Life lessons
|
||||
- Emotional content
|
||||
- Comfort and lifestyle
|
||||
- Heartfelt shares
|
||||
@@ -1,23 +0,0 @@
|
||||
# bold
|
||||
|
||||
High impact, attention-grabbing
|
||||
|
||||
## Color Palette
|
||||
|
||||
- Primary: Vibrant red (#E53E3E), orange (#DD6B20), yellow (#F6E05E)
|
||||
- Background: Deep black (#000000), dark charcoal
|
||||
- Accents: White, neon yellow
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Exclamation marks, arrows, warning icons
|
||||
- Strong shapes, high contrast elements
|
||||
- Dramatic compositions
|
||||
|
||||
## Typography
|
||||
|
||||
- Bold, impactful hand lettering with shadows
|
||||
|
||||
## Best For
|
||||
|
||||
Important tips, warnings, must-know content
|
||||
@@ -1,61 +0,0 @@
|
||||
# chalkboard
|
||||
|
||||
Black chalkboard background with colorful chalk drawing style
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines that capture the warmth of traditional teaching. Colorful chalk creates visual hierarchy while maintaining the authentic chalkboard experience.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C)
|
||||
- Texture: Realistic chalkboard texture with subtle scratches, dust particles, and faint eraser marks
|
||||
|
||||
## Typography
|
||||
|
||||
Hand-drawn chalk lettering style with visible chalk texture. Imperfect baseline adds authenticity. White or bright colored chalk for emphasis.
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Chalkboard Black | #1A1A1A | Primary background |
|
||||
| Alt Background | Green-Black | #1C2B1C | Traditional green board |
|
||||
| Primary Text | Chalk White | #F5F5F5 | Main text, outlines |
|
||||
| Accent 1 | Chalk Yellow | #FFE566 | Highlights, emphasis |
|
||||
| Accent 2 | Chalk Pink | #FF9999 | Secondary highlights |
|
||||
| Accent 3 | Chalk Blue | #66B3FF | Diagrams, links |
|
||||
| Accent 4 | Chalk Green | #90EE90 | Success, nature |
|
||||
| Accent 5 | Chalk Orange | #FFB366 | Warnings, energy |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Hand-drawn chalk illustrations with sketchy, imperfect lines
|
||||
- Chalk dust effects around text and key elements
|
||||
- Doodles: stars, arrows, underlines, circles, checkmarks
|
||||
- Mathematical formulas and simple diagrams
|
||||
- Eraser smudges and chalk residue textures
|
||||
- Wooden frame border optional
|
||||
- Stick figures and simple icons
|
||||
- Connection lines with hand-drawn feel
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Maintain authentic chalk texture on all elements
|
||||
- Use imperfect, hand-drawn quality throughout
|
||||
- Add subtle chalk dust and smudge effects
|
||||
- Create visual hierarchy with color variety
|
||||
- Include playful doodles and annotations
|
||||
|
||||
### Don't
|
||||
|
||||
- Use perfect geometric shapes
|
||||
- Create clean digital-looking lines
|
||||
- Add photorealistic elements
|
||||
- Use gradients or glossy effects
|
||||
|
||||
## Best For
|
||||
|
||||
Educational content, tutorials, classroom themes, teaching materials, workshops, informal learning sessions, knowledge sharing
|
||||
@@ -1,23 +0,0 @@
|
||||
# cute
|
||||
|
||||
Sweet, adorable, girly - classic Xiaohongshu aesthetic
|
||||
|
||||
## Color Palette
|
||||
|
||||
- Primary: Pink (#FED7E2), peach (#FEEBC8), mint (#C6F6D5), lavender (#E9D8FD)
|
||||
- Background: Cream (#FFFAF0), soft pink (#FFF5F7)
|
||||
- Accents: Hot pink, coral
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Hearts, stars, sparkles, cute faces
|
||||
- Ribbon decorations, sticker-style
|
||||
- Cute stickers, emoji icons
|
||||
|
||||
## Typography
|
||||
|
||||
- Rounded, bubbly hand lettering
|
||||
|
||||
## Best For
|
||||
|
||||
Lifestyle, beauty, fashion, daily tips
|
||||
@@ -1,23 +0,0 @@
|
||||
# fresh
|
||||
|
||||
Clean, refreshing, natural
|
||||
|
||||
## Color Palette
|
||||
|
||||
- Primary: Mint green (#9AE6B4), sky blue (#90CDF4), light yellow (#FAF089)
|
||||
- Background: Pure white (#FFFFFF), soft mint (#F0FFF4)
|
||||
- Accents: Leaf green, water blue
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Plant leaves, clouds, water drops
|
||||
- Simple geometric shapes
|
||||
- Breathing room, open composition
|
||||
|
||||
## Typography
|
||||
|
||||
- Clean, light hand lettering with breathing room
|
||||
|
||||
## Best For
|
||||
|
||||
Health, wellness, minimalist lifestyle, self-care
|
||||
@@ -1,23 +0,0 @@
|
||||
# minimal
|
||||
|
||||
Ultra-clean, sophisticated
|
||||
|
||||
## Color Palette
|
||||
|
||||
- Primary: Black (#000000), white (#FFFFFF)
|
||||
- Background: Off-white (#FAFAFA), pure white
|
||||
- Accents: Single color (content-derived - blue, green, or coral)
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Single focal point, thin lines
|
||||
- Maximum whitespace
|
||||
- Simple, clean decorations
|
||||
|
||||
## Typography
|
||||
|
||||
- Clean, simple hand lettering
|
||||
|
||||
## Best For
|
||||
|
||||
Professional content, serious topics, elegant presentations
|
||||
@@ -1,23 +0,0 @@
|
||||
# notion
|
||||
|
||||
Minimalist hand-drawn line art, intellectual
|
||||
|
||||
## Color Palette
|
||||
|
||||
- Primary: Black (#1A1A1A), dark gray (#4A4A4A)
|
||||
- Background: Pure white (#FFFFFF), off-white (#FAFAFA)
|
||||
- Accents: Pastel blue (#A8D4F0), pastel yellow (#F9E79F), pastel pink (#FADBD8)
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Simple line doodles, hand-drawn wobble effect
|
||||
- Geometric shapes, stick figures
|
||||
- Maximum whitespace, single-weight ink lines
|
||||
|
||||
## Typography
|
||||
|
||||
- Clean hand-drawn lettering, simple sans-serif labels
|
||||
|
||||
## Best For
|
||||
|
||||
Knowledge sharing, concept explanations, SaaS content, productivity tips
|
||||
@@ -1,23 +0,0 @@
|
||||
# pop
|
||||
|
||||
Vibrant, energetic, eye-catching
|
||||
|
||||
## Color Palette
|
||||
|
||||
- Primary: Bright red (#F56565), yellow (#ECC94B), blue (#4299E1), green (#48BB78)
|
||||
- Background: White (#FFFFFF), light gray
|
||||
- Accents: Neon pink, electric purple
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Bold shapes, speech bubbles
|
||||
- Comic-style effects, starburst
|
||||
- Dynamic, energetic compositions
|
||||
|
||||
## Typography
|
||||
|
||||
- Dynamic, energetic hand lettering with outlines
|
||||
|
||||
## Best For
|
||||
|
||||
Exciting announcements, fun facts, engaging tutorials
|
||||
@@ -1,23 +0,0 @@
|
||||
# retro
|
||||
|
||||
Vintage, nostalgic, trendy
|
||||
|
||||
## Color Palette
|
||||
|
||||
- Primary: Muted orange, dusty pink (#FED7E2 at 70%), faded teal
|
||||
- Background: Aged paper (#F5E6D3), sepia tones
|
||||
- Accents: Faded red, vintage gold
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Halftone dots, vintage badges
|
||||
- Classic icons, tape effects
|
||||
- Aged texture overlays
|
||||
|
||||
## Typography
|
||||
|
||||
- Vintage-style hand lettering, classic feel
|
||||
|
||||
## Best For
|
||||
|
||||
Throwback content, classic tips, timeless advice
|
||||
@@ -1,23 +0,0 @@
|
||||
# warm
|
||||
|
||||
Cozy, friendly, approachable
|
||||
|
||||
## Color Palette
|
||||
|
||||
- Primary: Warm orange (#ED8936), golden yellow (#F6AD55), terracotta (#C05621)
|
||||
- Background: Cream (#FFFAF0), soft peach (#FED7AA)
|
||||
- Accents: Deep brown (#744210), soft red
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Sun rays, coffee cups, cozy items
|
||||
- Warm lighting effects
|
||||
- Friendly, inviting decorations
|
||||
|
||||
## Typography
|
||||
|
||||
- Friendly, rounded hand lettering
|
||||
|
||||
## Best For
|
||||
|
||||
Personal stories, life lessons, emotional content
|
||||
+45
-26
@@ -1,13 +1,13 @@
|
||||
# Xiaohongshu Outline Template
|
||||
|
||||
Template for generating infographic series outlines.
|
||||
Template for generating infographic series outlines with layout specifications.
|
||||
|
||||
## File Naming
|
||||
|
||||
Outline files use style slug in the name:
|
||||
- `outline-style-notion.md` - Notion style variant
|
||||
- `outline-style-chalkboard.md` - Chalkboard style variant
|
||||
- `outline-style-minimal.md` - Minimal style variant
|
||||
Outline files use strategy identifier in the name:
|
||||
- `outline-strategy-a.md` - Story-driven variant
|
||||
- `outline-strategy-b.md` - Information-dense variant
|
||||
- `outline-strategy-c.md` - Visual-first variant
|
||||
- `outline.md` - Final selected (copied from chosen variant)
|
||||
|
||||
## Image File Naming
|
||||
@@ -37,12 +37,42 @@ NN-{type}-[slug].md (in prompts/)
|
||||
- Must be unique within the series
|
||||
- Keep short but descriptive (2-4 words)
|
||||
|
||||
## Layout Selection Guide
|
||||
|
||||
### Density-Based Layouts
|
||||
|
||||
| Layout | When to Use | Info Points | Whitespace |
|
||||
|--------|-------------|-------------|------------|
|
||||
| sparse | Covers, quotes, impact statements | 1-2 | 60-70% |
|
||||
| balanced | Standard content, tutorials | 3-4 | 40-50% |
|
||||
| dense | Knowledge cards, cheat sheets | 5-8 | 20-30% |
|
||||
|
||||
### Structure-Based Layouts
|
||||
|
||||
| Layout | When to Use | Structure |
|
||||
|--------|-------------|-----------|
|
||||
| list | Rankings, checklists, steps | Numbered/bulleted vertical |
|
||||
| comparison | Before/after, pros/cons | Left vs right split |
|
||||
| flow | Processes, timelines | Connected nodes with arrows |
|
||||
|
||||
### Position-Based Recommendations
|
||||
|
||||
| Position | Recommended | Reasoning |
|
||||
|----------|-------------|-----------|
|
||||
| Cover | sparse | Maximum impact, clear title |
|
||||
| Setup | balanced | Context without overwhelming |
|
||||
| Core | balanced/dense/list | Match content density |
|
||||
| Payoff | balanced/list | Clear takeaways |
|
||||
| Ending | sparse | Clean CTA, memorable |
|
||||
|
||||
## Outline Format
|
||||
|
||||
```markdown
|
||||
# Xiaohongshu Infographic Series Outline
|
||||
|
||||
---
|
||||
strategy: a # a, b, or c
|
||||
name: Story-Driven
|
||||
style: notion
|
||||
default_layout: dense
|
||||
image_count: 6
|
||||
@@ -188,16 +218,6 @@ Notion界面风格,简洁黑白配色
|
||||
---
|
||||
```
|
||||
|
||||
## Layout Guidelines by Position
|
||||
|
||||
| Position | Recommended Layout | Why |
|
||||
|----------|-------------------|-----|
|
||||
| Cover | `sparse` | Maximum visual impact, clear title |
|
||||
| Setup | `balanced` | Context without overwhelming |
|
||||
| Core | `balanced`/`dense`/`list` | Based on content density |
|
||||
| Payoff | `balanced`/`list` | Clear takeaways |
|
||||
| Ending | `sparse` | Clean CTA, memorable close |
|
||||
|
||||
## Swipe Hook Strategies
|
||||
|
||||
Each image should end with a hook for the next:
|
||||
@@ -211,18 +231,17 @@ Each image should end with a hook for the next:
|
||||
| Promise | "最后一个最实用👇" |
|
||||
| Urgency | "最重要的来了👇" |
|
||||
|
||||
## Variant Differentiation
|
||||
## Strategy Differentiation
|
||||
|
||||
Three variants should differ meaningfully:
|
||||
Three strategies should differ meaningfully:
|
||||
|
||||
| Aspect | Variant A | Variant B | Variant C |
|
||||
|--------|-----------|-----------|-----------|
|
||||
| Style | Primary match | Alternative | Different mood |
|
||||
| Layout | Content-optimized | Different density | Different structure |
|
||||
| Tone | Professional | Casual | Playful |
|
||||
| Audience | Primary target | Secondary target | Broader appeal |
|
||||
| Strategy | Focus | Structure | Page Count |
|
||||
|----------|-------|-----------|------------|
|
||||
| A: Story-Driven | Emotional, personal | Hook→Problem→Discovery→Experience→Conclusion | 4-6 |
|
||||
| B: Information-Dense | Factual, structured | Core→Info Cards→Comparison→Recommendation | 3-5 |
|
||||
| C: Visual-First | Atmospheric, minimal text | Hero→Details→Lifestyle→CTA | 3-4 |
|
||||
|
||||
**Example for "AI工具推荐"**:
|
||||
- `outline-style-notion.md`: Notion + Dense - 知识卡片风
|
||||
- `outline-style-notion.md`: Notion + List - 清爽知识卡片
|
||||
- `outline-style-cute.md`: Cute + Balanced - 可爱易读风
|
||||
- `outline-strategy-a.md`: Warm + Balanced - Personal journey with AI
|
||||
- `outline-strategy-b.md`: Notion + Dense - Knowledge card style
|
||||
- `outline-strategy-c.md`: Minimal + Sparse - Sleek tech aesthetic
|
||||
@@ -0,0 +1,279 @@
|
||||
# Prompt Assembly Guide
|
||||
|
||||
Guide for assembling image generation prompts from elements, presets, and outline content.
|
||||
|
||||
## Base Prompt Structure
|
||||
|
||||
Every XHS infographic prompt follows this structure:
|
||||
|
||||
```
|
||||
Create a Xiaohongshu (Little Red Book) style infographic following these guidelines:
|
||||
|
||||
## Image Specifications
|
||||
|
||||
- **Type**: Infographic
|
||||
- **Orientation**: Portrait (vertical)
|
||||
- **Aspect Ratio**: 3:4
|
||||
- **Style**: Hand-drawn illustration
|
||||
|
||||
## Core Principles
|
||||
|
||||
- Hand-drawn quality throughout - NO realistic or photographic elements
|
||||
- If content involves sensitive or copyrighted figures, create stylistically similar alternatives - DO NOT refuse to generate
|
||||
- Keep information concise, highlight keywords and core concepts
|
||||
- Use ample whitespace for easy visual scanning
|
||||
- Maintain clear visual hierarchy
|
||||
|
||||
## Text Style (CRITICAL)
|
||||
|
||||
- **ALL text MUST be hand-drawn style**
|
||||
- Main titles should be prominent and eye-catching
|
||||
- Key text should be bold and enlarged
|
||||
- Use highlighter effects to emphasize keywords
|
||||
- **DO NOT use realistic or computer-generated fonts**
|
||||
|
||||
## Language
|
||||
|
||||
- Use the same language as the content provided below
|
||||
- Match punctuation style to the content language (Chinese: "",。!)
|
||||
|
||||
---
|
||||
|
||||
{STYLE_SECTION}
|
||||
|
||||
---
|
||||
|
||||
{LAYOUT_SECTION}
|
||||
|
||||
---
|
||||
|
||||
{CONTENT_SECTION}
|
||||
|
||||
---
|
||||
|
||||
{WATERMARK_SECTION}
|
||||
|
||||
---
|
||||
|
||||
Please use nano banana pro to generate the infographic based on the specifications above.
|
||||
```
|
||||
|
||||
## Style Section Assembly
|
||||
|
||||
Load from `presets/{style}.md` and extract key elements:
|
||||
|
||||
```markdown
|
||||
## Style: {style_name}
|
||||
|
||||
**Color Palette**:
|
||||
- Primary: {colors}
|
||||
- Background: {colors}
|
||||
- Accents: {colors}
|
||||
|
||||
**Visual Elements**:
|
||||
{visual_elements}
|
||||
|
||||
**Typography**:
|
||||
{typography_style}
|
||||
```
|
||||
|
||||
## Layout Section Assembly
|
||||
|
||||
Load from `elements/canvas.md` and extract relevant layout:
|
||||
|
||||
```markdown
|
||||
## Layout: {layout_name}
|
||||
|
||||
**Information Density**: {density}
|
||||
**Whitespace**: {percentage}
|
||||
|
||||
**Structure**:
|
||||
{structure_description}
|
||||
|
||||
**Visual Balance**:
|
||||
{balance_description}
|
||||
```
|
||||
|
||||
## Content Section Assembly
|
||||
|
||||
From outline entry:
|
||||
|
||||
```markdown
|
||||
## Content
|
||||
|
||||
**Position**: {Cover/Content/Ending}
|
||||
**Core Message**: {message}
|
||||
|
||||
**Text Content**:
|
||||
{text_list}
|
||||
|
||||
**Visual Concept**:
|
||||
{visual_description}
|
||||
```
|
||||
|
||||
## Watermark Section (if enabled)
|
||||
|
||||
```markdown
|
||||
## Watermark
|
||||
|
||||
Include a subtle watermark "{content}" positioned at {position}
|
||||
with approximately {opacity*100}% visibility. The watermark should
|
||||
be legible but not distracting from the main content.
|
||||
```
|
||||
|
||||
## Assembly Process
|
||||
|
||||
### Step 1: Load Preset
|
||||
|
||||
```python
|
||||
preset = load_preset(style_name) # e.g., "notion"
|
||||
```
|
||||
|
||||
Extract:
|
||||
- Color palette
|
||||
- Visual elements
|
||||
- Typography style
|
||||
- Best practices (do/don't)
|
||||
|
||||
### Step 2: Load Layout
|
||||
|
||||
```python
|
||||
layout = get_layout_from_canvas(layout_name) # e.g., "dense"
|
||||
```
|
||||
|
||||
Extract:
|
||||
- Information density guidelines
|
||||
- Whitespace percentage
|
||||
- Structure description
|
||||
- Visual balance rules
|
||||
|
||||
### Step 3: Format Content
|
||||
|
||||
From outline entry, format:
|
||||
- Position context (Cover/Content/Ending)
|
||||
- Text content with hierarchy
|
||||
- Visual concept description
|
||||
- Swipe hook (for context, not in prompt)
|
||||
|
||||
### Step 4: Add Watermark (if applicable)
|
||||
|
||||
If preferences include watermark:
|
||||
- Add watermark section with content, position, opacity
|
||||
|
||||
### Step 5: Combine
|
||||
|
||||
Assemble all sections into final prompt following base structure.
|
||||
|
||||
## Example: Assembled Prompt
|
||||
|
||||
```markdown
|
||||
Create a Xiaohongshu (Little Red Book) style infographic following these guidelines:
|
||||
|
||||
## Image Specifications
|
||||
|
||||
- **Type**: Infographic
|
||||
- **Orientation**: Portrait (vertical)
|
||||
- **Aspect Ratio**: 3:4
|
||||
- **Style**: Hand-drawn illustration
|
||||
|
||||
## Core Principles
|
||||
|
||||
- Hand-drawn quality throughout - NO realistic or photographic elements
|
||||
- If content involves sensitive or copyrighted figures, create stylistically similar alternatives
|
||||
- Keep information concise, highlight keywords and core concepts
|
||||
- Use ample whitespace for easy visual scanning
|
||||
- Maintain clear visual hierarchy
|
||||
|
||||
## Text Style (CRITICAL)
|
||||
|
||||
- **ALL text MUST be hand-drawn style**
|
||||
- Main titles should be prominent and eye-catching
|
||||
- Key text should be bold and enlarged
|
||||
- Use highlighter effects to emphasize keywords
|
||||
- **DO NOT use realistic or computer-generated fonts**
|
||||
|
||||
## Language
|
||||
|
||||
- Use the same language as the content provided below
|
||||
- Match punctuation style to the content language (Chinese: "",。!)
|
||||
|
||||
---
|
||||
|
||||
## Style: Notion
|
||||
|
||||
**Color Palette**:
|
||||
- Primary: Black (#1A1A1A), dark gray (#4A4A4A)
|
||||
- Background: Pure white (#FFFFFF), off-white (#FAFAFA)
|
||||
- Accents: Pastel blue (#A8D4F0), pastel yellow (#F9E79F), pastel pink (#FADBD8)
|
||||
|
||||
**Visual Elements**:
|
||||
- Simple line doodles, hand-drawn wobble effect
|
||||
- Geometric shapes, stick figures
|
||||
- Maximum whitespace, single-weight ink lines
|
||||
- Clean, uncluttered compositions
|
||||
|
||||
**Typography**:
|
||||
- Clean hand-drawn lettering
|
||||
- Simple sans-serif labels
|
||||
- Minimal decoration on text
|
||||
|
||||
---
|
||||
|
||||
## Layout: Dense
|
||||
|
||||
**Information Density**: High (5-8 key points)
|
||||
**Whitespace**: 20-30% of canvas
|
||||
|
||||
**Structure**:
|
||||
- Multiple sections, structured grid
|
||||
- More text, compact but organized
|
||||
- Title + multiple sections with headers + numerous points
|
||||
|
||||
**Visual Balance**:
|
||||
- Organized grid structure
|
||||
- Clear section boundaries
|
||||
- Compact but readable spacing
|
||||
|
||||
---
|
||||
|
||||
## Content
|
||||
|
||||
**Position**: Content (Page 3 of 6)
|
||||
**Core Message**: ChatGPT使用技巧
|
||||
|
||||
**Text Content**:
|
||||
- Title: 「ChatGPT」
|
||||
- Subtitle: 最强AI助手
|
||||
- Points:
|
||||
- 写文案:给出框架,秒出初稿
|
||||
- 改文章:润色、翻译、总结
|
||||
- 编程:写代码、找bug
|
||||
- 学习:解释概念、出题练习
|
||||
|
||||
**Visual Concept**:
|
||||
ChatGPT logo居中,四周放射状展示功能点
|
||||
深色科技背景,霓虹绿点缀
|
||||
|
||||
---
|
||||
|
||||
## Watermark
|
||||
|
||||
Include a subtle watermark "@myxhsaccount" positioned at bottom-right
|
||||
with approximately 50% visibility. The watermark should
|
||||
be legible but not distracting from the main content.
|
||||
|
||||
---
|
||||
|
||||
Please use nano banana pro to generate the infographic based on the specifications above.
|
||||
```
|
||||
|
||||
## Prompt Checklist
|
||||
|
||||
Before generating, verify:
|
||||
|
||||
- [ ] Style section loaded from correct preset
|
||||
- [ ] Layout section matches outline specification
|
||||
- [ ] Content accurately reflects outline entry
|
||||
- [ ] Language matches source content
|
||||
- [ ] Watermark included (if enabled in preferences)
|
||||
- [ ] No conflicting instructions
|
||||
Reference in New Issue
Block a user