zhongwei/gh-krishagel-geoffrey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-30 08:35:59 +08:00
commit 90883a4d25
287 changed files with 75058 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
skills/image-gen/workflows/diagram.md Normal file
View File

@@ -0,0 +1,214 @@
# Diagram Workflow
Create technical diagrams, flowcharts, architecture diagrams, and process visualizations.
## When to Use
- System architecture documentation
- Process flows and workflows
- Technical explanations
- Decision trees
- Network topologies
- Component relationships
## 6-Step Process
### Step 1: Extract Narrative
**Goal:** Understand the system or process being illustrated.
Questions to answer:
- What system/process is being shown?
- What are the key components?
- What are the relationships between components?
- What is the flow direction (if any)?
- What level of detail is needed?
**Output:** Component list and relationship description.
### Step 2: Derive Visual Concept
**Goal:** Choose the right diagram type.
**Diagram types:**
| Type | Use When |
|------|----------|
| Flowchart | Sequential processes with decisions |
| Architecture | System components and connections |
| Sequence | Time-ordered interactions |
| Network | Interconnected nodes |
| Hierarchy | Parent-child relationships |
| Venn | Overlapping categories |
**Output:** Diagram type and layout direction.
### Step 3: Apply Aesthetic
**Goal:** Define visual style for clarity.
Recommended for diagrams:
- **Colors:** Limited palette (3-5 colors max)
- **Style:** Flat, clean, no gradients
- **Lines:** Consistent weight, clear arrows
- **Shapes:** Simple geometric (rectangles, circles)
- **Labels:** Sans-serif, high contrast
**Color coding conventions:**
- Blue: Primary components
- Green: Success/positive flow
- Red: Error/warning
- Orange: External systems
- Gray: Supporting elements
**Output:** Color scheme and style notes.
### Step 4: Construct Prompt
**Goal:** Build the generation prompt.
**Template:**
```
Create a [diagram type] showing [system/process].
Components:
- [Component 1]: [description]
- [Component 2]: [description]
- [Component 3]: [description]
Relationships:
- [Component 1] connects to [Component 2] via [connection type]
- [Component 2] sends data to [Component 3]
Layout: [direction - left-to-right, top-to-bottom, etc.]
Style: [aesthetic from Step 3]
Labels to include:
- [Label 1]
- [Label 2]
```
**Output:** Complete prompt.
### Step 5: Generate
**Command:**
```bash
uv run scripts/generate.py "[prompt]" output.png [aspect_ratio] 2K
```
**Aspect ratio by diagram type:**
- Flowcharts: 3:2 or 16:9 (horizontal flow)
- Architecture: 4:3 or 1:1 (balanced)
- Sequence: 2:3 (vertical flow)
- Network: 1:1 (balanced)
**Settings:**
- Size: **2K minimum** for label clarity
- Model: gemini-3-pro-image-preview
### Step 6: Validate
**Validation criteria:**
| Criterion | Check |
|-----------|-------|
| Completeness | All components present |
| Accuracy | Relationships correctly shown |
| Readability | All labels legible |
| Flow clarity | Direction is obvious |
| Consistency | Shapes/colors used consistently |
| Simplicity | No unnecessary elements |
**If validation fails:**
- Identify missing or incorrect elements
- Adjust prompt
- Regenerate (max 3 iterations)
## Example Workflow
**Request:** Create a diagram showing a CI/CD pipeline.
### Step 1: Extract Narrative
"CI/CD pipeline with: code commit, build, test, deploy to staging, deploy to production. Shows automated flow with manual approval gates."
Components:
- Git repository
- Build server
- Test suite
- Staging environment
- Production environment
- Approval gates
### Step 2: Visual Concept
Flowchart, left-to-right horizontal flow. Linear pipeline with branching for approval.
### Step 3: Aesthetic
- Blue: Pipeline stages
- Green: Success indicators
- Orange: Approval gates
- Gray: Arrows/connectors
- Style: Flat rectangles with rounded corners, clear directional arrows
### Step 4: Prompt
```
Create a flowchart showing a CI/CD pipeline.
Components:
- Git Repository: Code source
- Build Server: Compiles code
- Test Suite: Runs automated tests
- Staging: Pre-production environment
- Production: Live environment
- Approval Gate: Manual review step
Flow:
- Git Repository -> Build Server -> Test Suite -> Staging -> Approval Gate -> Production
Layout: Horizontal left-to-right flow
Style: Flat design with rounded rectangles. Blue for pipeline stages, green checkmarks for success, orange for approval gate, gray arrows between stages.
Labels: "Code", "Build", "Test", "Stage", "Approve", "Deploy"
```
### Step 5: Generate
```bash
uv run scripts/generate.py "Create a flowchart showing a CI/CD pipeline..." cicd.png 16:9 2K
```
### Step 6: Validate
- All 6 stages present
- Flow direction clear
- Labels readable
- Approval gate distinguished
## Tips for Better Results
1. **Keep it simple** - Fewer components = clearer diagram
2. **Be explicit about connections** - State what connects to what
3. **Specify layout direction** - Avoid ambiguous layouts
4. **Use consistent terminology** - Same names throughout prompt
5. **Include all labels** - List exact text for each component
## Common Issues
| Issue | Solution |
|-------|----------|
| Missing components | List every component explicitly |
| Unclear flow | State direction and connections |
| Overlapping elements | Reduce components or use larger aspect ratio |
| Inconsistent styling | Be more explicit about shapes/colors |
| Wrong diagram type | Reconsider which type fits best |
## Alternative: Mermaid Diagrams
For simple diagrams, consider generating Mermaid code instead:
- More precise control
- Version-controllable
- Easily editable
Use image generation for:
- Visual appeal matters
- Marketing/presentation use
- Complex custom styling

