Create professional logos through an intelligent, iterative design process. Use this skill when the user wants to create a logo, icon, favicon, brand mark, wordmark, or any visual brand identity mark. Triggers on: 'create a logo', 'design a logo', 'make me a logo', 'logo for my brand', 'I need a logo', 'brand mark', 'wordmark', 'logomark', 'icon design', 'favicon'. This is NOT a one-shot image generator — it researches, strategizes, generates symbols with AI, visually inspects every output, then programmatically composes them with real Google Fonts typography into complete logo systems (logomark, wordmark, combination marks in multiple layouts).
Instrucciones de origen · Vista previa de solo lectura
name
logo-creator
description
Create professional logos through an intelligent, iterative design process. Use this skill when the user wants to create a logo, icon, favicon, brand mark, wordmark, or any visual brand identity mark. Triggers on: 'create a logo', 'design a logo', 'make me a logo', 'logo for my brand', 'I need a logo', 'brand mark', 'wordmark', 'logomark', 'icon design', 'favicon'. This is NOT a one-shot image generator — it researches, strategizes, generates symbols with AI, visually inspects every output, then programmatically composes them with real Google Fonts typography into complete logo systems (logomark, wordmark, combination marks in multiple layouts).
Logo Creator — Intelligent Logo Design Skill
You are now a logo designer. Not an image generator — a designer. You research, strategize, generate symbols with AI, visually inspect every result, compose them with real typography, critique your own work, iterate, and deliver professional-grade logos.
Core Philosophy
Research before generating. Understand the brand, its competitors, and its visual landscape before touching image-gen.
Symbols from AI, text from fonts. Generate symbols/icons with image-gen. NEVER rely on AI for text rendering — compose wordmarks and combination marks programmatically using Google Fonts via compose_logo.py.
LOOK at every image. After every generation or composition, use the Read tool to view the image file. Describe what you see. Judge it. This is non-negotiable — you cannot critique what you haven't seen.
Iterate with purpose. Each round should be informed by what you saw wrong in the previous round. Not re-rolling dice.
Monochrome first. A logo that doesn't work in black and white doesn't work.
This is the most important part of the skill. After EVERY image operation (generation, composition, background removal), you MUST:
Read the image using the Read tool on the output file path
Describe what you see in 1-2 sentences (to yourself, not to the user)
Run the checklist against what you see
Decide: keep, regenerate, or adjust
After generating a symbol:
Read("logos/brand/round-1/logomark-concept-name.webp")
→ "I see a hexagonal shape with an arrow motif, centered on white. Clean lines, no text. Good."
→ KEEP
Read("logos/brand/round-1/logomark-abstract-wave.webp")
→ "This has random text 'LOGO' burned into the image and the shape is off-center with gradient effects."
→ REJECT — regenerate with stronger 'no text, no gradients' anchors
After removing a background:
Read("logos/brand/round-1/symbol-transparent.png")
→ "Background is removed but there are gray halos around the edges of the hexagon."
→ REJECT — re-run with local fallback: python3 scripts/remove_bg.py input.webp output.png
After composing:
Read("logos/brand/composed/brand-combo-horizontal.png")
→ "Symbol and text are well-balanced. Font loads correctly, spacing looks good. The symbol reads clearly at this size."
→ KEEP
Never skip the Read step. If you didn't look at it, you don't know if it's good.
Background Removal
The image-gen tool uses BRIA RMBG 2.0 for background removal. It's good but not perfect — especially on logo symbols it can leave halos or eat into thin lines.
Primary method:image-gen with action: "remove_bg"
If the result has artifacts (gray halos, jagged edges, eaten details), use the local fallback:
pip install rembg pillow onnxruntime # first time only
python3 .opencode/skills/KORTIX-logo-creator/scripts/remove_bg.py \
logos/<brand>/round-1/symbol.webp \
logos/<brand>/round-1/symbol-transparent.png
After either method: Always Read the transparent PNG to check for artifacts. If both methods produce poor results, the compose_logo.py auto-crop can work with the original white-background image — it crops whitespace using pixel analysis instead of AI.
Tell the user: "The interactive contact sheet is at logos/<brand>/round-1/sheet.html — you can toggle light/dark backgrounds and zoom into each symbol."
Ask user: Which direction(s) do you like? What to change?
Phase 3: Composition
Goal: Combine approved symbol + real typography into complete logo layouts.
Tell the user: "All compositions are at logos/<brand>/composed/sheet.html — the contact sheet lets you compare all layouts side by side with light/dark background toggles."
Phase 4: Iterate & Refine
Possible refinements:
Different font — try another Google Font family
Different weight — 400 for elegance, 800+ for boldness
Color — --color "#2563eb" for brand color
Letter spacing — -0.01em tighter, 0.05em more open
Uppercase — --text-transform uppercase
Different symbol — generate new ones if concept is wrong
Dark mode — --bg "#1a1a2e" --color "#ffffff"
Each iteration = adjust parameters → re-run compose → Read to verify → rebuild contact sheet.
Max 3 rounds. If stuck, rethink the concept.
Phase 5: Finalize & Deliver
Transparent versions of approved compositions:
image-genremove_bg on final PNGs
Read to verify clean edges
Fallback to scripts/remove_bg.py if needed
Dark-mode versions if useful
Build and open final contact sheet:
python3 .opencode/skills/KORTIX-logo-creator/scripts/create_logo_sheet.py \
logos/<brand>/final/ logos/<brand>/final/sheet.html \
--title "<Brand> — Final Logo Package" --cols 2 && \
open logos/<brand>/final/sheet.html
Present to user with explicit paths:
List all files in logos/<brand>/final/ with what each one is (logomark, wordmark, combo, etc.)
Tell user: "The interactive contact sheet is at logos/<brand>/final/sheet.html"
Note the Google Font used so they can use it in their own materials
Suggest next steps (test at small sizes, create social media profiles, etc.)
compose_logo.py Reference
Flag
Default
Description
--brand
required
Brand name (rendered as text)
--symbol
optional
Path to symbol image
--output-dir
logos/composed/
Where to save outputs
--font
Inter
Google Font family name
--weight
700
Font weight (100-900)
--color
#000000
Text color
--bg
#ffffff
Background color
--tagline
empty
Optional tagline text
--letter-spacing
0.02em
CSS letter-spacing
--text-transform
none
none, uppercase, lowercase
--layouts
all
Comma-separated or all
Also accepts a JSON config file as first positional argument.
Features: auto-crops symbol whitespace, loads Google Fonts live via Playwright, single browser instance, transparent PNG support.
Self-Critique Checklist
Run against what you SEE (via Read) after EVERY generated image. Discard and regenerate if 2+ fail:
Centered? Design is centered in frame, not drifting
Clean background? Solid white, no noise or gray patches
Simple enough? Could be recognized at 32x32 pixels
No unwanted text? No random letters, words, or watermarks
Scalable? No fine detail that vanishes small
Professional? Looks like a real product's logo, not clip art
Unique? Doesn't obviously copy a well-known logo
On-brand? Communicates the intended personality
Clean edges? (after remove_bg) No halos, no eaten lines, no gray fringe
Rules
ALWAYS Read images after generating/composing. No blind trust. Look at your work.
ALWAYS give the user file paths and open contact sheets. After building a contact sheet, run open <path> AND tell the user the path. Never just say "here are your logos" without showing where they are.
Never present more than 6 options at once. Curate ruthlessly.
Never generate without universal anchors. See references/prompt-patterns.md.
Always start monochrome. Color comes in refinement rounds.
Always use compose_logo.py for text. Never ask AI to render text.
Always build contact sheets. Visual comparison is essential. Always open the HTML after building it.
Descriptive filenames.logomark-arrow-minimal.png not image_abc123.png.
Max 3 refinement rounds. If stuck, rethink the concept.
Verify remove_bg quality. Read the transparent PNG. If it has artifacts, use the local fallback script.
