generate-logo

Generate Logo

Generates on-brand, editable SVG logo assets — wordmark, monogram, and favicon — from the active brand profile as pure vector output.

Overview

The generate-logo skill turns a saved brand profile into three ready-to-use logo variants that reuse the brand's exact palette and heading font. Output is vector SVG, so every asset scales without loss and needs no account, key, or network call. The generator (lib/logo.mjs) draws each variant deterministically; the skill resolves the active profile, runs that generator, saves the files, and routes them through review. Raster copies are produced only on demand through the /brand-export command.

Prerequisites

• An active brand profile created with /brand-new (a brand/ directory, or brands/[slug]/ with a brand/.active pointer). Read loads its color-system.json and typography.json.
• Node.js on the PATH — the generator runs as node lib/logo.mjs.
• Write access to an output/ directory in the working repository.
• Optional: the sharp dependency, only if PNG copies are wanted later.

Instructions

1. Run /brand-status (or resolveActive in lib/brand.mjs) to confirm which brand is active; if none exists, tell the user to run /brand-new and stop.

2. Use Glob to locate the active brand directory, then Read and validate the profile with validateProfile. Stop with the offending field if validation fails, for example a non-hex color.

3. Decide the logo text — the optional text argument, defaulting to the brand name. Ask the user when it is ambiguous.

4. Generate the three variants by running the deterministic node generator:

   import { loadProfile } from '../../lib/brand.mjs';
   import { buildLogos } from '../../lib/logo.mjs';
   const profile = loadProfile(activeDir);
   const { wordmark, monogram, favicon } = buildLogos(profile, { text: 'Northwind' });
   

5. Write each variant with the Write tool: output/[slug]-wordmark.svg, output/[slug]-monogram.svg, and output/[slug]-favicon.svg.

6. Hand the files to the visual-guardian subagent for a palette, contrast, and clear-space pass; apply its fixes or surface its flags.

7. Report the saved paths and describe each variant. To customize sizing or adapt the geometry, edit the SVG directly or consult the reference below.