This skill guides creation of distinctive, professional logos that avoid generic aesthetics. All logos are created as pure SVG code - no AI image generation. Every logo delivery includes mandatory color variations and a presentation page for client review.
The user provides logo requirements: brand name, purpose, industry, tone, or other context about what they need.
Design Thinking
Before creating, understand the context and commit to a clear direction:
Purpose : What does this brand represent? What problem does it solve?
Tone : Pick a direction: bold/powerful, refined/elegant, playful/friendly, tech/modern, organic/natural, minimalist/clean, vintage/classic, geometric/precise, hand-crafted/artisan, etc.
Constraints : Where will it be used? (web, print, signage, favicon, embroidery)
Differentiation : What makes this memorable? What's the one thing someone will remember?
CRITICAL : Choose a clear conceptual direction and execute it with precision. The logo must feel intentionally designed for this specific brand, not like a generic template.
Logo Types
Support all logo types based on what best serves the brand:
Wordmark : Brand name styled typographically (Google, Coca-Cola)
Lettermark : Initials only (IBM, HBO, NASA)
Iconographic : Symbol/icon only (Apple, Nike, Target)
Combination Mark : Icon + wordmark together (Adidas, Burger King)
Emblem : Text inside a symbol/badge (Starbucks, Harley-Davidson)
Choose the type that best fits the brand's needs, usage contexts, and name characteristics.
选项 B - 生成然后描摹：使用 gemini_generate_image 创建位图 → trace_bitmap 进行矢量化
调整描摹参数：
turdsize：抑制斑点（默认值：2，值越大越干净）
turnpolicy：路径提取（默认值：minority）
alphamax：角点锐度（默认值：1.0，值越低越锐利）
opttolerance：曲线平滑度（默认值：0.2，值越高越平滑）
结果是单色 SVG
手动创建三个颜色变体
与排版组合并构建展示页面
位图→描摹工作流程示例：
User: Design a logo for Mountain Coffee Co. using this mountain photo I have.
1. Use trace_bitmap on user's mountain.jpg → get mountain-traced.svg (black paths)
2. Clean/simplify the traced SVG if needed
3. Create three color versions:
- monotone: black mountain
- two-color: navy mountain with brown accent
- three-color: navy mountain, brown accent, cream highlight
4. Code the "Mountain Coffee Co." wordmark
5. Compose each color variation with the wordmark
6. Generate horizontal, vertical, and abbreviated layouts
7. Build presentation HTML showing all variations
生成→描摹工作流程示例：
User: Create a logo with an organic leaf illustration.
1. Use gemini_generate_image: "detailed organic leaf illustration, single leaf,
black and white, high contrast, clean edges, 1024x1024px"
2. Use trace_bitmap on the generated image → get leaf-traced.svg
3. Refine the traced paths if needed
4. Create three color versions (monotone, two-color, three-color)
5. Compose with brand typography
6. Build complete presentation
Use viewBox for scalability, not fixed width/height
Group related elements with <g> tags
Use meaningful IDs for color variations: id="primary-color", id="accent-color"
Convert text to paths for final delivery (ensures fonts render everywhere)
Keep paths clean - minimize nodes, smooth curves
Remove unnecessary attributes and whitespace
Size Testing
Every logo must work at:
Favicon size : 16x16px (recognizable silhouette)
Social icon : 48x48px (clear detail)
Header size : 200px wide (full detail visible)
Large format : 1000px+ (no quality loss, clean edges)
CRITICAL: Maintain Aspect Ratio
Logos and icons must NEVER be distorted when resized. All resizing must maintain the original proportions:
Never squash or stretch a logo to fit a space
Scale proportionally only - if you reduce width by 50%, reduce height by 50%
Use CSS/SVG preserveAspectRatio when embedding
If a space requires different proportions, create a purpose-built layout variation instead of distorting the existing logo
Generating Graphical Elements
Two approaches for generating graphical elements:
AI-generated SVG (gemini_generate_svg): Direct SVG code generation
Bitmap tracing (trace_bitmap): Convert raster images to SVG vectors
Choose based on the design requirements and available resources.
Approach 1: AI-Generated SVG (Gemini)
When the gemini_generate_svg tool is available , it can generate SVG code directly from text descriptions.
Usegemini_generate_svg for:
Complex organic shapes : Natural forms, flowing curves, illustrated elements
Intricate iconography : Detailed symbols that are hard to code geometrically
Initial concepts : Quick exploration of visual directions
One-off elements : When you need a specific graphical component
CRITICAL: Always request monotone (single color) SVGs from Gemini. The tool produces ONE graphical element in a single color. You then manually create the three color variations.
Example Gemini prompt:
"A minimalist mountain icon with three peaks, clean geometric shapes,
single color black (#000000), suitable for a coffee company logo"
Approach 2: Bitmap Tracing (Potrace)
When the trace_bitmap tool is available , it can convert raster images (PNG, JPG, BMP) to clean SVG vectors. This mirrors the traditional designer workflow of tracing bitmap references.
Usetrace_bitmap for:
User-provided images : When the user says "I have an image I want traced"
AI-generated bitmaps : Generate image with Gemini, then trace to SVG
Hand-drawn sketches : Scan or photograph sketches, then trace
User: Design a logo for Mountain Coffee Co. using this mountain photo I have.
1. Use trace_bitmap on user's mountain.jpg → get mountain-traced.svg (black paths)
2. Clean/simplify the traced SVG if needed
3. Create three color versions:
- monotone: black mountain
- two-color: navy mountain with brown accent
- three-color: navy mountain, brown accent, cream highlight
4. Code the "Mountain Coffee Co." wordmark
5. Compose each color variation with the wordmark
6. Generate horizontal, vertical, and abbreviated layouts
7. Build presentation HTML showing all variations
Example generate→trace workflow:
User: Create a logo with an organic leaf illustration.
1. Use gemini_generate_image: "detailed organic leaf illustration, single leaf,
black and white, high contrast, clean edges, 1024x1024px"
2. Use trace_bitmap on the generated image → get leaf-traced.svg
3. Refine the traced paths if needed
4. Create three color versions (monotone, two-color, three-color)
5. Compose with brand typography
6. Build complete presentation
CRITICAL: Integrating Potrace Output
After tracing with trace_bitmap (which includes automatic viewBox optimization), you'll have an SVG like this:
Check for frontend-design skill : Use Skill tool to see if it exists
If frontend-design exists : INVOKE IT for typography guidance (MANDATORY)
Choose conceptual direction : Pick a clear aesthetic approach based on typography guidance
Select logo type : Wordmark, icon, combination, etc.
Phase 2: Create Editable Versions 6. Create base SVG design : WITHOUT viewBox, using distinctive fonts (NO forbidden fonts) 7. Generate all variations : Monotone, two-color, three-color, horizontal, vertical, icon-only 8. Save all as editable : All files saved with _editable.svg suffix, text as text
Phase 3: Convert to Delivery Versions 9. For EACH editable file :
Run Inkscape to convert text to outlines
Run Inkscape to optimize viewBox
Save as final delivery version (without _editable suffix)
Phase 4: Presentation 10. Build presentation page : HTML showing final delivery versions 11. Test at multiple sizes : Verify legibility from favicon to large format
CRITICAL: You must create BOTH versions:
Editable versions (*_editable.svg): Text as text, for future modifications
Delivery versions (*.svg): Text converted to outlines, perfect rendering everywhere
If you skip the text-to-outlines conversion, logos will have rendering issues in browsers.
Converting Text to Outlines
CRITICAL : Convert all text to paths before delivery to ensure consistent rendering across browsers and platforms.
Workflow for Each Logo Variant
Step 1: Create editable version with text
# Write the SVG with text elements (no viewBox)
# Save as: logo_monotone_horizontal_editable.svg
Calculates the tight bounding box around ALL content (icon + paths)
Adds the correct viewBox attribute
Removes excess whitespace
Ensures consistent sizing
Apply this to EVERY logo file (monotone, two-color, three-color, horizontal, vertical, abbreviated) AFTER converting text to outlines.
Presentation Format
Deliver logos in an HTML presentation page that shows:
Color Variations Section
Display all three color versions side-by-side:
Monotone | Two-color | Three-color
Show on both light and dark backgrounds
Layout Variations Section (when applicable)
Display horizontal, vertical, and abbreviated versions together
Size Preview Section
Show the logo at multiple sizes:
Favicon (16px)
Small (48px)
Medium (200px)
Large (400px+)
Example Presentation Structure
<!DOCTYPE html>
<html>
<head>
<title>[Brand] Logo Presentation</title>
<style>
/* Grid layout for variations */
/* Light and dark background sections */
/* Size comparison displays */
</style>
</head>
<body>
<h1>[Brand] Logo</h1>
<section class="color-variations">
<h2>Color Versions</h2>
<!-- Monotone, Two-color, Three-color side by side -->
</section>
<section class="layout-variations">
<h2>Layout Options</h2>
<!-- Horizontal, Vertical, Abbreviated -->
</section>
<section class="size-tests">
<h2>Size Testing</h2>
<!-- Multiple sizes from small to large -->
</section>
<section class="background-tests">
<h2>Background Compatibility</h2>
<!-- Logo on light and dark backgrounds -->
</section>
</body>
</html>
Integration with Other Skills
If the frontend-design skill is installed , invoke it alongside this skill for comprehensive aesthetic guidance. The frontend-design skill provides direction on:
Typography choices and pairings
Color theory and palette creation
Avoiding generic "AI slop" aesthetics
Bold, intentional design decisions
Use both skills together for maximum design quality.
