feat(baoyu-infographic): add dense-modules layout and 3 new styles for high-density infographics
Add dense-modules layout for data-rich guides and 3 new styles: morandi-journal, pop-laboratory, retro-pop-grid. Add keyword shortcuts for 高密度信息大图 auto-selection. Prompt credit: AJ (https://waytoagi.feishu.cn/wiki/YG0zwalijihRREkgmPzcWRInnUg) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
2ce873c65c
commit
d863f11f61
|
|
@ -1,6 +1,6 @@
|
||||||
---
|
---
|
||||||
name: baoyu-infographic
|
name: baoyu-infographic
|
||||||
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 "可视化".
|
description: Generates professional infographics with 21 layout types and 20 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
|
||||||
|
|
@ -20,8 +20,8 @@ Two dimensions: **layout** (information structure) × **style** (visual aestheti
|
||||||
|
|
||||||
| Option | Values |
|
| Option | Values |
|
||||||
|--------|--------|
|
|--------|--------|
|
||||||
| `--layout` | 20 options (see Layout Gallery), default: bento-grid |
|
| `--layout` | 21 options (see Layout Gallery), default: bento-grid |
|
||||||
| `--style` | 17 options (see Style Gallery), default: craft-handmade |
|
| `--style` | 20 options (see Style Gallery), default: craft-handmade |
|
||||||
| `--aspect` | landscape (16:9), portrait (9:16), square (1:1) |
|
| `--aspect` | landscape (16:9), portrait (9:16), square (1:1) |
|
||||||
| `--lang` | en, zh, ja, etc. |
|
| `--lang` | en, zh, ja, etc. |
|
||||||
|
|
||||||
|
|
@ -49,6 +49,7 @@ Two dimensions: **layout** (information structure) × **style** (visual aestheti
|
||||||
| `venn-diagram` | Overlapping concepts |
|
| `venn-diagram` | Overlapping concepts |
|
||||||
| `winding-roadmap` | Journey, milestones |
|
| `winding-roadmap` | Journey, milestones |
|
||||||
| `circular-flow` | Cycles, recurring processes |
|
| `circular-flow` | Cycles, recurring processes |
|
||||||
|
| `dense-modules` | High-density modules, data-rich guides |
|
||||||
|
|
||||||
Full definitions: `references/layouts/<layout>.md`
|
Full definitions: `references/layouts/<layout>.md`
|
||||||
|
|
||||||
|
|
@ -73,6 +74,9 @@ Full definitions: `references/layouts/<layout>.md`
|
||||||
| `ikea-manual` | Minimal line art |
|
| `ikea-manual` | Minimal line art |
|
||||||
| `knolling` | Organized flat-lay |
|
| `knolling` | Organized flat-lay |
|
||||||
| `lego-brick` | Toy brick construction |
|
| `lego-brick` | Toy brick construction |
|
||||||
|
| `pop-laboratory` | Blueprint grid, coordinate markers, lab precision |
|
||||||
|
| `morandi-journal` | Hand-drawn doodle, warm Morandi tones |
|
||||||
|
| `retro-pop-grid` | 1970s retro pop art, Swiss grid, thick outlines |
|
||||||
|
|
||||||
Full definitions: `references/styles/<style>.md`
|
Full definitions: `references/styles/<style>.md`
|
||||||
|
|
||||||
|
|
@ -92,9 +96,23 @@ Full definitions: `references/styles/<style>.md`
|
||||||
| Educational | `bento-grid` + `chalkboard` |
|
| Educational | `bento-grid` + `chalkboard` |
|
||||||
| Journey | `winding-roadmap` + `storybook-watercolor` |
|
| Journey | `winding-roadmap` + `storybook-watercolor` |
|
||||||
| Categories | `periodic-table` + `bold-graphic` |
|
| Categories | `periodic-table` + `bold-graphic` |
|
||||||
|
| Product Guide | `dense-modules` + `morandi-journal` |
|
||||||
|
| Technical Guide | `dense-modules` + `pop-laboratory` |
|
||||||
|
| Trendy Guide | `dense-modules` + `retro-pop-grid` |
|
||||||
|
|
||||||
Default: `bento-grid` + `craft-handmade`
|
Default: `bento-grid` + `craft-handmade`
|
||||||
|
|
||||||
|
## Keyword Shortcuts
|
||||||
|
|
||||||
|
When user input contains these keywords, **auto-select** the associated layout and offer associated styles as top recommendations in Step 3. Skip content-based layout inference for matched keywords.
|
||||||
|
|
||||||
|
If a shortcut has **Prompt Notes**, append them to the generated prompt (Step 5) as additional style instructions.
|
||||||
|
|
||||||
|
| User Keyword | Layout | Recommended Styles | Default Aspect | Prompt Notes |
|
||||||
|
|--------------|--------|--------------------|----------------|--------------|
|
||||||
|
| 高密度信息大图 / high-density-info | `dense-modules` | `morandi-journal`, `pop-laboratory`, `retro-pop-grid` | portrait | — |
|
||||||
|
| 信息图 / infographic | `bento-grid` | `craft-handmade` | landscape | Minimalist: clean canvas, ample whitespace, no complex background textures. Simple cartoon elements and icons only. |
|
||||||
|
|
||||||
## Output Structure
|
## Output Structure
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
@ -176,7 +194,9 @@ See `references/structured-content-template.md` for detailed format.
|
||||||
|
|
||||||
### Step 3: Recommend Combinations
|
### Step 3: Recommend Combinations
|
||||||
|
|
||||||
Recommend 3-5 layout×style combinations based on:
|
**3.1 Check Keyword Shortcuts first**: If user input matches a keyword from the **Keyword Shortcuts** table, auto-select the associated layout and prioritize associated styles as top recommendations. Skip content-based layout inference.
|
||||||
|
|
||||||
|
**3.2 Otherwise**, recommend 3-5 layout×style combinations based on:
|
||||||
- Data structure → matching layout
|
- Data structure → matching layout
|
||||||
- Content tone → matching style
|
- Content tone → matching style
|
||||||
- Audience expectations
|
- Audience expectations
|
||||||
|
|
@ -222,8 +242,8 @@ Report: topic, layout, style, aspect, language, output path, files created.
|
||||||
- `references/analysis-framework.md` - Analysis methodology
|
- `references/analysis-framework.md` - Analysis methodology
|
||||||
- `references/structured-content-template.md` - Content format
|
- `references/structured-content-template.md` - Content format
|
||||||
- `references/base-prompt.md` - Prompt template
|
- `references/base-prompt.md` - Prompt template
|
||||||
- `references/layouts/<layout>.md` - 20 layout definitions
|
- `references/layouts/<layout>.md` - 21 layout definitions
|
||||||
- `references/styles/<style>.md` - 17 style definitions
|
- `references/styles/<style>.md` - 20 style definitions
|
||||||
|
|
||||||
## Extension Support
|
## Extension Support
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -38,7 +38,8 @@ Approach content analysis as a **world-class instructional designer**:
|
||||||
| **Cycle/Loop** | Recurring processes, feedback loops | circular-flow | craft-handmade, technical-schematic |
|
| **Cycle/Loop** | Recurring processes, feedback loops | circular-flow | craft-handmade, technical-schematic |
|
||||||
| **System/Structure** | Components, architecture, anatomy | structural-breakdown, bento-grid | technical-schematic, ikea-manual |
|
| **System/Structure** | Components, architecture, anatomy | structural-breakdown, bento-grid | technical-schematic, ikea-manual |
|
||||||
| **Journey/Narrative** | Stories, user flows, milestones | winding-roadmap, story-mountain | storybook-watercolor, comic-strip |
|
| **Journey/Narrative** | Stories, user flows, milestones | winding-roadmap, story-mountain | storybook-watercolor, comic-strip |
|
||||||
| **Overview/Summary** | Multiple topics, feature highlights | bento-grid, periodic-table | chalkboard, bold-graphic |
|
| **Overview/Summary** | Multiple topics, feature highlights | bento-grid, periodic-table, dense-modules | chalkboard, bold-graphic |
|
||||||
|
| **Product/Buying Guide** | Multi-dimension comparisons, specs, pitfalls | dense-modules | morandi-journal, pop-laboratory, retro-pop-grid |
|
||||||
|
|
||||||
### 2. Learning Objective Identification
|
### 2. Learning Objective Identification
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
# dense-modules
|
||||||
|
|
||||||
|
High-density modular layout with 6-7 typed information modules packed with concrete data.
|
||||||
|
|
||||||
|
## Structure
|
||||||
|
|
||||||
|
- 6-7 distinct modules per image, each serving a specific information function
|
||||||
|
- Every module contains concrete data: brand names, numbers, percentages, parameters
|
||||||
|
- Minimal whitespace—compact spacing prioritized over breathing room
|
||||||
|
- Smaller text acceptable to maximize information density
|
||||||
|
- Each module identified by coordinate label or section marker (e.g., MOD-1, SEC-A)
|
||||||
|
|
||||||
|
## Module Archetypes
|
||||||
|
|
||||||
|
| Module | Purpose | Content Requirements |
|
||||||
|
|--------|---------|---------------------|
|
||||||
|
| **Brand/Selection Array** | Grid of options with recommendations | 4-8 items with icons, names, brief descriptions; highlight "best choice" |
|
||||||
|
| **Specification Scale** | Quality/measurement gauge | 3-5 levels with precise numerical increments, quality indicators (emoji faces, checkmarks) |
|
||||||
|
| **Deep Dive/Detail** | Technical breakdown of key item | Zoom-in callouts, internal components, cross-section or exploded view |
|
||||||
|
| **Scenario Comparison** | Side-by-side use cases | 3-6 scenarios with specific recommendations and data per scenario |
|
||||||
|
| **Identification Tips** | How-to checklist | 3-5 inspection methods: look/test/check/ask format |
|
||||||
|
| **Warning/Pitfall Zone** | Critical mistakes to avoid | 3-5 pitfalls with consequences, 1-2 correct approaches; high visual contrast |
|
||||||
|
| **Quick Reference** | Compact summary | Dense table, one-line summaries, decision flowchart, or key takeaways |
|
||||||
|
|
||||||
|
## Variants
|
||||||
|
|
||||||
|
| Variant | Focus | Visual Emphasis |
|
||||||
|
|---------|-------|-----------------|
|
||||||
|
| **Coordinate-labeled** | Precision and systematicity | Each module has alphanumeric coordinate (A-01, B-05, C-12), ruler/axis markers |
|
||||||
|
| **Grid-cell** | Order and structure | Modules in strict rectangular cells divided by thick lines, Swiss grid feel |
|
||||||
|
| **Free-flowing** | Organic density | Magazine-style layout with dotted frames, varying module sizes, connected by arrows |
|
||||||
|
|
||||||
|
## Best For
|
||||||
|
|
||||||
|
- Product selection guides and buying guides
|
||||||
|
- Multi-dimensional comparison content
|
||||||
|
- Data-rich educational materials
|
||||||
|
- "Avoid pitfalls" / "complete guide" formats
|
||||||
|
- Content targeting platforms like Xiaohongshu with high-density visual requirements
|
||||||
|
|
||||||
|
## Visual Elements
|
||||||
|
|
||||||
|
- Module boundary markers (thick lines, dotted frames, or coordinate grids)
|
||||||
|
- Quality indicators per module (emoji faces, checkmarks, crosses, crowns)
|
||||||
|
- Data callout boxes with highlighted numbers
|
||||||
|
- Comparison arrows and progression indicators
|
||||||
|
- Warning/alert visual markers for pitfall modules
|
||||||
|
- Metadata in corners (page numbers, timestamps, small barcodes)
|
||||||
|
|
||||||
|
## Text Placement
|
||||||
|
|
||||||
|
- Main title at top, prominent and impactful
|
||||||
|
- Subtitle with module count ("X大维度全面解析...")
|
||||||
|
- Module headers inside colored badges or labeled frames
|
||||||
|
- Body text compact, multiple columns within modules
|
||||||
|
- Numbers highlighted with accent colors, slightly larger than body text
|
||||||
|
|
||||||
|
## Information Density Rules
|
||||||
|
|
||||||
|
- Every corner should contain useful information or metadata
|
||||||
|
- No decorative-only empty space
|
||||||
|
- Text size may be reduced to fit more content—information over font size
|
||||||
|
- Each module must have specific data points, not generic descriptions
|
||||||
|
- Balance between density and readability: dense but organized
|
||||||
|
|
||||||
|
## Recommended Pairings
|
||||||
|
|
||||||
|
- `pop-laboratory`: Technical precision with coordinate markers and blueprint grid
|
||||||
|
- `morandi-journal`: Hand-drawn warmth with doodle illustrations and organic frames
|
||||||
|
- `retro-pop-grid`: 1970s pop art with strict grid cells and bold contrast
|
||||||
|
- `corporate-memphis`: Clean business feel for product comparisons
|
||||||
|
- `technical-schematic`: Engineering precision for technical product guides
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
# morandi-journal
|
||||||
|
|
||||||
|
Hand-drawn doodle illustration with warm Morandi color tones and cozy bullet journal aesthetic.
|
||||||
|
|
||||||
|
## Color Palette
|
||||||
|
|
||||||
|
- Background: Warm cream/beige with subtle paper texture (#F5F0E6)
|
||||||
|
- Primary: Muted teal/sage green (#7BA3A8) for headers and frames
|
||||||
|
- Secondary: Warm terracotta/orange (#D4956A) for highlights and numbers
|
||||||
|
- Line art: Dark charcoal brown (#4A4540)
|
||||||
|
- Soft highlights: Pale yellow (#F5E6C8)
|
||||||
|
|
||||||
|
## Visual Elements
|
||||||
|
|
||||||
|
- Hand-drawn doodle illustrations with organic, slightly imperfect ink lines
|
||||||
|
- Washi tape strip decorations (diagonal stripes pattern, beige and brown)
|
||||||
|
- Rounded card containers for brand/option items
|
||||||
|
- Hand-drawn rulers, scales, and progress bars with emoji quality indicators
|
||||||
|
- Smiley/frowny faces as quality markers (😊✓ 😐 ☹️✗)
|
||||||
|
- Dotted line frames around sections
|
||||||
|
- Connecting arrows and dotted lines between modules
|
||||||
|
- Corner decorations: tiny houses, stars, sparkles, clouds
|
||||||
|
- Wavy line dividers between sections
|
||||||
|
- Callout bubbles for tips
|
||||||
|
- Magnifying glass icons for identification tips
|
||||||
|
- Thumbs up/down icons (hand-drawn style)
|
||||||
|
|
||||||
|
## Variants
|
||||||
|
|
||||||
|
| Variant | Focus | Visual Emphasis |
|
||||||
|
|---------|-------|-----------------|
|
||||||
|
| **Cozy journal** | Maximum warmth | More washi tape, stickers, decorative doodles |
|
||||||
|
| **Clean sketch** | Readability | Cleaner lines, less decoration, more structured |
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
|
||||||
|
- Main title: Bold hand-lettered calligraphy style with decorative flourishes
|
||||||
|
- Module headers: Clean handwritten text in white on dark teal rounded badge (#6B9080)
|
||||||
|
- Body text: Neat handwritten print style, easy to read
|
||||||
|
- Numbers: Highlighted in terracotta (#D4956A), slightly larger than body
|
||||||
|
|
||||||
|
## Style Enforcement
|
||||||
|
|
||||||
|
- All imagery must maintain hand-drawn/doodle aesthetic—no digital precision
|
||||||
|
- Organic, slightly imperfect shapes throughout
|
||||||
|
- Sketch-like quality with visible line weight variations
|
||||||
|
- Warm and cozy journal feel, not clinical or corporate
|
||||||
|
|
||||||
|
## Avoid
|
||||||
|
|
||||||
|
- Flat vector icons or emoji
|
||||||
|
- Clean geometric shapes
|
||||||
|
- Stock illustration style
|
||||||
|
- Strict grid layout
|
||||||
|
- Pure white background
|
||||||
|
- Digital/corporate look
|
||||||
|
|
||||||
|
## Best For
|
||||||
|
|
||||||
|
Product selection guides, lifestyle content, educational overviews, consumer-facing comparison content, Xiaohongshu-style posts
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
# pop-laboratory
|
||||||
|
|
||||||
|
Lab manual precision meets pop art color impact—coordinate systems, technical diagrams, and fluorescent accents on blueprint grid.
|
||||||
|
|
||||||
|
## Color Palette
|
||||||
|
|
||||||
|
- Background: Professional grayish-white with faint blueprint grid texture (#F2F2F2)
|
||||||
|
- Primary: Muted teal/sage green (#B8D8BE) for major functional blocks and data zones
|
||||||
|
- High-alert accent: Vibrant fluorescent pink (#E91E63) strictly for warnings, critical data, or "winner" highlights
|
||||||
|
- Marker highlights: Vivid lemon yellow (#FFF200) as translucent highlighter effect for keywords
|
||||||
|
- Line art: Ultra-fine charcoal brown (#2D2926) for technical grids, coordinates, and hairlines
|
||||||
|
|
||||||
|
## Visual Elements
|
||||||
|
|
||||||
|
- Coordinate-style labels on every module (e.g., R-20, G-02, SEC-08)
|
||||||
|
- Technical diagrams: exploded views, cross-sections with anchor points, architectural skeletal lines
|
||||||
|
- Vertical/horizontal rulers with precise markers (0.5mm, 1.8mm, 45°)
|
||||||
|
- "Marker-over-print" effect: color blocks slightly offset from text, postmodern print feel
|
||||||
|
- Cross-hair targets, mathematical symbols (Σ, Δ, ∞), directional arrows (X/Y axis)
|
||||||
|
- Microscopic detail annotations alongside macroscopic bold headers
|
||||||
|
- Corner metadata: tiny barcodes, timestamps, technical parameters
|
||||||
|
- High contrast between massive bold headers and tiny 8pt-style annotations
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
|
||||||
|
- Headers: Bold brutalist characters, high visual impact
|
||||||
|
- Body: Professional sans-serif or crisp technical print
|
||||||
|
- Numbers: Large, highlighted with yellow or blue to stand out
|
||||||
|
- Annotations: Ultra-crisp, small technical labels
|
||||||
|
|
||||||
|
## Style Enforcement
|
||||||
|
|
||||||
|
- Strictly systematic color usage: only teal, pink, yellow, charcoal—no rainbow palette
|
||||||
|
- Sufficient fine grid lines and coordinate annotations throughout
|
||||||
|
- Maintain tension between large impactful headers and small precise parameters
|
||||||
|
- Lab manual aesthetic: mix of microscopic details and macroscopic data
|
||||||
|
|
||||||
|
## Avoid
|
||||||
|
|
||||||
|
- Cute or cartoonish doodles
|
||||||
|
- Soft pastels or generic textures
|
||||||
|
- Empty white space
|
||||||
|
- Flat vector stock icons
|
||||||
|
- Organic or hand-drawn imperfections
|
||||||
|
|
||||||
|
## Best For
|
||||||
|
|
||||||
|
Technical product guides, specification comparisons, precision-focused data visualization, engineering-adjacent content
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
# retro-pop-grid
|
||||||
|
|
||||||
|
1970s retro pop art with strict Swiss international grid, thick black outlines, and flat color blocks.
|
||||||
|
|
||||||
|
## Color Palette
|
||||||
|
|
||||||
|
- Background: Warm vintage cream/beige (#F5F0E6)
|
||||||
|
- Flat accents: Salmon pink, sky blue, mustard yellow, mint green—all muted retro tones
|
||||||
|
- Contrast blocks: Solid pure black (#000000) and solid pure white (#FFFFFF) used strategically for extreme contrast
|
||||||
|
- Line art and outlines: Solid thick black
|
||||||
|
|
||||||
|
## Visual Elements
|
||||||
|
|
||||||
|
- Uniform thick black outlines on all illustrations, text boxes, and grid dividers
|
||||||
|
- Pure 2D flat vector aesthetic with subtle screen print texture
|
||||||
|
- Strict Swiss international grid: poster divided into square and rectangular cells by thick black lines
|
||||||
|
- Black-background cells with white text for warnings or key categories (inverted contrast)
|
||||||
|
- Geometric fill patterns in empty cells: checkerboards, diagonal lines, dots
|
||||||
|
- Flat abstract symbols, warning signs, keyholes, stars, arrows
|
||||||
|
- Vintage comic-style smiley/frowny faces for quality indicators
|
||||||
|
- Colored cells used for breathing room—some with minimal/no content
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
|
||||||
|
- Headers: Bold brutalist or retro thick display fonts, high legibility
|
||||||
|
- Body: Clean sans-serif, structured typographic alignment
|
||||||
|
- Decorative English text acceptable for stylistic labels ("WARNING", "INFO", "BEST")
|
||||||
|
- All content text in specified language
|
||||||
|
|
||||||
|
## Style Enforcement
|
||||||
|
|
||||||
|
- Absolutely no gradients, shading, drop shadows, or 3D effects
|
||||||
|
- Everything anchored in grid cells—no floating or unorganized elements
|
||||||
|
- Maintain 1970s retro pop art and underground comic illustration feel
|
||||||
|
- Visual density balanced with rhythmic grid—some cells intentionally sparse for contrast
|
||||||
|
|
||||||
|
## Avoid
|
||||||
|
|
||||||
|
- 3D rendering, realistic details, gradients, soft shadows
|
||||||
|
- Soft, thin, or sketch-like pencil lines
|
||||||
|
- Free-flowing, unorganized, or floating layouts (everything must be grid-anchored)
|
||||||
|
- Pure white background canvas
|
||||||
|
- Organic or hand-drawn imperfections
|
||||||
|
|
||||||
|
## Best For
|
||||||
|
|
||||||
|
Trendy product guides, design-conscious content, visually striking comparisons, content targeting design-savvy audiences, bold social media posts
|
||||||
Loading…
Reference in New Issue