flowjet 2.0.0__py3-none-any.whl

flowjet/builtin_skills/logo-generator-skill/README.md

@@ -0,0 +1,439 @@
+# Logo Generator / Logo 生成器
+
+![Showcase](https://github.com/user-attachments/assets/c36c0e15-370c-4670-906e-36b829f9e7fa)
+
+[English](#english) | [中文](#中文)
+
+---
+
+## English
+
+Professional SVG logo generator with high-end showcase presentations. Generate 6+ design variants based on product characteristics, then create stunning showcase images with 12 professional background styles.
+
+### About
+
+This skill was created to solve a common problem: generating professional logos quickly without sacrificing quality. Traditional logo design requires extensive back-and-forth with designers, while AI-generated logos often lack the refinement and presentation quality needed for real products.
+
+**Logo Generator** bridges this gap by:
+- Applying proven design principles (extreme simplicity, generous negative space, precise proportions)
+- Generating multiple variants to explore different directions
+- Creating production-ready showcase images with professional backgrounds
+- Providing both SVG (editable) and PNG (ready-to-use) formats
+
+Perfect for:
+- **Startups** needing a professional logo quickly
+- **Developers** building side projects
+- **Designers** exploring initial concepts
+- **Product teams** iterating on brand identity
+
+The skill leverages Gemini 3.1 Flash Image Preview (Nano Banana) to generate high-end showcase images that look like they came from a professional design studio.
+
+### Features
+
+- **SVG Logo Generation**: Create geometric logos with dot matrix, line systems, and mixed compositions
+- **Design Variety**: Generate 6+ distinct variants per request with different pattern types
+- **Professional Showcase**: 12 curated background styles (void, frosted, fluid, spotlight, analog liquid, LED matrix, editorial, iridescent, morning, clinical, UI container, Swiss flat)
+- **Nano Banana Integration**: High-end showcase images using Gemini 3.1 Flash Image Preview
+- **Interactive Previews**: Beautiful HTML showcases with hover effects and smooth transitions
+
+### Installation
+
+#### Method 1: Automatic Installation (Recommended)
+
+```bash
+npx skills add https://github.com/op7418/logo-generator-skill.git
+```
+
+This will automatically install the skill to the correct directory.
+
+#### Method 2: Git Clone
+
+```bash
+git clone https://github.com/op7418/logo-generator-skill.git ~/.claude/skills/logo-generator
+```
+
+#### Method 3: Manual Installation
+
+1. Download this repository
+2. Copy the `logo-generator` folder to your Claude Code skills directory:
+   - **macOS/Linux**: `~/.claude/skills/`
+   - **Windows**: `%USERPROFILE%\.claude\skills\`
+3. Ensure the folder structure contains `SKILL.md` and `README.md`
+
+#### Post-Installation Setup
+
+After installation, set up the required dependencies:
+
+```bash
+cd ~/.claude/skills/logo-generator
+pip install -r requirements.txt
+```
+
+Configure your Gemini API key:
+
+```bash
+cp .env.example .env
+# Edit .env and add your GEMINI_API_KEY
+```
+
+Restart Claude Code and verify by typing `/logo-generator` in the conversation.
+
+### Usage
+
+#### Basic Workflow
+
+1. **Start a logo project**:
+   ```
+   Generate a logo for my AI product called "DataFlow"
+   ```
+
+2. **Provide context** (the AI will ask):
+   - Industry/Category (e.g., AI, fintech, design tools)
+   - Core Concept (e.g., connection, flow, security)
+   - Design Preferences (minimal/complex, cold/warm)
+
+3. **Review variants**: The AI generates 6+ SVG logo variants with design rationale
+
+4. **Select and refine**: Choose your favorite, request adjustments
+
+5. **Generate showcase**: Create professional presentation images with multiple background styles
+
+#### Example Commands
+
+```
+Create a logo for a blockchain security platform
+
+Generate 6 logo variants for "CloudSync" - a file sync tool
+
+Show me the logo in different background styles
+
+Export the logo as PNG at 2048x2048
+```
+
+### Workflow Phases
+
+**Phase 1: Information Gathering**  
+Collect product name, industry, core concept, and design preferences
+
+**Phase 2: Pattern Matching & SVG Generation**  
+- Generate 6+ distinct design variants
+- Create interactive HTML showcase
+- Explain design rationale for each variant
+
+**Phase 3: Iteration & Refinement**  
+- Select favorite variants
+- Adjust parameters (size, spacing, rotation)
+- Combine elements from different variants
+
+**Phase 4: High-End Showcase Generation**  
+- Export SVG to PNG (1024x1024px)
+- Select 4 showcase styles based on product type
+- Generate showcase images with Nano Banana
+- Create final presentation webpage
+
+**Phase 5: Delivery**  
+- Interactive HTML showcase page
+- SVG files (editable vector format)
+- PNG exports (various sizes)
+- Showcase images (4 professional backgrounds)
+
+### Background Styles
+
+#### Dark Styles (6)
+- **The Void** - Absolute black with silver micro noise (hardcore tech)
+- **Frosted Horizon** - Titanium gray with organic texture (premium products)
+- **Fluid Abyss** - Deep purple with fluid fusion (AI-native)
+- **Studio Spotlight** - Carbon gray with editorial lighting (magazine quality)
+- **Analog Liquid** - Metallic shimmer on solid color base (creative brands)
+- **LED Matrix** - Digital retro with glowing dots (cyberpunk)
+
+#### Light Styles (6)
+- **Editorial Paper** - Off-white with paper texture (humanistic brands)
+- **Iridescent Frost** - Silver-gray with holographic hints (tech hardware)
+- **Morning Aura** - Warm ivory with pastel colors (approachable AI)
+- **Clinical Studio** - Pure white with geometric shadows (algorithm-driven)
+- **UI Container** - Frosted glass container effect (SaaS platforms)
+- **Swiss Flat** - Pure solid color, zero effects (timeless authority)
+
+### Design Principles
+
+1. **Extreme Simplicity** - 1-2 core elements maximum
+2. **Generous Negative Space** - At least 40-50% empty canvas
+3. **Precise Proportions** - Line weights 2.5-4px, proper spacing
+4. **Visual Tension** - Intentional asymmetry creates interest
+5. **Restraint Over Decoration** - Every element must justify its existence
+6. **Single Focal Point** - Clear visual hierarchy
+
+### File Structure
+
+```
+logo-generator/
+├── SKILL.md                    # Skill definition and workflow
+├── README.md                   # This file
+├── requirements.txt            # Python dependencies
+├── .env.example               # Environment variables template
+├── scripts/
+│   ├── svg_to_png.py          # SVG to PNG converter
+│   └── generate_showcase.py   # Showcase image generator
+├── references/
+│   ├── design_patterns.md     # Comprehensive design guide
+│   ├── background_styles.md   # Background style specifications
+│   └── webgl_backgrounds.md   # WebGL dynamic backgrounds
+└── assets/
+    ├── showcase_template.html # HTML template for showcases
+    └── background_library.html # Interactive WebGL backgrounds
+```
+
+### Requirements
+
+- Python 3.8+
+- Dependencies: `google-genai`, `python-dotenv`, `cairosvg`, `Pillow`
+- Gemini API key (for showcase generation)
+
+### API Configuration
+
+#### Official Google Gemini API
+
+```env
+GEMINI_API_KEY=your_api_key_here
+GEMINI_MODEL=gemini-3.1-flash-image-preview
+```
+
+#### Third-Party API Endpoint
+
+```env
+GEMINI_API_KEY=your_api_key_here
+GEMINI_API_BASE_URL=https://api.example.com/v1
+GEMINI_MODEL=gemini-3.1-flash-image-preview
+```
+
+### License
+
+MIT License - feel free to use for personal or commercial projects
+
+### Credits
+
+- Design patterns inspired by modern brand identity systems
+- Showcase styles curated from high-end design presentations
+- Powered by Gemini 3.1 Flash Image Preview (Nano Banana)
+
+### Contributing
+
+Contributions welcome! Please feel free to submit issues or pull requests.
+
+---
+
+## 中文
+
+专业的 SVG Logo 生成器，配备高端展示效果。基于产品特性生成 6+ 个设计变体，并使用 12 种专业背景风格创建精美的展示图。
+
+### 关于本项目
+
+这个技能的诞生源于一个常见痛点：如何在不牺牲质量的前提下快速生成专业 Logo。传统设计流程需要与设计师反复沟通，而 AI 生成的 Logo 往往缺乏精致度和展示效果。
+
+**Logo Generator** 通过以下方式解决这个问题：
+- 应用经过验证的设计原则（极致简洁、慷慨留白、精准比例）
+- 生成多个变体以探索不同方向
+- 创建可直接使用的专业展示图
+- 提供 SVG（可编辑）和 PNG（即用）两种格式
+
+适用场景：
+- **创业公司** 需要快速获得专业 Logo
+- **开发者** 构建个人项目
+- **设计师** 探索初期概念
+- **产品团队** 迭代品牌形象
+
+本技能利用 Gemini 3.1 Flash Image Preview (Nano Banana) 生成高端展示图，效果媲美专业设计工作室。
+
+### 功能特性
+
+- **SVG Logo 生成**：创建几何 Logo，支持点阵、线条系统和混合构图
+- **设计多样性**：每次请求生成 6+ 个不同范式的设计变体
+- **专业展示**：12 种精选背景风格（绝对虚空、磨砂穹顶、流体深渊、聚光灯、物理流体、LED 矩阵、编辑纸张、幻彩透砂、晨曦光晕、临床工作室、UI 容器、瑞士扁平）
+- **Nano Banana 集成**：使用 Gemini 3.1 Flash Image Preview 生成高端展示图
+- **交互式预览**：精美的 HTML 展示页面，带悬停效果和流畅过渡
+
+### 安装方式
+
+#### 方法 1：自动安装（推荐）
+
+```bash
+npx skills add https://github.com/op7418/logo-generator-skill.git
+```
+
+这将自动将技能安装到正确的目录。
+
+#### 方法 2：Git 克隆
+
+```bash
+git clone https://github.com/op7418/logo-generator-skill.git ~/.claude/skills/logo-generator
+```
+
+#### 方法 3：手动安装
+
+1. 下载本仓库
+2. 将 `logo-generator` 文件夹复制到 Claude Code 技能目录：
+   - **macOS/Linux**：`~/.claude/skills/`
+   - **Windows**：`%USERPROFILE%\.claude\skills\`
+3. 确保文件夹结构包含 `SKILL.md` 和 `README.md`
+
+#### 安装后配置
+
+安装完成后，设置所需的依赖：
+
+```bash
+cd ~/.claude/skills/logo-generator
+pip install -r requirements.txt
+```
+
+配置 Gemini API 密钥：
+
+```bash
+cp .env.example .env
+# 编辑 .env 文件并添加你的 GEMINI_API_KEY
+```
+
+重启 Claude Code 并在对话中输入 `/logo-generator` 验证安装成功。
+
+### 使用方法
+
+#### 基本工作流
+
+1. **启动 Logo 项目**：
+   ```
+   为我的 AI 产品 "DataFlow" 生成一个 Logo
+   ```
+
+2. **提供上下文**（AI 会询问）：
+   - 行业/类别（如：AI、金融科技、设计工具）
+   - 核心概念（如：连接、流动、安全）
+   - 设计偏好（极简/复杂、冷色/暖色）
+
+3. **查看变体**：AI 生成 6+ 个 SVG Logo 变体并说明设计理念
+
+4. **选择和优化**：选择你喜欢的方案，请求调整
+
+5. **生成展示**：创建多种背景风格的专业展示图
+
+#### 示例命令
+
+```
+为区块链安全平台创建一个 Logo
+
+为 "CloudSync" 文件同步工具生成 6 个 Logo 变体
+
+展示不同背景风格下的 Logo 效果
+
+导出 2048x2048 的 PNG 格式 Logo
+```
+
+### 工作流程阶段
+
+**阶段 1：信息收集**  
+收集产品名称、行业、核心概念和设计偏好
+
+**阶段 2：范式匹配与 SVG 生成**  
+- 生成 6+ 个不同的设计变体
+- 创建交互式 HTML 展示页面
+- 解释每个变体的设计理念
+
+**阶段 3：迭代与优化**  
+- 选择喜欢的变体
+- 调整参数（大小、间距、旋转）
+- 组合不同变体的元素
+
+**阶段 4：高端展示图生成**  
+- 导出 SVG 为 PNG（1024x1024px）
+- 根据产品类型选择 4 种展示风格
+- 使用 Nano Banana 生成展示图
+- 创建最终展示网页
+
+**阶段 5：交付**  
+- 交互式 HTML 展示页面
+- SVG 文件（可编辑矢量格式）
+- PNG 导出（多种尺寸）
+- 展示图（4 种专业背景）
+
+### 背景风格
+
+#### 深色风格（6 种）
+- **绝对虚空** - 纯黑 + 银色微噪点（硬核科技）
+- **磨砂穹顶** - 钛灰 + 有机纹理（高端产品）
+- **流体深渊** - 深紫 + 流体融合（AI 原生）
+- **聚光灯** - 碳灰 + 编辑光效（杂志质感）
+- **物理流体** - 纯色底 + 金属质感（创意品牌）
+- **LED 矩阵** - 数字复古 + 发光点阵（赛博朋克）
+
+#### 浅色风格（6 种）
+- **编辑纸张** - 米白 + 纸张纹理（人文品牌）
+- **幻彩透砂** - 银灰 + 全息微光（科技硬件）
+- **晨曦光晕** - 暖象牙 + 柔和色彩（亲和 AI）
+- **临床工作室** - 纯白 + 几何阴影（算法驱动）
+- **UI 容器** - 磨砂玻璃容器效果（SaaS 平台）
+- **瑞士扁平** - 纯色无效果（永恒权威）
+
+### 设计原则
+
+1. **极致简洁** - 最多 1-2 个核心元素
+2. **慷慨留白** - 至少 40-50% 空白画布
+3. **精准比例** - 线条粗细 2.5-4px，合理间距
+4. **视觉张力** - 有意的不对称创造趣味
+5. **克制而非装饰** - 每个元素必须证明其存在价值
+6. **单一焦点** - 清晰的视觉层级
+
+### 文件结构
+
+```
+logo-generator/
+├── SKILL.md                    # Skill 定义和工作流程
+├── README.md                   # 本文件
+├── requirements.txt            # Python 依赖
+├── .env.example               # 环境变量模板
+├── scripts/
+│   ├── svg_to_png.py          # SVG 转 PNG 工具
+│   └── generate_showcase.py   # 展示图生成器
+├── references/
+│   ├── design_patterns.md     # 综合设计指南
+│   ├── background_styles.md   # 背景风格规范
+│   └── webgl_backgrounds.md   # WebGL 动态背景
+└── assets/
+    ├── showcase_template.html # 展示页面模板
+    └── background_library.html # 交互式 WebGL 背景库
+```
+
+### 系统要求
+
+- Python 3.8+
+- 依赖：`google-genai`、`python-dotenv`、`cairosvg`、`Pillow`
+- Gemini API 密钥（用于展示图生成）
+
+### API 配置
+
+#### 官方 Google Gemini API
+
+```env
+GEMINI_API_KEY=your_api_key_here
+GEMINI_MODEL=gemini-3.1-flash-image-preview
+```
+
+#### 第三方 API 端点
+
+```env
+GEMINI_API_KEY=your_api_key_here
+GEMINI_API_BASE_URL=https://api.example.com/v1
+GEMINI_MODEL=gemini-3.1-flash-image-preview
+```
+
+### 开源协议
+
+MIT License - 可自由用于个人或商业项目
+
+### 致谢
+
+- 设计范式灵感来自现代品牌识别系统
+- 展示风格精选自高端设计展示
+- 由 Gemini 3.1 Flash Image Preview (Nano Banana) 驱动
+
+### 贡献
+
+欢迎贡献！请随时提交 issue 或 pull request。

flowjet/builtin_skills/logo-generator-skill/SKILL.md

@@ -0,0 +1,196 @@
+---
+name: logo-generator
+description: >
+  Generate professional SVG logos and high-end showcase images. Use when the user wants to: (1) Create a logo or icon for their product/brand, (2) Generate logo design concepts based on product information, (3) Create professional logo showcase presentations with multiple background styles, (4) Export logos in various formats (SVG, PNG), or (5) Iterate on logo designs with different visual styles. Supports geometric patterns, dot matrix designs, line systems, and mixed compositions. Generates showcase images using Nano Banana (Gemini image generation) with 12 professional background styles.
+---
+
+# Logo Generator
+
+Generate professional SVG logos and high-end showcase presentations for products and brands.
+
+## Workflow
+
+### Phase 1: Information Gathering
+
+Collect essential information from the user:
+
+1. **Product/Brand Name** (required)
+2. **Industry/Category** (e.g., AI, fintech, design tools)
+3. **Core Concept** (e.g., connection, flow, security, simplicity)
+4. **Design Preferences**:
+   - Style: minimal/complex, geometric/organic
+   - Color preference: monochrome/specific colors
+   - Mood: cold/warm, professional/friendly
+
+Ask concise questions to gather this information. Don't overwhelm the user with too many questions at once.
+
+### Phase 2: Pattern Matching & SVG Generation
+
+Based on the gathered information:
+
+1. **Generate at least 6 design variants** based on `references/design_patterns.md`
+   - Match patterns to product characteristics
+   - Use different pattern types and combinations for diversity
+   - Include both single-pattern and mixed-pattern compositions
+   - Vary complexity levels (simple geometric to layered compositions)
+   - Each variant should feel distinctly different, not just parameter tweaks
+   - Explain the design rationale for each variant
+
+2. **Generate SVG code** for each variant
+   - Use viewBox="0 0 100 100" for easy scaling
+   - Keep code clean and well-structured
+   - Use `currentColor` for flexible color control
+   - Add subtle animations for web display (optional)
+
+3. **Create interactive showcase webpage**
+   - Display all 6+ logo variants in a grid layout
+   - Use the template from `assets/showcase_template.html`
+   - Include hover effects and smooth transitions
+   - Add design rationale for each variant
+   - Allow easy comparison between variants
+
+### Phase 3: Iteration & Refinement
+
+Allow user to provide feedback:
+
+- Select favorite variants (narrow down from 6+ to 2-3)
+- Adjust specific parameters (size, spacing, rotation)
+- Combine elements from different variants
+- Change colors or add gradients
+- Modify animations or effects
+- Generate additional variants exploring specific directions
+
+Make targeted adjustments based on feedback. Don't regenerate everything unless requested.
+
+### Phase 4: High-End Showcase Generation
+
+Once the user selects a preferred logo direction:
+
+1. **Export SVG to PNG**
+   - Use `scripts/svg_to_png.py` to convert SVG to PNG
+   - Default size: 1024x1024px
+   - Ensure transparent background
+
+2. **Select showcase styles**
+   - Review `references/background_styles.md`
+   - Recommend 4 styles based on product type and mood
+   - Explain why each style fits
+
+3. **Generate showcase images**
+   - Set up environment (copy `.env.example` to `.env`, add API key)
+   - Use `scripts/generate_showcase.py` with `--all-styles` flag
+   - Or generate specific styles individually
+   - Each image uses the PNG as reference with Nano Banana API
+
+4. **Create final presentation webpage**
+   - Combine SVG variants and showcase images
+   - Use professional layout with micro-typography
+   - Include download links for all assets
+
+### Phase 5: Delivery
+
+Provide the user with:
+
+- Interactive HTML showcase page
+- SVG files (editable vector format)
+- PNG exports (various sizes if requested)
+- Showcase images (4 professional backgrounds)
+
+## Key Design Principles
+
+1. **Provide Variety**: Generate at least 6 distinct variants to give users real choices
+2. **Start Simple**: Begin with basic patterns, add complexity only when needed
+3. **Meaningful Design**: Connect visual elements to product concepts
+4. **Scalability**: Ensure logos work at all sizes
+5. **Professional Quality**: Match high-end brand identity standards
+6. **Flexibility**: Provide multiple variants for different use cases
+
+## Technical Notes
+
+### SVG Best Practices
+
+- Keep viewBox at `0 0 100 100` for consistency
+- Use semantic grouping with `<g>` tags
+- Leverage `<defs>` for reusable elements
+- Use `<clipPath>` for masking effects
+- Prefer geometric primitives over complex paths when possible
+
+### Showcase Image Generation
+
+The `generate_showcase.py` script requires:
+- Python 3.8+
+- Dependencies: `pip install -r requirements.txt`
+- Environment variables in `.env` file
+- Reference PNG image (exported from SVG)
+
+Supports both official Google Gemini API and third-party endpoints via `GEMINI_API_BASE_URL`.
+
+### Available Background Styles
+
+From `references/background_styles.md`:
+
+**12 Professional Styles Available**:
+
+**Dark Styles** (6):
+- void (绝对虚空) - Absolute minimalism, hardcore tech
+- frosted (磨砂穹顶) - Modern breathing space, premium products
+- fluid (流体深渊) - AI-native fluidity, dynamic systems
+- spotlight (物理影棚) - Studio lighting, editorial quality
+- analog_liquid (物理流体) - Metallic shimmer on solid color base, creative brands
+- led_matrix (数字硬件) - Digital retro, cyberpunk aesthetics
+
+**Light Styles** (6):
+- editorial (纸本编辑) - Specialty paper, humanistic brands
+- iridescent (幻彩透砂) - Optical materials, tech hardware
+- morning (晨雾光域) - AI softness, approachable products
+- clinical (无菌影棚) - Spatial order, algorithm-driven brands
+- ui_container (容器化界面) - Digital product native, SaaS platforms
+- swiss_flat (瑞士扁平) - Absolute flatness, timeless authority
+
+Each style has specific visual characteristics and suitable use cases. Consult the reference document for details.
+
+## Common Patterns
+
+### Pattern: Concentric Circle Dots
+```svg
+<svg viewBox="0 0 100 100">
+  <g>
+    <!-- Inner ring: 6 dots -->
+    <circle cx="50" cy="38" r="3" fill="currentColor"/>
+    <!-- Add more dots in circular arrangement -->
+  </g>
+</svg>
+```
+
+### Pattern: Geometric Shape with Line Accent
+```svg
+<svg viewBox="0 0 100 100">
+  <polygon points="50,30 70,60 30,60" fill="none" stroke="currentColor" stroke-width="2"/>
+  <circle cx="50" cy="30" r="4" fill="currentColor"/>
+</svg>
+```
+
+### Pattern: Node Network
+```svg
+<svg viewBox="0 0 100 100">
+  <path d="M 30 70 Q 50 70, 50 50 T 70 30" stroke="currentColor" stroke-width="2" fill="none"/>
+  <circle cx="30" cy="70" r="4" fill="currentColor"/>
+  <circle cx="50" cy="50" r="5" fill="currentColor"/>
+  <circle cx="70" cy="30" r="4" fill="currentColor"/>
+</svg>
+```
+
+For more patterns and combinations, see `references/design_patterns.md`.
+
+## Troubleshooting
+
+**SVG not displaying correctly**: Check viewBox and ensure all paths are closed
+
+**PNG export fails**: Verify cairosvg is installed (`pip install cairosvg`)
+
+**Showcase generation fails**: 
+- Check `.env` file has valid `GEMINI_API_KEY`
+- Verify reference PNG exists and is readable
+- Check API quota/rate limits
+
+**Third-party API not working**: Ensure `GEMINI_API_BASE_URL` is correctly formatted (e.g., `https://api.example.com/v1`)