seahi/baoyu-skills
1
0
Fork 0
mirror of https://github.com/JimLiu/baoyu-skills.git synced 2026-07-12 05:51:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: release v1.17.1

Browse Source
This commit is contained in:
Jim Liu 宝玉
2026-01-23 12:23:13 -06:00
parent 7500a3b106
commit b1cbd1d527
8 changed files with 221 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude-plugin/marketplace.json
+1 -1
View File
@@ -6,7 +6,7 @@
}, },
"metadata": { "metadata": {
"description": "Skills shared by Baoyu for improving daily work efficiency", "description": "Skills shared by Baoyu for improving daily work efficiency",
"version": "1.17.0" "version": "1.17.1"
}, },
"plugins": [ "plugins": [
{ {
CHANGELOG.md
+9
View File
@@ -2,6 +2,15 @@
English | [中文](./CHANGELOG.zh.md) English | [中文](./CHANGELOG.zh.md)
## 1.17.1 - 2026-01-23
### Refactor
- `baoyu-infographic`: simplifies SKILL.md documentation—removes redundant content, streamlines workflow description, and improves readability.
- `baoyu-xhs-images`: improves Step 0 (Load Preferences) documentation—adds clearer first-time setup flow with visual tables and explicit path checking instructions.
### Improvements
- `baoyu-infographic`: enhances `craft-handmade` style with strict hand-drawn enforcement—requires all imagery to maintain cartoon/illustrated aesthetic, no realistic or photographic elements.
## 1.17.0 - 2026-01-23 ## 1.17.0 - 2026-01-23
### Features ### Features
CHANGELOG.zh.md
+9
View File
@@ -2,6 +2,15 @@
[English](./CHANGELOG.md) | 中文 [English](./CHANGELOG.md) | 中文
## 1.17.1 - 2026-01-23
### 重构
- `baoyu-infographic`：精简 SKILL.md 文档——移除冗余内容，优化工作流描述，提升可读性。
- `baoyu-xhs-images`：优化 Step 0（加载偏好设置）文档——新增更清晰的首次设置流程，使用可视化表格和明确的路径检查指令。
### 改进
- `baoyu-infographic`：增强 `craft-handmade` 风格的手绘规则——要求所有图像必须保持卡通/插画风格，禁止写实或照片元素。
## 1.17.0 - 2026-01-23 ## 1.17.0 - 2026-01-23
### 新功能 ### 新功能
skills/baoyu-infographic/SKILL.md
+133 -405
View File
@@ -1,74 +1,47 @@
--- ---
name: baoyu-infographic name: baoyu-infographic
description: Generate professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", or "visual summary". description: Generates professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", "visual summary", or "可视化".
--- ---
# Infographic Generator # Infographic Generator
Generate professional infographics with two dimensions: layout (information structure) and style (visual aesthetics). Two dimensions: **layout** (information structure) × **style** (visual aesthetics). Freely combine any layout with any style.
## Usage ## Usage
```bash ```bash
# Auto-recommend combinations based on content
/baoyu-infographic path/to/content.md /baoyu-infographic path/to/content.md
/baoyu-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
# Specify layout /baoyu-infographic path/to/content.md --aspect portrait --lang zh
/baoyu-infographic path/to/content.md --layout hierarchical-layers /baoyu-infographic # then paste content
# Specify style (default: craft-handmade)
/baoyu-infographic path/to/content.md --style technical-schematic
# Specify both
/baoyu-infographic path/to/content.md --layout funnel --style corporate-memphis
# With aspect ratio
/baoyu-infographic path/to/content.md --aspect portrait
# Direct content input
/baoyu-infographic
[paste content]
# Direct input with options
/baoyu-infographic --layout linear-progression --style aged-academia
[paste content]
``` ```
## Options ## Options
| Option | Description | | Option | Values |
|--------|-------------| |--------|--------|
| `--layout <name>` | Information layout (20 options, see Layout Gallery) | | `--layout` | 20 options (see Layout Gallery), default: bento-grid |
| `--style <name>` | Visual style (17 options, default: craft-handmade) | | `--style` | 17 options (see Style Gallery), default: craft-handmade |
| `--aspect <ratio>` | landscape (16:9), portrait (9:16), square (1:1) | | `--aspect` | landscape (16:9), portrait (9:16), square (1:1) |
| `--lang <code>` | Output language (en, zh, ja, etc.) | | `--lang` | en, zh, ja, etc. |
## Two Dimensions
| Dimension | Controls | Count |
|-----------|----------|-------|
| **Layout** | Information structure: hierarchy, flow, relationships | 20 types |
| **Style** | Visual aesthetics: colors, textures, artistic treatment | 17 types |
Layout × Style can be freely combined. Example: `--layout hierarchical-layers --style craft-handmade` creates a hierarchy with playful hand-drawn aesthetics.
## Layout Gallery ## Layout Gallery
| Layout | Best For | | Layout | Best For |
|--------|----------| |--------|----------|
| `linear-progression` | Timelines, step-by-step processes, tutorials | | `linear-progression` | Timelines, processes, tutorials |
| `binary-comparison` | A vs B, before-after, pros-cons | | `binary-comparison` | A vs B, before-after, pros-cons |
| `comparison-matrix` | Multi-factor comparisons | | `comparison-matrix` | Multi-factor comparisons |
| `hierarchical-layers` | Pyramids, concentric circles, priority levels | | `hierarchical-layers` | Pyramids, priority levels |
| `tree-branching` | Categories, taxonomies | | `tree-branching` | Categories, taxonomies |
| `hub-spoke` | Central concept with related items | | `hub-spoke` | Central concept with related items |
| `structural-breakdown` | Exploded views, cross-sections, part labeling | | `structural-breakdown` | Exploded views, cross-sections |
| `bento-grid` | Multiple topics, overview (default) | | `bento-grid` | Multiple topics, overview (default) |
| `iceberg` | Surface vs hidden aspects | | `iceberg` | Surface vs hidden aspects |
| `bridge` | Problem-solution, gap-crossing | | `bridge` | Problem-solution |
| `funnel` | Conversion processes, filtering | | `funnel` | Conversion, filtering |
| `isometric-map` | Spatial relationships, locations | | `isometric-map` | Spatial relationships |
| `dashboard` | Metrics, KPIs, data display | | `dashboard` | Metrics, KPIs |
| `periodic-table` | Categorized collections | | `periodic-table` | Categorized collections |
| `comic-strip` | Narratives, sequences | | `comic-strip` | Narratives, sequences |
| `story-mountain` | Plot structure, tension arcs | | `story-mountain` | Plot structure, tension arcs |
@@ -77,415 +50,170 @@ Layout × Style can be freely combined. Example: `--layout hierarchical-layers -
| `winding-roadmap` | Journey, milestones | | `winding-roadmap` | Journey, milestones |
| `circular-flow` | Cycles, recurring processes | | `circular-flow` | Cycles, recurring processes |
Detailed layout definitions: `references/layouts/<layout>.md` Full definitions: `references/layouts/<layout>.md`
## Style Gallery ## Style Gallery
| Style | Description | | Style | Description |
|-------|-------------| |-------|-------------|
| `craft-handmade` (Default) | Hand-drawn illustration, paper craft aesthetic | | `craft-handmade` | Hand-drawn, paper craft (default) |
| `claymation` | 3D clay figures, playful stop-motion | | `claymation` | 3D clay figures, stop-motion |
| `kawaii` | Japanese cute, big eyes, pastel colors | | `kawaii` | Japanese cute, pastels |
| `storybook-watercolor` | Soft painted illustrations, whimsical | | `storybook-watercolor` | Soft painted, whimsical |
| `chalkboard` | Colorful chalk on black board | | `chalkboard` | Chalk on black board |
| `cyberpunk-neon` | Neon glow on dark, futuristic | | `cyberpunk-neon` | Neon glow, futuristic |
| `bold-graphic` | Comic style, halftone dots, high contrast | | `bold-graphic` | Comic style, halftone |
| `aged-academia` | Vintage science, sepia sketches | | `aged-academia` | Vintage science, sepia |
| `corporate-memphis` | Flat vector people, vibrant fills | | `corporate-memphis` | Flat vector, vibrant |
| `technical-schematic` | Blueprint, isometric 3D, engineering | | `technical-schematic` | Blueprint, engineering |
| `origami` | Folded paper forms, geometric | | `origami` | Folded paper, geometric |
| `pixel-art` | Retro 8-bit, nostalgic gaming | | `pixel-art` | Retro 8-bit |
| `ui-wireframe` | Grayscale boxes, interface mockup | | `ui-wireframe` | Grayscale interface mockup |
| `subway-map` | Transit diagram, colored lines | | `subway-map` | Transit diagram |
| `ikea-manual` | Minimal line art, assembly style | | `ikea-manual` | Minimal line art |
| `knolling` | Organized flat-lay, top-down | | `knolling` | Organized flat-lay |
| `lego-brick` | Toy brick construction, playful | | `lego-brick` | Toy brick construction |
Detailed style definitions: `references/styles/<style>.md` Full definitions: `references/styles/<style>.md`
## Recommended Combinations ## Recommended Combinations
Based on content analysis, the system recommends 3-5 layout×style combinations: | Content Type | Layout + Style |
|--------------|----------------|
| Content Type | Recommended Combination |
|--------------|------------------------|
| Timeline/History | `linear-progression` + `craft-handmade` | | Timeline/History | `linear-progression` + `craft-handmade` |
| Step-by-step Process | `linear-progression` + `ikea-manual` | | Step-by-step | `linear-progression` + `ikea-manual` |
| Comparison (A vs B) | `binary-comparison` + `corporate-memphis` | | A vs B | `binary-comparison` + `corporate-memphis` |
| Hierarchy/Levels | `hierarchical-layers` + `craft-handmade` | | Hierarchy | `hierarchical-layers` + `craft-handmade` |
| Relationships/Overlap | `venn-diagram` + `craft-handmade` | | Overlap | `venn-diagram` + `craft-handmade` |
| Conversion/Sales | `funnel` + `corporate-memphis` | | Conversion | `funnel` + `corporate-memphis` |
| Recurring Process | `circular-flow` + `craft-handmade` | | Cycles | `circular-flow` + `craft-handmade` |
| Technical/System | `structural-breakdown` + `technical-schematic` | | Technical | `structural-breakdown` + `technical-schematic` |
| Data/Metrics | `dashboard` + `corporate-memphis` | | Metrics | `dashboard` + `corporate-memphis` |
| Educational/Overview | `bento-grid` + `chalkboard` | | Educational | `bento-grid` + `chalkboard` |
| Journey/Roadmap | `winding-roadmap` + `storybook-watercolor` | | Journey | `winding-roadmap` + `storybook-watercolor` |
| Categories/Types | `periodic-table` + `bold-graphic` | | Categories | `periodic-table` + `bold-graphic` |
**Default combination**: `bento-grid` + `craft-handmade` Default: `bento-grid` + `craft-handmade`
## File Structure ## Output Structure
Each session creates an independent directory:
``` ```
infographic/{topic-slug}/ infographic/{topic-slug}/
├── source-{slug}.{ext} # Source files ├── source-{slug}.{ext}
├── analysis.md # Deep content analysis ├── analysis.md
├── structured-content.md # Instructional content structure ├── structured-content.md
├── prompts/ ├── prompts/infographic.md
│ └── infographic.md # Generated prompt └── infographic.png
└── infographic.png # Output image
``` ```
**Slug Generation**: Slug: 2-4 words kebab-case from topic. Conflict: append `-YYYYMMDD-HHMMSS`.
1. Extract main topic from content (2-4 words, kebab-case)
2. Example: "Machine Learning Basics" → `ml-basics`
**Conflict Resolution**: ## Core Principles
If `infographic/{topic-slug}/` already exists:
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
- Example: `ml-basics` exists → `ml-basics-20260120-103052`
## Instructional Design Approach - Preserve all source data **verbatim**—no summarization or rephrasing
- Define learning objectives before structuring content
This skill applies a **world-class instructional designer** mindset to infographic creation: - Structure for visual communication (headlines, labels, visual elements)
1. **Deep Understanding**: Read and comprehend the source material thoroughly
2. **Learning Objectives**: Identify what the viewer should understand after seeing the infographic
3. **Information Architecture**: Structure content for maximum clarity and retention
4. **Visual Storytelling**: Use visuals to communicate complex ideas accessibly
5. **Verbatim Data**: Preserve all source data exactly as written—no summarization or rephrasing of facts
## Workflow ## Workflow
### Step 1: Analyze Content → `analysis.md` ### Step 1: Setup & Analyze
Read source content and perform deep instructional analysis. **1.1 Load Preferences (EXTEND.md)**
**Actions**: Use Bash to check EXTEND.md existence (priority order):
1. **Save source content** (if not already a file):
- If user provides a file path: use as-is
- If user pastes content: save to `source.md` in target directory
2. **Deep reading**: ```bash
- Read the entire document thoroughly # Check project-level first
- Develop deep understanding before proceeding test -f .baoyu-skills/baoyu-infographic/EXTEND.md && echo "project"
- Identify the core message and purpose
3. **Content analysis**: # Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
| Aspect | Questions to Answer | test -f "$HOME/.baoyu-skills/baoyu-infographic/EXTEND.md" && echo "user"
|--------|---------------------|
| **Main Topic** | What is this content fundamentally about? |
| **Data Type** | Timeline? Hierarchy? Comparison? Process? Relationships? |
| **Complexity** | Simple (3-5 points) or complex (6-10+ points)? |
| **Tone** | Technical, educational, playful, serious, persuasive? |
| **Audience** | Who is the intended viewer? What do they already know? |
4. **Language detection**:
- Detect **source language** from content
- Detect **user language** from conversation
- Note if source_language ≠ user_language (will ask in Step 4)
5. **Extract design instructions** from user input:
- Style preferences (colors, mood, aesthetic)
- Layout preferences (structure, organization)
- Any specific visual requirements
- Separate these from content—they go in the Design Instructions section
6. **Save to `analysis.md`**
**Analysis Output Format**:
```yaml
---
title: "[Main topic title]"
topic: "[Category: educational/technical/business/etc.]"
data_type: "[timeline/hierarchy/comparison/process/etc.]"
complexity: "[simple/moderate/complex]"
source_language: "[detected language]"
user_language: "[user's language]"
---
## Main Topic
[1-2 sentence summary of what this content is about]
## Learning Objectives
After viewing this infographic, the viewer should understand:
1. [Primary objective]
2. [Secondary objective]
3. [Tertiary objective if applicable]
## Target Audience
- **Knowledge Level**: [Beginner/Intermediate/Expert]
- **Context**: [Why they're viewing this]
- **Expectations**: [What they hope to learn]
## Content Type Analysis
- **Data Structure**: [How information relates to itself]
- **Key Relationships**: [What connects to what]
- **Visual Opportunities**: [What can be shown rather than told]
## Design Instructions (from user input)
[Any style, color, layout, or visual preferences extracted from user's steering prompt]
``` ```
┌────────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├────────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-infographic/EXTEND.md │ Project directory │
├────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-infographic/EXTEND.md │ User home │
└────────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ Result │ Action │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found │ Read, parse, display summary │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ Ask user with AskUserQuestion (see references/config/first-time-setup.md) │
└───────────┴───────────────────────────────────────────────────────────────────────────┘
**EXTEND.md Supports**: Preferred layout/style | Default aspect ratio | Custom style definitions | Language preference
Schema: `references/config/preferences-schema.md`
**1.2 Analyze Content → `analysis.md`**
1. Save source content (file path or paste → `source.md`)
2. Analyze: topic, data type, complexity, tone, audience
3. Detect source language and user language
4. Extract design instructions from user input
5. Save analysis
See `references/analysis-framework.md` for detailed format.
### Step 2: Generate Structured Content → `structured-content.md` ### Step 2: Generate Structured Content → `structured-content.md`
Transform analyzed content into a structured format for the infographic designer. Transform content into infographic structure:
1. Title and learning objectives
2. Sections with: key concept, content (verbatim), visual element, text labels
3. Data points (all statistics/quotes copied exactly)
4. Design instructions from user
**Instructional Design Process**: **Rules**: Markdown only. No new information. All data verbatim.
1. **Create high-level outline**: See `references/structured-content-template.md` for detailed format.
- Title that captures the essence
- List all main learning objectives
- Identify the logical flow
2. **Flesh out each section**: ### Step 3: Recommend Combinations
- For each learning objective, create a section
- Mix conceptual explanations with practical elements
- Preserve all source data **verbatim**—do not summarize or rephrase
3. **Structure for visual communication**: Recommend 3-5 layout×style combinations based on:
- Identify what becomes a headline - Data structure → matching layout
- Identify what becomes supporting text - Content tone → matching style
- Identify what becomes a visual element - Audience expectations
- Identify data points, statistics, or quotes - User design instructions
**Critical Rules**:
| Rule | Requirement |
|------|-------------|
| **Output format** | Markdown only |
| **Tone** | Expert trainer: knowledgeable, clear, encouraging |
| **No new information** | Do not add anything not in the source |
| **Verbatim data** | All statistics, quotes, and facts copied exactly |
**Structured Content Format**:
```markdown
# [Infographic Title]
## Overview
[Brief description of what this infographic conveys]
## Learning Objectives
The viewer will understand:
1. [Objective 1]
2. [Objective 2]
3. [Objective 3]
---
## Section 1: [Section Title]
**Key Concept**: [One-sentence summary]
**Content**:
- [Point 1 - verbatim from source]
- [Point 2 - verbatim from source]
- [Point 3 - verbatim from source]
**Visual Element**: [What to show visually]
**Text Labels**:
- Headline: "[Exact text for headline]"
- Subhead: "[Exact text for subhead]"
- Labels: "[Label 1]", "[Label 2]", ...
---
## Section 2: [Section Title]
[Continue pattern...]
---
## Data Points (Verbatim)
[All statistics, numbers, quotes exactly as they appear in source]
- "[Exact quote or statistic 1]"
- "[Exact quote or statistic 2]"
---
## Design Instructions
[Extracted from user's steering prompt]
- Style: [preferences]
- Colors: [preferences]
- Layout: [preferences]
- Other: [any other visual requirements]
```
### Step 3: Generate Layout×Style Recommendations
Based on analysis and structured content, recommend 3-5 combinations.
**Selection Criteria**:
| Factor | How to Match |
|--------|--------------|
| **Data structure** | Timeline→linear-progression, Hierarchy→hierarchical-layers, etc. |
| **Content tone** | Technical→technical-schematic, Playful→kawaii, etc. |
| **Audience** | Business→corporate-memphis, Educational→chalkboard, etc. |
| **Complexity** | Simple→sparse layouts, Complex→dense layouts |
| **User preferences** | Honor any design instructions from Step 1 |
**Format each recommendation**:
```
[Layout] + [Style]: [Brief rationale based on content analysis]
```
### Step 4: Confirm Options ### Step 4: Confirm Options
**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Present all options in single confirmation:
1. **Combination** (always): 3+ options with rationale
**Questions to ask**: 2. **Aspect** (always): landscape/portrait/square
3. **Language** (only if source ≠ user language): which language for text
| Question | When to Ask |
|----------|-------------|
| Combination | Always (required) |
| Aspect ratio | Always |
| Language | Only if `source_language ≠ user_language` |
**AskUserQuestion format**:
**Question 1 (Combination)** - always:
- Option A (Recommended): [layout] + [style] - [brief rationale]
- Option B: [layout] + [style] - [brief rationale]
- Option C: [layout] + [style] - [brief rationale]
- Custom: Specify your own layout and/or style
**Question 2 (Aspect)** - always:
- landscape (16:9, Recommended) - standard presentation
- portrait (9:16) - mobile/social media
- square (1:1) - social media posts
**Question 3 (Language)** - only if source ≠ user language:
- [Source language] (matches content)
- [User language] (your preference)
**Language handling**:
- If source language = user language: Just inform user
- If different: Ask which language to use for all text
### Step 5: Generate Prompt → `prompts/infographic.md` ### Step 5: Generate Prompt → `prompts/infographic.md`
Create the image generation prompt. Combine:
1. Layout definition from `references/layouts/<layout>.md`
**Process**: 2. Style definition from `references/styles/<style>.md`
1. Read layout definition from `references/layouts/<layout>.md` 3. Base template from `references/base-prompt.md`
2. Read style definition from `references/styles/<style>.md` 4. Structured content from Step 2
3. Read base prompt template from `references/base-prompt.md` 5. All text in confirmed language
4. Combine with structured content from Step 2
5. **All text in prompt uses confirmed language**
**Prompt Structure**:
```markdown
Topic: [main topic from analysis]
Layout: [selected layout]
Style: [selected style]
Aspect: [confirmed ratio]
Language: [confirmed language]
## Layout Guidelines
[From layout definition file]
## Style Guidelines
[From style definition file]
## Content to Visualize
### Learning Objectives
[From structured-content.md]
### Sections
[From structured-content.md - each section with its visual elements]
### Data Points (Verbatim)
[All exact statistics, quotes, and facts from source]
## Text Labels (in [language])
[All text that appears in the infographic, organized by section]
## Design Instructions
[Any specific visual requirements from user's steering prompt]
```
### Step 6: Generate Image ### Step 6: Generate Image
**Image Generation Skill Selection**: 1. Select available image generation skill (ask user if multiple)
1. Check available image generation skills 2. Call with prompt file and output path
2. If multiple skills available, ask user to choose 3. On failure, auto-retry once
**Generation**:
Call selected image generation skill with:
- Prompt file path: `prompts/infographic.md`
- Output path: `infographic.png`
- Aspect ratio parameter if supported
**Error handling**:
- On failure, auto-retry once before reporting error
- If retry fails, inform user with error details
### Step 7: Output Summary ### Step 7: Output Summary
``` Report: topic, layout, style, aspect, language, output path, files created.
Infographic Generated!
Topic: [topic from analysis]
Layout: [layout name]
Style: [style name]
Aspect: [aspect ratio]
Language: [confirmed language]
Location: [output directory path]
Learning Objectives Covered:
1. [Objective 1] ✓
2. [Objective 2] ✓
3. [Objective 3] ✓
Files:
✓ analysis.md
✓ structured-content.md
✓ prompts/infographic.md
✓ infographic.png
Preview the image to verify it matches your expectations.
```
## Quality Checklist
Before generating the final image, verify:
- [ ] All source data preserved verbatim (no summarization)
- [ ] Learning objectives clearly represented
- [ ] Layout matches information structure
- [ ] Style matches content tone and audience
- [ ] All text labels in correct language
- [ ] Design instructions from user honored
- [ ] Visual hierarchy supports comprehension
## References ## References
Detailed templates and guidelines in `references/` directory: - `references/analysis-framework.md` - Analysis methodology
- `analysis-framework.md` - Instructional design analysis methodology - `references/structured-content-template.md` - Content format
- `structured-content-template.md` - Structured content format and examples - `references/base-prompt.md` - Prompt template
- `base-prompt.md` - Base prompt template for image generation - `references/layouts/<layout>.md` - 20 layout definitions
- `layouts/<layout>.md` - Detailed layout definitions (20 files) - `references/styles/<style>.md` - 17 style definitions
- `styles/<style>.md` - Detailed style definitions (17 files)
## Notes
- Layout determines information architecture; style determines visual treatment
- Default style `craft-handmade` works well with most layouts
- Technical content benefits from `technical-schematic` or `ui-wireframe`
- Educational content works well with `chalkboard`, `storybook-watercolor`
- Business content pairs with `corporate-memphis`, `dashboard`
- All text in the infographic uses the confirmed language
- **Never add information not present in the source document**
- **Statistics and quotes must be copied exactly—no paraphrasing**
## Extension Support ## Extension Support
Custom styles and configurations via EXTEND.md. Custom configurations via EXTEND.md. See **Step 1.1** for paths and supported options.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-infographic/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-infographic/EXTEND.md` (user)
If found, load before Step 1. Extension content overrides defaults.
skills/baoyu-infographic/references/layouts/bento-grid.md
+1 -1
View File
@@ -36,6 +36,6 @@ Modular grid layout with varied cell sizes, like a bento box.
## Recommended Pairings ## Recommended Pairings
- `cartoon-hand-drawn`: Friendly overviews (default) - `craft-handmade`: Friendly overviews (default)
- `corporate-memphis`: Business summaries - `corporate-memphis`: Business summaries
- `pixel-art`: Retro feature grids - `pixel-art`: Retro feature grids
skills/baoyu-infographic/references/styles/craft-handmade.md
+8
View File
@@ -21,8 +21,16 @@ Hand-drawn and paper craft aesthetic with warm, organic feel.
- Organic, slightly imperfect shapes - Organic, slightly imperfect shapes
- Layered depth with shadows (paper variant) - Layered depth with shadows (paper variant)
- Simple cartoon elements and icons - Simple cartoon elements and icons
- Character illustrations (people, personalities in cartoon form)
- Ample whitespace, clean composition - Ample whitespace, clean composition
- Keywords and core concepts highlighted - Keywords and core concepts highlighted
- **Strictly hand-drawn—no realistic or photographic elements**
## Style Enforcement
- All imagery must maintain cartoon/illustrated aesthetic
- Replace real photos or realistic figures with hand-drawn equivalents
- Maintain consistent line weight and illustration style throughout
## Typography ## Typography
skills/baoyu-xhs-images/SKILL.md
+59 -34
View File
@@ -164,11 +164,11 @@ Copy and track progress:
``` ```
XHS Infographic Progress: XHS Infographic Progress:
- [ ] Step 0: Check preferences (EXTEND.md) - [ ] Step 0: Check preferences (EXTEND.md) ⚠️ REQUIRED if not found
- [ ] Step 1: Analyze content → analysis.md - [ ] Step 1: Analyze content → analysis.md
- [ ] Step 2: Confirmation 1 - Content understanding ⚠️ REQUIRED - [ ] Step 2: Confirmation 1 - Content understanding ⚠️ REQUIRED
- [ ] Step 3: Generate 3 outline + style variants - [ ] Step 3: Generate 3 outline + style variants
- [ ] Step 4: Confirmation 2 - Outline & style selection ⚠️ REQUIRED - [ ] Step 4: Confirmation 2 - Outline & style & elements selection ⚠️ REQUIRED
- [ ] Step 5: Generate images (sequential) - [ ] Step 5: Generate images (sequential)
- [ ] Step 6: Completion report - [ ] Step 6: Completion report
``` ```
@@ -176,33 +176,48 @@ XHS Infographic Progress:
### Flow ### Flow
``` ```
Input → Analyze → [Confirm 1] → 3 Outlines → [Confirm 2: Outline + Style] → Generate → Complete Input → Analyze → [Confirm 1] → 3 Outlines → [Confirm 2: Outline + Style + Elements] → Generate → Complete
``` ```
### Step 0: Check Preferences ### Step 0: Load Preferences (EXTEND.md) ⚠️
**Check paths** (priority order): **Purpose**: Load user preferences or run first-time setup. **Do NOT skip setup if EXTEND.md not found.**
1. `.baoyu-skills/baoyu-xhs-images/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` (user)
**If preferences found**: Use Bash to check EXTEND.md existence (priority order):
1. Parse YAML frontmatter
2. Display current preferences summary:
```
Loaded preferences from [path]:
- Watermark: [enabled/disabled] "[content]" at [position]
- Style: [name] - [description]
- Layout: [layout]
- Language: [lang]
```
3. Continue to Step 1
**If NO preferences found**: ```bash
1. Ask user with AskUserQuestion (see `references/config/first-time-setup.md`) # Check project-level first
2. Create EXTEND.md with user choices test -f .baoyu-skills/baoyu-xhs-images/EXTEND.md && echo "project"
3. Continue to Step 1
Schema reference: `references/config/preferences-schema.md` # Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md" && echo "user"
```
┌────────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├────────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-xhs-images/EXTEND.md │ Project directory │
├────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md │ User home │
└────────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ Result │ Action │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found │ Read, parse, display summary → Continue to Step 1 │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ ⚠️ MUST run first-time setup (see below) → Then continue to Step 1 │
└───────────┴───────────────────────────────────────────────────────────────────────────┘
**First-Time Setup** (when EXTEND.md not found):
**Language**: Use user's input language or saved language preference.
Use AskUserQuestion with ALL questions in ONE call. See `references/config/first-time-setup.md` for question details.
**EXTEND.md Supports**: Watermark | Preferred style/layout | Custom style definitions | Language preference
Schema: `references/config/preferences-schema.md`
### Step 1: Analyze Content → `analysis.md` ### Step 1: Analyze Content → `analysis.md`
@@ -262,6 +277,11 @@ strategy: a # a, b, or c
name: Story-Driven name: Story-Driven
style: warm # recommended style for this strategy style: warm # recommended style for this strategy
style_reason: "Warm tones enhance emotional storytelling and personal connection" style_reason: "Warm tones enhance emotional storytelling and personal connection"
elements: # from style preset, can be customized in Step 4
background: solid-pastel
decorations: [clouds, stars-sparkles]
emphasis: star-burst
typography: highlight
layout: balanced # primary layout layout: balanced # primary layout
image_count: 5 image_count: 5
--- ---
@@ -289,15 +309,15 @@ image_count: 5
Reference: `references/workflows/outline-template.md` Reference: `references/workflows/outline-template.md`
### Step 4: Confirmation 2 - Outline & Style Selection ⚠️ ### Step 4: Confirmation 2 - Outline & Style & Elements Selection ⚠️
**Purpose**: User chooses outline strategy AND confirms visual style. **Do NOT skip.** **Purpose**: User chooses outline strategy, confirms visual style, and customizes elements. **Do NOT skip.**
**Display each strategy**: **Display each strategy**:
- Strategy name + page count + recommended style - Strategy name + page count + recommended style
- Page-by-page summary (P1 → P2 → P3...) - Page-by-page summary (P1 → P2 → P3...)
**Use AskUserQuestion** with two questions: **Use AskUserQuestion** with three questions:
**Question 1: Outline Strategy** **Question 1: Outline Strategy**
- Strategy A (Recommended if "authentic sharing") - Strategy A (Recommended if "authentic sharing")
@@ -310,11 +330,22 @@ Reference: `references/workflows/outline-template.md`
- Or select from: cute / fresh / warm / bold / minimal / retro / pop / notion / chalkboard - Or select from: cute / fresh / warm / bold / minimal / retro / pop / notion / chalkboard
- Or type custom style description - Or type custom style description
**Question 3: Visual Elements** (show after style selection)
Display the selected style's default elements from preset, then ask:
- Use style defaults (Recommended) - show preview: background, decorations, emphasis
- Adjust background - options: solid-pastel / solid-saturated / gradient-linear / gradient-radial / paper-texture / grid
- Adjust decorations - options: hearts / stars-sparkles / flowers / clouds / leaves / confetti
- Type custom element preferences
**After response**: **After response**:
- Single strategy → copy to `outline.md` with confirmed style - Single strategy → copy to `outline.md` with confirmed style
- Combination → merge specified pages with confirmed style - Combination → merge specified pages with confirmed style
- Custom request → regenerate based on feedback - Custom request → regenerate based on feedback
- Update `outline.md` frontmatter with final style choice - Style defaults → use preset's Element Combination as-is
- Background adjustment → update elements.background with user choice
- Decorations adjustment → update elements.decorations with user choice
- Custom elements → parse user's preferences into elements fields
- Update `outline.md` frontmatter with final style and elements
### Step 5: Generate Images ### Step 5: Generate Images
@@ -428,10 +459,4 @@ Detailed templates in `references/` directory:
## Extension Support ## Extension Support
Custom configurations via EXTEND.md. Loaded in Step 0, overrides defaults. Custom configurations via EXTEND.md. See **Step 0** for paths and supported options.
**Check paths** (priority): `.baoyu-skills/baoyu-xhs-images/EXTEND.md` (project) → `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` (user)
**Supports**: Watermark | Preferred style/layout | Custom style definitions
**References**: `config/preferences-schema.md` | `config/first-time-setup.md`
skills/baoyu-xhs-images/references/config/first-time-setup.md
+1 -1
View File
@@ -31,7 +31,7 @@ No EXTEND.md found
## Questions ## Questions
**Language**: Use user's input language or preferred language for all questions. Do not always use English. **Language**: Use user's input language or saved language preference.
Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option): Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option):