If you’ve ever delivered a brand system, you know the final stretch: taking a handful of approved logo files and multiplying them into dozens of variants across colors, file types, and folder structures. It’s not creative work. It’s production work, and it’s a perfect candidate for automation.
Claude Code is a command-line tool from Anthropic that most people associate with software development. But it can write and execute scripts, manipulate files, install dependencies, and automate just about any file-based workflow directly from your terminal. For design studios, that means you can describe a repetitive task in plain English and have Claude Code build the tooling to handle it.
This post walks through one specific workflow: turning a set of master logo SVGs into a complete brand file delivery package. Every color variant. Every file type. Every folder. Generated in seconds from a single terminal command. We’ve been using this internally at Origin and it’s eliminated one of the most predictable bottlenecks in our delivery process.
What You’ll Need
Before getting started, make sure you have the following installed:
- Node.js (v18 or higher)
- Claude Code (installed via
npm install -g @anthropic-ai/claude-code) - Your logo files exported as SVGs from Illustrator, with solid vector fills in your primary brand color
You don’t need to know how to code. Claude Code will generate the script, install the dependencies, and walk you through running it. You just need to describe what you want, which is exactly what the prompt at the end of this post does. If something doesn’t work perfectly on the first pass, you can describe the issue in plain English and Claude Code will fix it. The iteration loop is conversational, not technical.
The Workflow
The concept is simple. You provide a small set of source files and a configuration file that defines the brand’s colors. Claude Code builds a script that combines the two and outputs a fully organized delivery folder.
Input:
- One SVG per logo type (full logo, mark, logotype, whatever the client’s system includes), exported from Illustrator in the primary brand color
- One EPS per logo type (exported manually, since EPS conversion from SVG can be unreliable)
- A JSON config file listing the brand’s color variants and output preferences
Output:
- A complete folder structure organized by color, then logo type
- Each logo variant rendered as SVG, PNG (transparent background), and JPG (white background)
- EPS files copied into their own folder
- Intelligent skip logic. For example, no JPG output for white logos, since they’d be invisible on a white background
Setting Up Your Source Files
Start by creating a source folder with your master files. Export one SVG per logo type from Illustrator. These should be in your primary brand color with solid fills. The script will handle creating every other color variant by swapping the fill values in the SVG markup.
Your EPS files go into a subfolder. These won’t be modified programmatically. They’re simply copied into the output structure as-is.
/source
full_logo.svg
mark.svg
logotype.svg
/eps
full_logo.eps
mark.eps
logotype.eps
Next, create your config file. This is where you define the brand’s color palette and any output preferences.
{
"client_name": "ClientName",
"colors": {
"green": "#2E7D32",
"white": "#FFFFFF",
"black": "#000000"
},
"png_width": 1930,
"skip_jpg_for": ["white"]
}
The colors object maps each color name to its hex value. The script will generate a full set of files for each color listed here. The png_width sets the output width for rasterized files. Height is calculated automatically to maintain the original aspect ratio of each logo type. The skip_jpg_for array tells the script which colors should skip JPG output to avoid issues like white-on-white.
The Output Structure
Running the script produces a folder structure organized by color at the top level, then by logo type. File names follow a consistent {logo_type}_{color}.{ext} convention, all lowercase with underscores. Folder names are title case, derived from the source file names.
Brand_Files/
Green/
Full Logo/
full_logo_green.svg
full_logo_green.png
full_logo_green.jpg
Mark/
mark_green.svg
mark_green.png
mark_green.jpg
Logotype/
logotype_green.svg
logotype_green.png
logotype_green.jpg
White/
Full Logo/
full_logo_white.svg
full_logo_white.png
Mark/
mark_white.svg
mark_white.png
Logotype/
logotype_white.svg
logotype_white.png
Black/
Full Logo/
full_logo_black.svg
full_logo_black.png
full_logo_black.jpg
Mark/
mark_black.svg
mark_black.png
mark_black.jpg
Logotype/
logotype_black.svg
logotype_black.png
logotype_black.jpg
EPS/
full_logo.eps
mark.eps
logotype.eps
Notice that the White folder has no JPG files. That’s the skip logic from the config doing its job. Also note that the script processes whatever SVGs it finds in the source folder. If a client’s brand system only includes a full logo and a mark, there’s nothing to adjust. The script adapts automatically.
The Claude Code Prompt
This is the exact prompt you give Claude Code in your terminal. Open Claude Code in the directory where you want the script to live, paste this in, and let it build everything for you.
Build me a Node.js script that automates brand logo file generation from source SVGs.
**What it does:**
Takes a folder of source SVG logo files and a simple config, then generates all color variants in SVG, PNG, and JPG across an organized folder structure.
**Config file (`brand-config.json`):**
```json
{
"client_name": "ClientName",
"colors": {
"green": "#2E7D32",
"white": "#FFFFFF",
"black": "#000000"
},
"png_width": 1930,
"skip_jpg_for": ["white"]
}
```
- `colors` — each color name and hex value. The source SVGs use the primary color fills; the script should replace all non-white, non-black fill colors in the SVG with each target color. For white and black variants, replace ALL fills with that color.
- `skip_jpg_for` — array of color names where JPG output should be skipped (to avoid white-on-white situations).
**Source folder structure:**
```
/source
full_logo.svg
mark.svg
logotype.svg
(whatever logo types exist — script should process all SVGs found here)
/eps
full_logo.eps
mark.eps
logotype.eps
```
**Output folder structure:**
```
Brand_Files/
Green/
Full Logo/
full_logo_green.svg
full_logo_green.png
full_logo_green.jpg
Mark/
mark_green.svg
mark_green.png
mark_green.jpg
White/
Full Logo/
full_logo_white.svg
full_logo_white.png
(no jpg — white is in skip_jpg_for)
Mark/
mark_white.svg
mark_white.png
Black/
Full Logo/
full_logo_black.svg
full_logo_black.png
full_logo_black.jpg
...
EPS/
full_logo.eps
mark.eps
```
**Naming conventions:**
- Files: `{logo_type}_{color}.{ext}` — all lowercase, underscores
- Folders: Color folders are title case (`Green`, `White`). Logo type folders are title case with spaces (`Full Logo`, `Mark`). The folder name is derived from the source SVG filename — e.g., `full_logo.svg` becomes `Full Logo`.
**Technical requirements:**
- Use sharp (npm package) for PNG and JPG rendering from SVG — it handles SVG rasterization well
- PNGs: rendered at specified width (default 1930px), maintaining aspect ratio, transparent background
- JPGs: same dimensions, white background, quality 90
- SVGs: color-swapped copies of the source files
- EPS files: just copied into an EPS folder as-is
- The script should read the SVG as XML/text, find fill attributes and style fill properties, and replace hex color values. It should detect the "primary" color from the source SVG (the most common non-white, non-black fill color) and replace it with each target color.
- Run via CLI: `node generate-brand-files.js --config brand-config.json --source ./source --output ./Brand_Files`
**Edge cases to handle:**
- SVG fills defined as `fill="#hex"` attributes AND as `fill: #hex` in inline styles
- Short hex (`#fff`) and long hex (`#ffffff`) formats
- If a source SVG's primary color IS the same as a target color, just copy it as-is
- Create all directories recursively as needed
- Log progress to the terminal as it processes each file
Once Claude Code generates the script, you can run it with:
node generate-brand-files.js --config brand-config.json --source ./source --output ./Brand_Files
Adapting It to Your Studio
The config file is the lever. For each new client, you create a new brand-config.json with their specific colors and preferences, drop your source SVGs into the source folder, and run the command. The entire delivery package generates in seconds.
If your logos use multiple colors rather than a single primary fill, you can tell Claude Code to adjust the color detection logic. Just describe the change in plain English and it will update the script. The same goes for extending the output: if you want to add favicon sizes, social media dimensions, or dark background variants for certain colors, update the prompt with those requirements and regenerate.
The script processes whatever SVGs are in the source folder, so it naturally adapts to clients with different brand system scopes. A client with five logo types gets five sets of outputs. A client with two gets two. No configuration changes needed.
What’s Next
This is one workflow, but the principle applies broadly. Any task in your studio that follows a predictable pattern of inputs, rules, and outputs is a candidate for Claude Code automation. Brand file production just happens to be one of the most universal examples. Every studio does it, it’s always tedious, and the logic is consistent enough to script reliably.
Other workflows we’re exploring include automated proposal generation from meeting transcripts, competitive audit reports, and brand guideline documentation. The common thread is the same: clearly defined inputs, repeatable logic, and structured outputs.
The time you save on production is time you can redirect toward the work that actually requires your judgment: strategy, design, and creative direction.