{"id":49720082,"url":"https://github.com/op7418/logo-generator-skill","last_synced_at":"2026-06-18T04:01:32.459Z","repository":{"id":359848652,"uuid":"1211555732","full_name":"op7418/logo-generator-skill","owner":"op7418","description":"logo-generator-skill","archived":false,"fork":false,"pushed_at":"2026-04-15T16:41:26.000Z","size":55,"stargazers_count":1061,"open_issues_count":0,"forks_count":93,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-05-23T20:03:58.834Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/op7418.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-15T14:05:35.000Z","updated_at":"2026-05-23T12:52:03.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/op7418/logo-generator-skill","commit_stats":null,"previous_names":["op7418/logo-generator-skill"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/op7418/logo-generator-skill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/op7418%2Flogo-generator-skill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/op7418%2Flogo-generator-skill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/op7418%2Flogo-generator-skill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/op7418%2Flogo-generator-skill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/op7418","download_url":"https://codeload.github.com/op7418/logo-generator-skill/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/op7418%2Flogo-generator-skill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34475375,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-09T00:00:28.507Z","updated_at":"2026-06-18T04:01:32.444Z","avatar_url":"https://github.com/op7418.png","language":"HTML","funding_links":[],"categories":["HTML","🧠 Agent Skills"],"sub_categories":[],"readme":"# Logo Generator / Logo 生成器\n\n![Showcase](https://github.com/user-attachments/assets/c36c0e15-370c-4670-906e-36b829f9e7fa)\n\n[English](#english) | [中文](#中文)\n\n---\n\n## English\n\nProfessional 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.\n\n### About\n\nThis 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.\n\n**Logo Generator** bridges this gap by:\n- Applying proven design principles (extreme simplicity, generous negative space, precise proportions)\n- Generating multiple variants to explore different directions\n- Creating production-ready showcase images with professional backgrounds\n- Providing both SVG (editable) and PNG (ready-to-use) formats\n\nPerfect for:\n- **Startups** needing a professional logo quickly\n- **Developers** building side projects\n- **Designers** exploring initial concepts\n- **Product teams** iterating on brand identity\n\nThe 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.\n\n### Features\n\n- **SVG Logo Generation**: Create geometric logos with dot matrix, line systems, and mixed compositions\n- **Design Variety**: Generate 6+ distinct variants per request with different pattern types\n- **Professional Showcase**: 12 curated background styles (void, frosted, fluid, spotlight, analog liquid, LED matrix, editorial, iridescent, morning, clinical, UI container, Swiss flat)\n- **Nano Banana Integration**: High-end showcase images using Gemini 3.1 Flash Image Preview\n- **Interactive Previews**: Beautiful HTML showcases with hover effects and smooth transitions\n\n### Installation\n\n#### Method 1: Automatic Installation (Recommended)\n\n```bash\nnpx skills add https://github.com/op7418/logo-generator-skill.git\n```\n\nThis will automatically install the skill to the correct directory.\n\n#### Method 2: Git Clone\n\n```bash\ngit clone https://github.com/op7418/logo-generator-skill.git ~/.claude/skills/logo-generator\n```\n\n#### Method 3: Manual Installation\n\n1. Download this repository\n2. Copy the `logo-generator` folder to your Claude Code skills directory:\n   - **macOS/Linux**: `~/.claude/skills/`\n   - **Windows**: `%USERPROFILE%\\.claude\\skills\\`\n3. Ensure the folder structure contains `SKILL.md` and `README.md`\n\n#### Post-Installation Setup\n\nAfter installation, set up the required dependencies:\n\n```bash\ncd ~/.claude/skills/logo-generator\npip install -r requirements.txt\n```\n\nConfigure your Gemini API key:\n\n```bash\ncp .env.example .env\n# Edit .env and add your GEMINI_API_KEY\n```\n\nRestart Claude Code and verify by typing `/logo-generator` in the conversation.\n\n### Usage\n\n#### Basic Workflow\n\n1. **Start a logo project**:\n   ```\n   Generate a logo for my AI product called \"DataFlow\"\n   ```\n\n2. **Provide context** (the AI will ask):\n   - Industry/Category (e.g., AI, fintech, design tools)\n   - Core Concept (e.g., connection, flow, security)\n   - Design Preferences (minimal/complex, cold/warm)\n\n3. **Review variants**: The AI generates 6+ SVG logo variants with design rationale\n\n4. **Select and refine**: Choose your favorite, request adjustments\n\n5. **Generate showcase**: Create professional presentation images with multiple background styles\n\n#### Example Commands\n\n```\nCreate a logo for a blockchain security platform\n\nGenerate 6 logo variants for \"CloudSync\" - a file sync tool\n\nShow me the logo in different background styles\n\nExport the logo as PNG at 2048x2048\n```\n\n### Workflow Phases\n\n**Phase 1: Information Gathering**  \nCollect product name, industry, core concept, and design preferences\n\n**Phase 2: Pattern Matching \u0026 SVG Generation**  \n- Generate 6+ distinct design variants\n- Create interactive HTML showcase\n- Explain design rationale for each variant\n\n**Phase 3: Iteration \u0026 Refinement**  \n- Select favorite variants\n- Adjust parameters (size, spacing, rotation)\n- Combine elements from different variants\n\n**Phase 4: High-End Showcase Generation**  \n- Export SVG to PNG (1024x1024px)\n- Select 4 showcase styles based on product type\n- Generate showcase images with Nano Banana\n- Create final presentation webpage\n\n**Phase 5: Delivery**  \n- Interactive HTML showcase page\n- SVG files (editable vector format)\n- PNG exports (various sizes)\n- Showcase images (4 professional backgrounds)\n\n### Background Styles\n\n#### Dark Styles (6)\n- **The Void** - Absolute black with silver micro noise (hardcore tech)\n- **Frosted Horizon** - Titanium gray with organic texture (premium products)\n- **Fluid Abyss** - Deep purple with fluid fusion (AI-native)\n- **Studio Spotlight** - Carbon gray with editorial lighting (magazine quality)\n- **Analog Liquid** - Metallic shimmer on solid color base (creative brands)\n- **LED Matrix** - Digital retro with glowing dots (cyberpunk)\n\n#### Light Styles (6)\n- **Editorial Paper** - Off-white with paper texture (humanistic brands)\n- **Iridescent Frost** - Silver-gray with holographic hints (tech hardware)\n- **Morning Aura** - Warm ivory with pastel colors (approachable AI)\n- **Clinical Studio** - Pure white with geometric shadows (algorithm-driven)\n- **UI Container** - Frosted glass container effect (SaaS platforms)\n- **Swiss Flat** - Pure solid color, zero effects (timeless authority)\n\n### Design Principles\n\n1. **Extreme Simplicity** - 1-2 core elements maximum\n2. **Generous Negative Space** - At least 40-50% empty canvas\n3. **Precise Proportions** - Line weights 2.5-4px, proper spacing\n4. **Visual Tension** - Intentional asymmetry creates interest\n5. **Restraint Over Decoration** - Every element must justify its existence\n6. **Single Focal Point** - Clear visual hierarchy\n\n### File Structure\n\n```\nlogo-generator/\n├── SKILL.md                    # Skill definition and workflow\n├── README.md                   # This file\n├── requirements.txt            # Python dependencies\n├── .env.example               # Environment variables template\n├── scripts/\n│   ├── svg_to_png.py          # SVG to PNG converter\n│   └── generate_showcase.py   # Showcase image generator\n├── references/\n│   ├── design_patterns.md     # Comprehensive design guide\n│   ├── background_styles.md   # Background style specifications\n│   └── webgl_backgrounds.md   # WebGL dynamic backgrounds\n└── assets/\n    ├── showcase_template.html # HTML template for showcases\n    └── background_library.html # Interactive WebGL backgrounds\n```\n\n### Requirements\n\n- Python 3.8+\n- Dependencies: `google-genai`, `python-dotenv`, `cairosvg`, `Pillow`\n- Gemini API key (for showcase generation)\n\n### API Configuration\n\n#### Official Google Gemini API\n\n```env\nGEMINI_API_KEY=your_api_key_here\nGEMINI_MODEL=gemini-3.1-flash-image-preview\n```\n\n#### Third-Party API Endpoint\n\n```env\nGEMINI_API_KEY=your_api_key_here\nGEMINI_API_BASE_URL=https://api.example.com/v1\nGEMINI_MODEL=gemini-3.1-flash-image-preview\n```\n\n### License\n\nMIT License - feel free to use for personal or commercial projects\n\n### Credits\n\n- Design patterns inspired by modern brand identity systems\n- Showcase styles curated from high-end design presentations\n- Powered by Gemini 3.1 Flash Image Preview (Nano Banana)\n\n### Contributing\n\nContributions welcome! Please feel free to submit issues or pull requests.\n\n---\n\n## 中文\n\n专业的 SVG Logo 生成器，配备高端展示效果。基于产品特性生成 6+ 个设计变体，并使用 12 种专业背景风格创建精美的展示图。\n\n### 关于本项目\n\n这个技能的诞生源于一个常见痛点：如何在不牺牲质量的前提下快速生成专业 Logo。传统设计流程需要与设计师反复沟通，而 AI 生成的 Logo 往往缺乏精致度和展示效果。\n\n**Logo Generator** 通过以下方式解决这个问题：\n- 应用经过验证的设计原则（极致简洁、慷慨留白、精准比例）\n- 生成多个变体以探索不同方向\n- 创建可直接使用的专业展示图\n- 提供 SVG（可编辑）和 PNG（即用）两种格式\n\n适用场景：\n- **创业公司** 需要快速获得专业 Logo\n- **开发者** 构建个人项目\n- **设计师** 探索初期概念\n- **产品团队** 迭代品牌形象\n\n本技能利用 Gemini 3.1 Flash Image Preview (Nano Banana) 生成高端展示图，效果媲美专业设计工作室。\n\n### 功能特性\n\n- **SVG Logo 生成**：创建几何 Logo，支持点阵、线条系统和混合构图\n- **设计多样性**：每次请求生成 6+ 个不同范式的设计变体\n- **专业展示**：12 种精选背景风格（绝对虚空、磨砂穹顶、流体深渊、聚光灯、物理流体、LED 矩阵、编辑纸张、幻彩透砂、晨曦光晕、临床工作室、UI 容器、瑞士扁平）\n- **Nano Banana 集成**：使用 Gemini 3.1 Flash Image Preview 生成高端展示图\n- **交互式预览**：精美的 HTML 展示页面，带悬停效果和流畅过渡\n\n### 安装方式\n\n#### 方法 1：自动安装（推荐）\n\n```bash\nnpx skills add https://github.com/op7418/logo-generator-skill.git\n```\n\n这将自动将技能安装到正确的目录。\n\n#### 方法 2：Git 克隆\n\n```bash\ngit clone https://github.com/op7418/logo-generator-skill.git ~/.claude/skills/logo-generator\n```\n\n#### 方法 3：手动安装\n\n1. 下载本仓库\n2. 将 `logo-generator` 文件夹复制到 Claude Code 技能目录：\n   - **macOS/Linux**：`~/.claude/skills/`\n   - **Windows**：`%USERPROFILE%\\.claude\\skills\\`\n3. 确保文件夹结构包含 `SKILL.md` 和 `README.md`\n\n#### 安装后配置\n\n安装完成后，设置所需的依赖：\n\n```bash\ncd ~/.claude/skills/logo-generator\npip install -r requirements.txt\n```\n\n配置 Gemini API 密钥：\n\n```bash\ncp .env.example .env\n# 编辑 .env 文件并添加你的 GEMINI_API_KEY\n```\n\n重启 Claude Code 并在对话中输入 `/logo-generator` 验证安装成功。\n\n### 使用方法\n\n#### 基本工作流\n\n1. **启动 Logo 项目**：\n   ```\n   为我的 AI 产品 \"DataFlow\" 生成一个 Logo\n   ```\n\n2. **提供上下文**（AI 会询问）：\n   - 行业/类别（如：AI、金融科技、设计工具）\n   - 核心概念（如：连接、流动、安全）\n   - 设计偏好（极简/复杂、冷色/暖色）\n\n3. **查看变体**：AI 生成 6+ 个 SVG Logo 变体并说明设计理念\n\n4. **选择和优化**：选择你喜欢的方案，请求调整\n\n5. **生成展示**：创建多种背景风格的专业展示图\n\n#### 示例命令\n\n```\n为区块链安全平台创建一个 Logo\n\n为 \"CloudSync\" 文件同步工具生成 6 个 Logo 变体\n\n展示不同背景风格下的 Logo 效果\n\n导出 2048x2048 的 PNG 格式 Logo\n```\n\n### 工作流程阶段\n\n**阶段 1：信息收集**  \n收集产品名称、行业、核心概念和设计偏好\n\n**阶段 2：范式匹配与 SVG 生成**  \n- 生成 6+ 个不同的设计变体\n- 创建交互式 HTML 展示页面\n- 解释每个变体的设计理念\n\n**阶段 3：迭代与优化**  \n- 选择喜欢的变体\n- 调整参数（大小、间距、旋转）\n- 组合不同变体的元素\n\n**阶段 4：高端展示图生成**  \n- 导出 SVG 为 PNG（1024x1024px）\n- 根据产品类型选择 4 种展示风格\n- 使用 Nano Banana 生成展示图\n- 创建最终展示网页\n\n**阶段 5：交付**  \n- 交互式 HTML 展示页面\n- SVG 文件（可编辑矢量格式）\n- PNG 导出（多种尺寸）\n- 展示图（4 种专业背景）\n\n### 背景风格\n\n#### 深色风格（6 种）\n- **绝对虚空** - 纯黑 + 银色微噪点（硬核科技）\n- **磨砂穹顶** - 钛灰 + 有机纹理（高端产品）\n- **流体深渊** - 深紫 + 流体融合（AI 原生）\n- **聚光灯** - 碳灰 + 编辑光效（杂志质感）\n- **物理流体** - 纯色底 + 金属质感（创意品牌）\n- **LED 矩阵** - 数字复古 + 发光点阵（赛博朋克）\n\n#### 浅色风格（6 种）\n- **编辑纸张** - 米白 + 纸张纹理（人文品牌）\n- **幻彩透砂** - 银灰 + 全息微光（科技硬件）\n- **晨曦光晕** - 暖象牙 + 柔和色彩（亲和 AI）\n- **临床工作室** - 纯白 + 几何阴影（算法驱动）\n- **UI 容器** - 磨砂玻璃容器效果（SaaS 平台）\n- **瑞士扁平** - 纯色无效果（永恒权威）\n\n### 设计原则\n\n1. **极致简洁** - 最多 1-2 个核心元素\n2. **慷慨留白** - 至少 40-50% 空白画布\n3. **精准比例** - 线条粗细 2.5-4px，合理间距\n4. **视觉张力** - 有意的不对称创造趣味\n5. **克制而非装饰** - 每个元素必须证明其存在价值\n6. **单一焦点** - 清晰的视觉层级\n\n### 文件结构\n\n```\nlogo-generator/\n├── SKILL.md                    # Skill 定义和工作流程\n├── README.md                   # 本文件\n├── requirements.txt            # Python 依赖\n├── .env.example               # 环境变量模板\n├── scripts/\n│   ├── svg_to_png.py          # SVG 转 PNG 工具\n│   └── generate_showcase.py   # 展示图生成器\n├── references/\n│   ├── design_patterns.md     # 综合设计指南\n│   ├── background_styles.md   # 背景风格规范\n│   └── webgl_backgrounds.md   # WebGL 动态背景\n└── assets/\n    ├── showcase_template.html # 展示页面模板\n    └── background_library.html # 交互式 WebGL 背景库\n```\n\n### 系统要求\n\n- Python 3.8+\n- 依赖：`google-genai`、`python-dotenv`、`cairosvg`、`Pillow`\n- Gemini API 密钥（用于展示图生成）\n\n### API 配置\n\n#### 官方 Google Gemini API\n\n```env\nGEMINI_API_KEY=your_api_key_here\nGEMINI_MODEL=gemini-3.1-flash-image-preview\n```\n\n#### 第三方 API 端点\n\n```env\nGEMINI_API_KEY=your_api_key_here\nGEMINI_API_BASE_URL=https://api.example.com/v1\nGEMINI_MODEL=gemini-3.1-flash-image-preview\n```\n\n### 开源协议\n\nMIT License - 可自由用于个人或商业项目\n\n### 致谢\n\n- 设计范式灵感来自现代品牌识别系统\n- 展示风格精选自高端设计展示\n- 由 Gemini 3.1 Flash Image Preview (Nano Banana) 驱动\n\n### 贡献\n\n欢迎贡献！请随时提交 issue 或 pull request。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fop7418%2Flogo-generator-skill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fop7418%2Flogo-generator-skill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fop7418%2Flogo-generator-skill/lists"}