[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-762":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":5,"homepage":8,"htmlUrl":8,"language":9,"languages":8,"totalLinesOfCode":8,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":13,"subscribersCount":13,"size":13,"stars1d":14,"stars7d":15,"stars30d":16,"stars90d":13,"forks30d":13,"starsTrendScore":17,"compositeScore":18,"rankGlobal":8,"rankLanguage":8,"license":8,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":8,"pushedAt":8,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":13,"starSnapshotCount":13,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},762,"logo-generator-skill","op7418\u002Flogo-generator-skill","op7418",null,"HTML",1143,103,4,0,16,50,124,48,19.05,false,"main",true,[],"2026-06-12 02:00:18","# Logo Generator \u002F Logo 生成器\n\n![Showcase](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fc36c0e15-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:\u002F\u002Fgithub.com\u002Fop7418\u002Flogo-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:\u002F\u002Fgithub.com\u002Fop7418\u002Flogo-generator-skill.git ~\u002F.claude\u002Fskills\u002Flogo-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\u002FLinux**: `~\u002F.claude\u002Fskills\u002F`\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 ~\u002F.claude\u002Fskills\u002Flogo-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 `\u002Flogo-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\u002FCategory (e.g., AI, fintech, design tools)\n   - Core Concept (e.g., connection, flow, security)\n   - Design Preferences (minimal\u002Fcomplex, cold\u002Fwarm)\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 & 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 & 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\u002F\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\u002F\n│   ├── svg_to_png.py          # SVG to PNG converter\n│   └── generate_showcase.py   # Showcase image generator\n├── references\u002F\n│   ├── design_patterns.md     # Comprehensive design guide\n│   ├── background_styles.md   # Background style specifications\n│   └── webgl_backgrounds.md   # WebGL dynamic backgrounds\n└── assets\u002F\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:\u002F\u002Fapi.example.com\u002Fv1\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:\u002F\u002Fgithub.com\u002Fop7418\u002Flogo-generator-skill.git\n```\n\n这将自动将技能安装到正确的目录。\n\n#### 方法 2：Git 克隆\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fop7418\u002Flogo-generator-skill.git ~\u002F.claude\u002Fskills\u002Flogo-generator\n```\n\n#### 方法 3：手动安装\n\n1. 下载本仓库\n2. 将 `logo-generator` 文件夹复制到 Claude Code 技能目录：\n   - **macOS\u002FLinux**：`~\u002F.claude\u002Fskills\u002F`\n   - **Windows**：`%USERPROFILE%\\.claude\\skills\\`\n3. 确保文件夹结构包含 `SKILL.md` 和 `README.md`\n\n#### 安装后配置\n\n安装完成后，设置所需的依赖：\n\n```bash\ncd ~\u002F.claude\u002Fskills\u002Flogo-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 并在对话中输入 `\u002Flogo-generator` 验证安装成功。\n\n### 使用方法\n\n#### 基本工作流\n\n1. **启动 Logo 项目**：\n   ```\n   为我的 AI 产品 \"DataFlow\" 生成一个 Logo\n   ```\n\n2. **提供上下文**（AI 会询问）：\n   - 行业\u002F类别（如：AI、金融科技、设计工具）\n   - 核心概念（如：连接、流动、安全）\n   - 设计偏好（极简\u002F复杂、冷色\u002F暖色）\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\u002F\n├── SKILL.md                    # Skill 定义和工作流程\n├── README.md                   # 本文件\n├── requirements.txt            # Python 依赖\n├── .env.example               # 环境变量模板\n├── scripts\u002F\n│   ├── svg_to_png.py          # SVG 转 PNG 工具\n│   └── generate_showcase.py   # 展示图生成器\n├── references\u002F\n│   ├── design_patterns.md     # 综合设计指南\n│   ├── background_styles.md   # 背景风格规范\n│   └── webgl_backgrounds.md   # WebGL 动态背景\n└── assets\u002F\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:\u002F\u002Fapi.example.com\u002Fv1\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","Logo Generator 是一个专业的SVG标志生成器，能够基于产品特性生成6种以上的设计变体，并提供12种专业背景风格来创建展示图像。该项目采用经过验证的设计原则（如极简主义、大量负空间和精确比例）来确保高质量的输出，同时支持SVG和PNG两种格式以满足不同需求。它特别适合初创公司快速获得专业标志、开发者构建副项目、设计师探索初步概念以及产品团队迭代品牌形象。通过集成Gemini 3.1 Flash Image Preview技术，Logo Generator能生成看起来出自专业设计工作室的手的作品。此外，其HTML界面提供了交互式预览功能，包括悬停效果和平滑过渡，增强了用户体验。",2,"2026-06-11 02:39:08","CREATED_QUERY"]