SVG Logo Designer by rknall/claude-skills
npx skills add https://github.com/rknall/claude-skills --skill 'SVG Logo Designer'此技能可根据设计规范创建专业、可缩放的矢量图形(SVG)标识,提供多种变体和布局选项。
当用户提出以下请求时,请激活此技能:
当用户请求设计标识时,收集全面的设计需求:
品牌信息
设计偏好
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
风格指南
技术要求
变体数量
根据需求创建多个标识概念:
开发主要设计方向:
设计思路:
SVG 结构:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<defs>
<!-- Gradients, patterns, filters -->
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4F46E5;stop-opacity:1" />
<stop offset="100%" style="stop-color:#7C3AED;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Logo elements -->
<g id="logo-symbol">
<!-- Symbol/icon elements -->
</g>
<g id="logo-text">
<!-- Text elements (if applicable) -->
</g>
</svg>
创建探索不同视觉方法的变体:
为每个概念创建多种布局选项:
创建专业、优化的 SVG 代码:
最佳实践:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
<!-- Use groups for organization -->
<g id="icon">
<!-- Icon elements -->
</g>
<g id="wordmark">
<!-- Text elements -->
</g>
</svg>
2. 可缩放设计
* 使用 viewBox 实现可缩放性
* 避免使用像素特定尺寸
* 使用相对单位
* 在多种尺寸下测试设计
3. 颜色管理
<!-- Define colors once, reuse throughout -->
<defs>
<style>
.primary { fill: #4F46E5; }
.secondary { fill: #10B981; }
.text { fill: #1F2937; }
</style>
</defs>
<rect class="primary" x="0" y="0" width="100" height="100" />
4. 优化
* 移除不必要的属性
* 尽可能合并路径
* 对重复元素使用符号
* 最小化小数精度
* 移除不可见元素
5. 可访问性
<svg role="img" aria-labelledby="logo-title logo-desc">
<title id="logo-title">Company Name Logo</title>
<desc id="logo-desc">A blue circular icon with the company name</desc>
<!-- Logo content -->
</svg>
以有组织、专业的方式呈现标识:
# Logo Design Concepts
## Concept 1: [Concept Name/Theme]
### Design Rationale
[Explain the thinking behind this design, visual metaphors used, and how it represents the brand]
### Primary Logo (Horizontal)
```xml
<svg><!-- SVG code here --></svg>
用途: 页眉、网站导航、名片 尺寸: 200×60px(可缩放)
<svg><!-- SVG code here --></svg>
用途: 社交媒体资料、移动应用 尺寸: 100×120px(可缩放)
<svg><!-- SVG code here --></svg>
用途: 网站图标、应用图标、小空间 尺寸: 64×64px(可缩放)
全彩:
单色(深色):
单色(浅色):
反色:
[为其他概念重复此结构]
### 阶段 6:文件生成
使用适当的命名保存 SVG 文件:
```javascript
// File naming convention
company-name-logo-concept1-horizontal.svg
company-name-logo-concept1-vertical.svg
company-name-logo-concept1-icon.svg
company-name-logo-concept2-horizontal.svg
// etc.
使用 Write 工具保存每个变体:
// Example
Write({
file_path: "./logos/acme-logo-concept1-horizontal.svg",
content: svgCode
});
提供全面的使用文档:
# Logo Usage Guidelines
## File Formats Provided
### SVG (Scalable Vector Graphics)
- **Use for:** Websites, digital applications, large prints
- **Benefits:** Infinitely scalable, small file size, editable
- **How to use:** Embed directly in HTML or open in design tools
### Exporting to PNG
If you need PNG format:
**Option 1: Using Inkscape (Free)**
```bash
inkscape logo.svg --export-png=logo.png --export-width=1000
Option 2: Using ImageMagick
convert -background none logo.svg logo.png
Option 3: Online Converter
在标识周围保持最小留白区域:
网站页眉:
社交媒体:
印刷材料:
❌ 请勿:
logos/
concept-1/
horizontal/
full-color.svg
monochrome-dark.svg
monochrome-light.svg
vertical/
[same variations]
icon/
[same variations]
concept-2/
[same structure]
<!-- Inline SVG (Recommended for control) -->
<svg><!-- SVG code --></svg>
<!-- Image tag (Simpler) -->
<img src="logo.svg" alt="Company Name Logo" />
<!-- CSS Background -->
.logo {
background-image: url('logo.svg');
background-size: contain;
}
.logo {
width: 100%;
max-width: 200px;
height: auto;
}
/* Mobile */
@media (max-width: 768px) {
.logo {
max-width: 150px;
}
}
## 设计模式与示例
### 文字标识
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 80">
<defs>
<style>
.wordmark {
font-family: 'Helvetica', sans-serif;
font-size: 48px;
font-weight: 700;
fill: #1F2937;
}
</style>
</defs>
<text x="10" y="60" class="wordmark">COMPANY</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4F46E5" />
<stop offset="100%" style="stop-color:#7C3AED" />
</linearGradient>
</defs>
<!-- Hexagon shape -->
<polygon
points="50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5"
fill="url(#grad)"
stroke="#312E81"
stroke-width="2"
/>
<!-- Inner element -->
<circle cx="50" cy="50" r="20" fill="#FFFFFF" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<!-- Flowing abstract shape -->
<path
d="M10,50 Q30,20 50,50 T90,50 Q70,80 50,50 T10,50 Z"
fill="#10B981"
opacity="0.8"
/>
<path
d="M15,55 Q35,25 55,55 T95,55"
fill="none"
stroke="#059669"
stroke-width="3"
stroke-linecap="round"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80">
<!-- Icon -->
<g id="icon">
<circle cx="40" cy="40" r="30" fill="#4F46E5" />
<path d="M30,35 L35,45 L50,25" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" />
</g>
<!-- Text -->
<g id="text">
<text x="85" y="45" font-family="Arial, sans-serif" font-size="28" font-weight="700" fill="#1F2937">
COMPANY
</text>
</g>
</svg>
帮助用户选择合适的颜色:
蓝色 (#0066CC, #4F46E5)
绿色 (#10B981, #059669)
红色 (#DC2626, #EF4444)
紫色 (#7C3AED, #8B5CF6)
橙色 (#F97316, #FB923C)
黄色 (#FBBF24, #FCD34D)
黑色/灰色 (#1F2937, #6B7280)
呈现初始概念后:
收集反馈
优化选定概念
创建最终变体
交付最终包
与用户合作时:
理解品牌
解释设计选择
提供选项
保持灵活
教育用户
提供完整的标识包:
SVG 文件
文档
技术信息
可选:效果图
用户请求:
"为我的科技初创公司 'CloudSync' 创建一个标识。我们提供云存储解决方案。希望设计现代且值得信赖。"
您的回应:
澄清:
开发概念:
创建变体:
呈现:
优化:
请记住:优秀的标识应简单、易记、永恒、通用且恰当。专注于创建适用于所有应用场景并能经受时间考验的设计!
每周安装次数
1.2K
代码仓库
GitHub 星标数
33
首次出现
2026 年 2 月 13 日
安全审计
安装于
amp955
opencode955
kimi-cli955
codex955
github-copilot955
gemini-cli955
This skill creates professional, scalable vector graphic (SVG) logos from design specifications, offering multiple variations and layout options.
Activate this skill when the user requests:
When a user requests a logo, gather comprehensive design requirements:
Brand Information
Design Preferences
Style Guidelines
Technical Requirements
Number of Variations
Create multiple logo concepts based on requirements:
Develop the main design direction:
Design Thinking:
SVG Structure:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
<defs>
<!-- Gradients, patterns, filters -->
<linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4F46E5;stop-opacity:1" />
<stop offset="100%" style="stop-color:#7C3AED;stop-opacity:1" />
</linearGradient>
</defs>
<!-- Logo elements -->
<g id="logo-symbol">
<!-- Symbol/icon elements -->
</g>
<g id="logo-text">
<!-- Text elements (if applicable) -->
</g>
</svg>
Create variations exploring different visual approaches:
For each concept, create multiple layout options:
Create professional, optimized SVG code:
Best Practices:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60">
<!-- Use groups for organization -->
<g id="icon">
<!-- Icon elements -->
</g>
<g id="wordmark">
<!-- Text elements -->
</g>
</svg>
2. Scalable Design
* Use viewBox for scalability
* Avoid pixel-specific sizes
* Use relative units
* Design at multiple sizes to test
3. Color Management
<!-- Define colors once, reuse throughout -->
<defs>
<style>
.primary { fill: #4F46E5; }
.secondary { fill: #10B981; }
.text { fill: #1F2937; }
</style>
</defs>
<rect class="primary" x="0" y="0" width="100" height="100" />
4. Optimization
* Remove unnecessary attributes
* Combine paths where possible
* Use symbols for repeated elements
* Minimize decimal precision
* Remove invisible elements
5. Accessibility
<svg role="img" aria-labelledby="logo-title logo-desc">
<title id="logo-title">Company Name Logo</title>
<desc id="logo-desc">A blue circular icon with the company name</desc>
<!-- Logo content -->
</svg>
Present logos in an organized, professional manner:
# Logo Design Concepts
## Concept 1: [Concept Name/Theme]
### Design Rationale
[Explain the thinking behind this design, visual metaphors used, and how it represents the brand]
### Primary Logo (Horizontal)
```xml
<svg><!-- SVG code here --></svg>
Usage: Headers, website navigation, business cards Dimensions: 200×60px (scalable)
<svg><!-- SVG code here --></svg>
Usage: Social media profiles, mobile apps Dimensions: 100×120px (scalable)
<svg><!-- SVG code here --></svg>
Usage: Favicon, app icon, small spaces Dimensions: 64×64px (scalable)
Full Color:
Monochrome (Dark):
Monochrome (Light):
Reversed:
[Repeat structure for additional concepts]
### Phase 6: File Generation
Save SVG files with proper naming:
```javascript
// File naming convention
company-name-logo-concept1-horizontal.svg
company-name-logo-concept1-vertical.svg
company-name-logo-concept1-icon.svg
company-name-logo-concept2-horizontal.svg
// etc.
Use the Write tool to save each variation:
// Example
Write({
file_path: "./logos/acme-logo-concept1-horizontal.svg",
content: svgCode
});
Provide comprehensive usage documentation:
# Logo Usage Guidelines
## File Formats Provided
### SVG (Scalable Vector Graphics)
- **Use for:** Websites, digital applications, large prints
- **Benefits:** Infinitely scalable, small file size, editable
- **How to use:** Embed directly in HTML or open in design tools
### Exporting to PNG
If you need PNG format:
**Option 1: Using Inkscape (Free)**
```bash
inkscape logo.svg --export-png=logo.png --export-width=1000
Option 2: Using ImageMagick
convert -background none logo.svg logo.png
Option 3: Online Converter
Maintain minimum clear space around logo:
Website Headers:
Social Media:
Print Materials:
❌ Do Not:
logos/
concept-1/
horizontal/
full-color.svg
monochrome-dark.svg
monochrome-light.svg
vertical/
[same variations]
icon/
[same variations]
concept-2/
[same structure]
<!-- Inline SVG (Recommended for control) -->
<svg><!-- SVG code --></svg>
<!-- Image tag (Simpler) -->
<img src="logo.svg" alt="Company Name Logo" />
<!-- CSS Background -->
.logo {
background-image: url('logo.svg');
background-size: contain;
}
.logo {
width: 100%;
max-width: 200px;
height: auto;
}
/* Mobile */
@media (max-width: 768px) {
.logo {
max-width: 150px;
}
}
## Design Patterns & Examples
### Wordmark Logo
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 80">
<defs>
<style>
.wordmark {
font-family: 'Helvetica', sans-serif;
font-size: 48px;
font-weight: 700;
fill: #1F2937;
}
</style>
</defs>
<text x="10" y="60" class="wordmark">COMPANY</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#4F46E5" />
<stop offset="100%" style="stop-color:#7C3AED" />
</linearGradient>
</defs>
<!-- Hexagon shape -->
<polygon
points="50,5 95,27.5 95,72.5 50,95 5,72.5 5,27.5"
fill="url(#grad)"
stroke="#312E81"
stroke-width="2"
/>
<!-- Inner element -->
<circle cx="50" cy="50" r="20" fill="#FFFFFF" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<!-- Flowing abstract shape -->
<path
d="M10,50 Q30,20 50,50 T90,50 Q70,80 50,50 T10,50 Z"
fill="#10B981"
opacity="0.8"
/>
<path
d="M15,55 Q35,25 55,55 T95,55"
fill="none"
stroke="#059669"
stroke-width="3"
stroke-linecap="round"
/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80">
<!-- Icon -->
<g id="icon">
<circle cx="40" cy="40" r="30" fill="#4F46E5" />
<path d="M30,35 L35,45 L50,25" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round" />
</g>
<!-- Text -->
<g id="text">
<text x="85" y="45" font-family="Arial, sans-serif" font-size="28" font-weight="700" fill="#1F2937">
COMPANY
</text>
</g>
</svg>
Help users choose appropriate colors:
Blue (#0066CC, #4F46E5)
Green (#10B981, #059669)
Red (#DC2626, #EF4444)
Purple (#7C3AED, #8B5CF6)
Orange (#F97316, #FB923C)
Yellow (#FBBF24, #FCD34D)
Black/Gray (#1F2937, #6B7280)
After presenting initial concepts:
Gather Feedback
Refine Selected Concept
Create Final Variations
Deliver Final Package
When working with users:
Understand the Brand
Explain Design Choices
Provide Options
Be Flexible
Educate
Provide complete logo package:
SVG Files
Documentation
Technical Info
Optional: Mockups
User Request:
"Create a logo for my tech startup called 'CloudSync'. We provide cloud storage solutions. Looking for something modern and trustworthy."
Your Response:
Clarify:
Develop Concepts:
Create Variations:
Present:
Refine:
Remember: Great logos are simple, memorable, timeless, versatile, and appropriate. Focus on creating designs that will work across all applications and stand the test of time!
Weekly Installs
1.2K
Repository
GitHub Stars
33
First Seen
Feb 13, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
amp955
opencode955
kimi-cli955
codex955
github-copilot955
gemini-cli955
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装