176
skills/image-gen/workflows/infographic.md Normal file
View File

@@ -0,0 +1,176 @@
# Infographic Workflow
Create data visualizations, explainers, and statistical infographics using the 6-step editorial process.
## When to Use
- Explaining concepts or processes
- Visualizing data or statistics
- Creating how-to guides
- Summarizing reports or research
- Making comparisons
## 6-Step Process
### Step 1: Extract Narrative
**Goal:** Understand the complete story being told.
Questions to answer:
- What is the main concept or data being explained?
- What is the key insight or takeaway?
- Who is the target audience?
- What action should viewers take?
**Output:** 2-3 sentence summary of the narrative.
### Step 2: Derive Visual Concept
**Goal:** Translate narrative into a single visual metaphor.
Guidelines:
- Choose 2-3 physical objects that represent the concept
- Prefer familiar, universal metaphors
- Avoid abstract shapes without meaning
- Consider spatial relationships (hierarchy, flow, comparison)
**Examples:**
- Data growth → Plant/tree growing
- Security → Shield/lock
- Process → Pipeline/conveyor belt
- Comparison → Balance scale
**Output:** Visual metaphor description.
### Step 3: Apply Aesthetic
**Goal:** Define the visual style.
Recommended for infographics:
- **Colors:** Muted palette with 1-2 accent colors
- **Style:** Flat design, clean lines
- **Typography:** Sans-serif, clear hierarchy
- **Layout:** Clear sections, visual flow
- **Icons:** Simple, consistent style
**Output:** Style description (2-3 sentences).
### Step 4: Construct Prompt
**Goal:** Build the generation prompt.
**Template:**
```
Create an infographic explaining [topic].
Visual concept: [metaphor from Step 2]
Key elements:
- [Main data point or concept]
- [Supporting element 1]
- [Supporting element 2]
Style: [aesthetic from Step 3]
Layout: [horizontal/vertical], [sections description]
Text to include:
- Title: "[title]"
- Key stat: "[number or fact]"
- [Other text elements]
```
**Output:** Complete prompt.
### Step 5: Generate
**Command:**
```bash
uv run scripts/generate.py "[prompt]" output.png 16:9 2K
```
**Settings for infographics:**
- Aspect ratio: **16:9** (landscape) - best for infographics
- Size: **2K minimum** - ensures text readability
- Model: gemini-3-pro-image-preview (Nano Banana Pro)
### Step 6: Validate
**Validation criteria:**
| Criterion | Check |
|-----------|-------|
| Text legibility | All text is readable at 100% zoom |
| Data accuracy | Numbers/facts are displayed correctly |
| Visual hierarchy | Eye naturally flows through content |
| Color contrast | Sufficient contrast for accessibility |
| Completeness | All key elements are present |
| Brand alignment | Matches intended style |
**If validation fails:**
- Identify specific issues
- Modify prompt to address them
- Regenerate
- Maximum 3 iterations
## Example Workflow
**Request:** Create an infographic about how neural networks learn.
### Step 1: Extract Narrative
"Neural networks learn by adjusting connection weights through forward propagation and backpropagation. Key insight: the process is iterative and improves over time. Audience: Technical beginners."
### Step 2: Visual Concept
"A network of interconnected nodes with signals flowing through, showing adjustment dials on connections. Like a city's road network with traffic lights being adjusted."
### Step 3: Aesthetic
"Flat design with dark blue background, bright connection lines in cyan and orange. Minimal, clean style with clear node shapes."
### Step 4: Prompt
```
Create an infographic explaining how neural networks learn.
Visual concept: Network of connected nodes with adjustment dials on connections, signals flowing through like traffic.
Key elements:
- Input layer with data entering
- Hidden layers with connection weights
- Output layer with result
- Feedback loop showing backpropagation
Style: Dark blue background, cyan and orange accents, flat design, clean minimalist style.
Layout: Horizontal flow from left (input) to right (output), with backpropagation arrow below.
Text to include:
- Title: "How Neural Networks Learn"
- Labels: "Input", "Hidden Layers", "Output", "Backpropagation"
```
### Step 5: Generate
```bash
uv run scripts/generate.py "Create an infographic explaining how neural networks learn..." neural_network.png 16:9 2K
```
### Step 6: Validate
- Text readable
- Flow is clear left-to-right
- Colors have good contrast
- All labels present
## Tips for Better Results
1. **Simple prompts often work best** - "Infographic explaining X" can produce excellent results
2. **Model understands context** - It will add relevant icons/imagery automatically
3. **Be specific about text** - Include exact wording for titles and labels
4. **Iterate with conversation** - Ask for specific changes after initial generation
5. **Use reference images** - For style consistency across multiple infographics
## Common Issues
| Issue | Solution |
|-------|----------|
| Text too small | Increase size to 4K or reduce text amount |
| Cluttered layout | Simplify to fewer elements |
| Wrong style | Be more explicit about aesthetic |
| Missing elements | List all required elements explicitly |