chore(工作区): 全量入库 + 补齐 .gitignore（以工作区为准）
- 变更规模：新增 514 / 修改 62 / 重命名 155 / 删除 4（归档重组与文档轮次） - .gitignore 修：`归档/**/db-cwd归一-备份-*/` —— 原规则写绝对层级（归档/db-cwd归一-…）， 目录搬进 归档/配置与备份/ 后**静默失效**，43 MB 的 DB 备份又变成未跟踪 - .gitignore 补：嵌套 git 内部数据（归档/内嵌git-20261008/、归档/skills-git-旧线-20261007/dotgit-原样移出/） - .gitignore 补：运行态与部署副本（.workbuddy/collab/、.workbuddy/tools/、.workbuddy/.load-pending、.workbuddy/tmp-*） - .gitignore 补：备份件（*.bak-*） - 未跟踪文件从 2190 降到 890（其余为 归档/ 归档件与 .workbuddy/memory/ 知识文件，按口径入库）
This commit is contained in:
admin committed
1 parent
30b46dbd0c
commit
c1b5e4d966
735 files changed
+153192
-2415
No files matched your search
@@ -0,0 +1,117 @@
|
||||
---
|
||||
name: infographic-maker
|
||||
description: "Generate hand-drawn cartoon-style infographics from articles, concepts, reports, or data. Use when a user wants a visual summary, knowledge card, illustrated overview, or one-page explainer. Distill 3-7 key points, map them to concrete visual metaphors, and produce a single 16:9 infographic image with minimal text and strong visual hierarchy."
|
||||
description_zh: "把文章、概念和数据提炼成手绘卡通信息图"
|
||||
description_en: "Turn articles, concepts, and data into hand-drawn infographic visuals"
|
||||
display_name: "infographic-maker"
|
||||
display_name_en: "infographic-maker"
|
||||
visibility: "public"
|
||||
---
|
||||
|
||||
# Infographic Maker
|
||||
|
||||
## Overview
|
||||
|
||||
Transform any input content — articles, concepts, data, meeting notes, or ideas — into a visually engaging, hand-drawn cartoon-style infographic. The output is a single 16:9 landscape image optimized for quick comprehension and visual memorability.
|
||||
|
||||
## Workflow
|
||||
|
||||
### Phase 1: Content Analysis & Distillation
|
||||
|
||||
Before generating any image, analyze the input content thoroughly:
|
||||
|
||||
1. **Identify the core theme** — Determine the single overarching topic or message.
|
||||
2. **Extract 3-7 key points** — Distill the most important facts, concepts, or takeaways. Prefer odd numbers (3, 5, 7) for visual balance.
|
||||
3. **Determine visual metaphors** — For each key point, identify a concrete visual element (icon, character, object, scene) that can represent it.
|
||||
4. **Detect language** — Unless the user explicitly requests a specific language, match the language of the input content for all text in the infographic.
|
||||
5. **Identify notable figures** — If the content mentions well-known people, plan to include simplified cartoon portraits (not realistic).
|
||||
|
||||
### Phase 2: Prompt Construction
|
||||
|
||||
Construct the image generation prompt following these mandatory style rules. Refer to `references/style-guide.md` for detailed prompt patterns and examples.
|
||||
|
||||
#### Mandatory Style Constraints
|
||||
|
||||
- **Art style**: Hand-drawn, sketch-like, cartoon illustration. Thick outlines, slightly imperfect lines, warm and friendly aesthetic.
|
||||
- **Composition**: Landscape orientation (16:9 ratio). Use `size: "1536x1024"` in the image generation call.
|
||||
- **Layout**: Clear visual hierarchy with a prominent title area. Content flows logically (top-to-bottom, left-to-right, or radial). Generous whitespace between elements.
|
||||
- **Typography**: All text rendered in hand-drawn lettering style. Title text large and bold. Supporting text minimal — keywords and short phrases only, never full sentences.
|
||||
- **Color palette**: Soft, muted tones with 2-3 accent colors. Avoid neon or overly saturated colors. Pastel backgrounds work well.
|
||||
- **Elements**: Simple cartoon icons, doodle-style illustrations, hand-drawn arrows/connectors, speech bubbles, banners, and frames. No photorealistic elements whatsoever.
|
||||
- **People**: If depicting people, use simplified cartoon characters with exaggerated features. For famous figures, use recognizable but stylized caricatures.
|
||||
- **Information density**: Less is more. Highlight keywords and core concepts only. Aim for instant comprehension — the viewer should grasp the main message within 5 seconds.
|
||||
|
||||
#### Prompt Template
|
||||
|
||||
Build prompts using this structure:
|
||||
|
||||
```
|
||||
A hand-drawn cartoon infographic about [TOPIC], landscape 16:9 format.
|
||||
|
||||
Title: "[TITLE TEXT]" in bold hand-lettered style at the top.
|
||||
|
||||
Main content organized as [LAYOUT TYPE: grid/flow/radial/timeline]:
|
||||
- [Key point 1 with visual element description]
|
||||
- [Key point 2 with visual element description]
|
||||
- [Key point 3 with visual element description]
|
||||
...
|
||||
|
||||
Style: hand-drawn sketch illustration, thick outlines, soft pastel colors with [ACCENT COLOR] highlights, doodle icons, whitespace-rich layout, cartoon characters, no photorealistic elements. All text in hand-drawn lettering. [LANGUAGE] text only.
|
||||
```
|
||||
|
||||
### Phase 3: Image Generation
|
||||
|
||||
Generate the infographic using the image generation capability:
|
||||
|
||||
- **Size**: Always use `1536x1024` (landscape 16:9).
|
||||
- **Quality**: Use high quality for better detail in text and illustrations.
|
||||
- **Style**: Prefer a natural rendering style to keep the hand-drawn feel organic.
|
||||
|
||||
If the current task is complex or multi-step, and generating the infographic is one step among many, consider delegating the generation to a sub-agent. This allows:
|
||||
- The main agent to continue with other work while the image generates.
|
||||
- A focused sub-agent to handle prompt refinement and generation quality.
|
||||
- Post-generation review before continuing the main task.
|
||||
|
||||
When delegating to a sub-agent, include the full constructed prompt and all style constraints in the task description.
|
||||
|
||||
### Phase 4: Review & Iteration
|
||||
|
||||
After generation, briefly assess the output:
|
||||
|
||||
1. Does it capture the core theme?
|
||||
2. Are key points visually distinguishable?
|
||||
3. Is the text readable and in the correct language?
|
||||
4. Does it maintain the hand-drawn aesthetic?
|
||||
|
||||
If the user requests adjustments, iterate by modifying the prompt and regenerating. Common adjustments include:
|
||||
- Adding/removing key points
|
||||
- Changing the color scheme
|
||||
- Adjusting information density
|
||||
- Switching layout structure
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Example 1: Article Summary
|
||||
|
||||
**User**: "帮我把这篇关于量子计算的文章做成信息图"
|
||||
|
||||
**Action**: Read the article → Extract core concepts (叠加态、量子纠缠、量子门、量子优势) → Construct prompt with science-themed cartoon elements (atoms, cats, circuits) → Generate with Chinese text.
|
||||
|
||||
### Example 2: Concept Explanation
|
||||
|
||||
**User**: "Create an infographic explaining the Agile methodology"
|
||||
|
||||
**Action**: Identify key Agile concepts (sprints, standups, retrospectives, user stories, continuous delivery) → Use a cyclical layout → Include cartoon characters in a team setting → Generate with English text.
|
||||
|
||||
### Example 3: Data Highlights
|
||||
|
||||
**User**: "把这份年度报告的关键数据做成信息图"
|
||||
|
||||
**Action**: Extract top 5 data points → Use large hand-drawn numbers with supporting illustrations → Organize in a clear visual hierarchy → Generate with matching language.
|
||||
|
||||
## Important Notes
|
||||
|
||||
- The image generation model may not always render long text perfectly. Focus prompts on visual elements and keep text elements minimal.
|
||||
- For content with more than 7 key points, prioritize the most important ones and group related points together.
|
||||
- When the input is very long (articles, reports), summarize aggressively — the infographic should be a visual abstract, not a transcript.
|
||||
- Always preserve the hand-drawn aesthetic. Never mix in photorealistic elements, stock photo styles, or 3D renders.
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"name": "Infographic Maker",
|
||||
"installedAt": 1790916750694,
|
||||
"source": "marketplace",
|
||||
"version": "1.0.0",
|
||||
"skillId": "skill_2053082171331530752",
|
||||
"installedContentHash": "sha256:802675eaa7d97aa2d5e1b450fef4e764216391eb8dbe70cf2ed5f27d489ad811"
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
# Infographic Style Guide
|
||||
|
||||
## Prompt Engineering Patterns
|
||||
|
||||
### Core Style Keywords
|
||||
|
||||
Always include these keywords in every prompt to maintain consistency:
|
||||
|
||||
```
|
||||
hand-drawn sketch illustration, thick outlines, soft pastel colors,
|
||||
doodle-style icons, cartoon characters, hand-lettered text,
|
||||
whitespace-rich layout, no photorealistic elements, no 3D renders
|
||||
```
|
||||
|
||||
### Color Palette Presets
|
||||
|
||||
Select based on content theme:
|
||||
|
||||
| Theme | Primary | Accent | Background |
|
||||
|-------|---------|--------|------------|
|
||||
| Technology | Soft blue | Electric teal | Light gray |
|
||||
| Business | Warm beige | Coral orange | Cream white |
|
||||
| Science | Mint green | Deep purple | Light mint |
|
||||
| Education | Warm yellow | Sky blue | Pale yellow |
|
||||
| Health | Soft pink | Fresh green | White |
|
||||
| Creative | Lavender | Golden yellow | Light purple |
|
||||
| Finance | Sage green | Navy blue | Off-white |
|
||||
|
||||
### Layout Patterns
|
||||
|
||||
#### Grid Layout (best for 4-6 equal-weight points)
|
||||
```
|
||||
Organize content in a [2x2 / 2x3 / 3x2] grid layout.
|
||||
Each cell contains a cartoon icon at the top with a keyword below.
|
||||
Grid separated by hand-drawn dashed lines.
|
||||
```
|
||||
|
||||
#### Flow Layout (best for processes or sequences)
|
||||
```
|
||||
Content flows left-to-right connected by hand-drawn arrows.
|
||||
Each step shown as a doodle vignette with label below.
|
||||
Curved arrows with playful style connecting each step.
|
||||
```
|
||||
|
||||
#### Radial Layout (best for a central concept with related ideas)
|
||||
```
|
||||
Central concept in a large circle at the center.
|
||||
Related ideas radiate outward connected by hand-drawn lines.
|
||||
Each satellite idea has its own small illustration.
|
||||
```
|
||||
|
||||
#### Timeline Layout (best for chronological content)
|
||||
```
|
||||
Horizontal hand-drawn timeline across the center.
|
||||
Events marked with illustrated milestones above and below the line.
|
||||
Dates or labels in hand-drawn banners.
|
||||
```
|
||||
|
||||
#### Comparison Layout (best for vs/pros-cons content)
|
||||
```
|
||||
Split layout with hand-drawn divider in the center.
|
||||
Left and right sides use contrasting accent colors.
|
||||
Matching elements on each side for easy comparison.
|
||||
```
|
||||
|
||||
### Visual Element Library
|
||||
|
||||
Use these descriptions to guide cartoon element generation:
|
||||
|
||||
- **People**: Round heads, dot eyes, simple expressions, exaggerated proportions
|
||||
- **Buildings**: Slightly crooked lines, warm lighting from windows
|
||||
- **Devices**: Simplified shapes, glowing screens, thick bezels
|
||||
- **Nature**: Swirly clouds, simple trees, wavy water
|
||||
- **Data**: Hand-drawn bar charts, pie charts with thick borders, upward arrows
|
||||
- **Connections**: Curvy arrows, dotted lines, speech bubbles, thought clouds
|
||||
- **Emphasis**: Stars, exclamation marks, underlines, highlight boxes, banners
|
||||
|
||||
### Text Rendering Tips
|
||||
|
||||
Since AI image generation has limitations with text rendering:
|
||||
|
||||
1. **Minimize text in the prompt** — Focus on visual elements and use text sparingly.
|
||||
2. **Use short keywords** (1-3 words per label) rather than phrases or sentences.
|
||||
3. **Title text** should be 3-6 words maximum.
|
||||
4. **Prefer icons over labels** where the meaning is obvious.
|
||||
5. **Number lists** rather than label them when possible (1, 2, 3 are rendered more reliably than words).
|
||||
|
||||
### Quality Boosters
|
||||
|
||||
Add these modifiers for higher quality output:
|
||||
|
||||
```
|
||||
professional illustration quality, clean composition,
|
||||
balanced visual weight, cohesive color scheme,
|
||||
editorial illustration style, magazine quality
|
||||
```
|
||||
|
||||
### Negative Guidance
|
||||
|
||||
Explicitly exclude these in complex prompts:
|
||||
|
||||
```
|
||||
no photography, no 3D rendering, no stock photo style,
|
||||
no gradients, no drop shadows, no glossy effects,
|
||||
no realistic textures, no computer-generated look
|
||||
```
|
||||
|
||||
## Full Prompt Examples
|
||||
|
||||
### Example: AI Technology Infographic (Chinese)
|
||||
|
||||
```
|
||||
A hand-drawn cartoon infographic about artificial intelligence key concepts, landscape 16:9 format.
|
||||
|
||||
Title: "AI 核心概念一图读懂" in bold hand-lettered style at the top center, decorated with small doodle stars.
|
||||
|
||||
Main content organized in a 2x3 grid layout:
|
||||
- Top left: A cute robot character with a glowing brain representing "机器学习", with small data dots flowing in
|
||||
- Top center: Two cartoon neural network nodes connected by wavy lines representing "深度学习"
|
||||
- Top right: A speech bubble coming from a computer screen representing "自然语言处理"
|
||||
- Bottom left: A cartoon eye with sparkles representing "计算机视觉"
|
||||
- Bottom center: A robotic arm doing a thumbs up representing "机器人技术"
|
||||
- Bottom right: A crystal ball with graph lines representing "预测分析"
|
||||
|
||||
Each grid cell has a hand-drawn dashed border. Small decorative doodles (gears, lightbulbs, binary code) scattered in the margins.
|
||||
|
||||
Style: hand-drawn sketch illustration, thick outlines, soft blue and teal color palette on light gray background, doodle-style icons, cartoon characters with round heads and dot eyes, hand-lettered Chinese text, whitespace-rich layout, no photorealistic elements. Professional illustration quality, clean composition.
|
||||
```
|
||||
|
||||
### Example: Project Management Infographic (English)
|
||||
|
||||
```
|
||||
A hand-drawn cartoon infographic about agile project management workflow, landscape 16:9 format.
|
||||
|
||||
Title: "The Agile Journey" in bold hand-lettered style at the top, with a small rocket doodle.
|
||||
|
||||
Main content organized as a circular flow layout:
|
||||
- Starting point: A cartoon character with a lightbulb labeled "Backlog"
|
||||
- Arrow flows to: A group of stick figures in a huddle labeled "Sprint Planning"
|
||||
- Arrow flows to: A cartoon calendar with checkmarks labeled "Daily Standup"
|
||||
- Arrow flows to: A small stage with a presenter labeled "Sprint Review"
|
||||
- Arrow flows to: A mirror/magnifying glass labeled "Retrospective"
|
||||
- Curved arrow loops back to Sprint Planning
|
||||
|
||||
Center of the cycle: Large hand-drawn text "ITERATE" with circular arrows.
|
||||
|
||||
Small doodle elements: sticky notes, kanban board, coffee cups, high-five hands scattered around margins.
|
||||
|
||||
Style: hand-drawn sketch illustration, thick outlines, warm yellow and coral orange palette on cream background, cartoon characters, hand-lettered English text, playful and energetic mood, whitespace-rich, no photorealistic elements.
|
||||
```
|
||||
Reference in new issue
Block a user