Brand Asset & Flyer Production skill

Brand asset and flyer production pipeline.

by pawbytes·MIT license·★ 114 Stars on the repo·GitHub ↗

Use now

Inside this skill

SKILL.md · the author's own words
# Brand Asset & Flyer Production

## Overview

This workflow produces brand assets (logos, icons, avatars, banners) and flyers from brief to finished files. It is the Designer's companio…

**Args:** Accepts `--headless` / `-H` for non-interactive execution with sensible defaults.

**Output:** Production-ready assets in multiple formats (PNG + SVG for logos/icons, PNG/PDF for flyers at 300 DPI for print) plus a `design…

**Pipeline:** Brief intake -> brand context load -> style direction -> AI generation -> brand validation -> multi-format export -> delivery…

**Key constraint:** Every output is verified against brand guidelines before delivery. Off-brand colors, fonts, or styles are caught and co…

## On Activation

Word-for-word excerpt, not a result. Read the full SKILL.md ↓

Files of Brand Asset & Flyer Production

pawbytes/main1 file shown
SKILL.md
Show the full text219 lines

Brand Asset & Flyer Production

Overview

This workflow produces brand assets (logos, icons, avatars, banners) and flyers from brief to finished files. It is the Designer's companion workflow for brand identity and promotional print/digital materials. Act as a visual production specialist who understands brand systems, vector aesthetics, and print production requirements.

Args: Accepts --headless / -H for non-interactive execution with sensible defaults.

Output: Production-ready assets in multiple formats (PNG + SVG for logos/icons, PNG/PDF for flyers at 300 DPI for print) plus a design-manifest.json cataloging everything produced.

Pipeline: Brief intake -> brand context load -> style direction -> AI generation -> brand validation -> multi-format export -> delivery with manifest.

Key constraint: Every output is verified against brand guidelines before delivery. Off-brand colors, fonts, or styles are caught and corrected before export.

On Activation

Load available config from {project-root}/.pawbytes/config/config.yaml and {project-root}/.pawbytes/config/config.user.yaml (root level and cra section). If config is missing, let the user know paw-cra-setup can configure the module at any time. Resolve and apply throughout the session (defaults in parens):

  • {user_name} (null) -- address the user by name
  • {communication_language} (English) -- use for all communications
  • {fal_key} (null) -- fal.ai API key (required for AI generation)
  • {output_directory} (.pawbytes/creative-suites) -- base output path
  • {default_brand} (null) -- default brand name

Load shared agency memory:

  • {project-root}/.pawbytes/creative-suites/index.md -- active brands and campaigns
  • {project-root}/.pawbytes/creative-suites/brands/{brand}/guidelines.md -- brand context (loaded after brand is identified)

Verify tool availability:

  • fal_key -- required for all AI generation
  • Puppeteer/Playwright -- required for flyer template rendering
  • ffmpeg -- optional, for format conversion

If --headless or -H is passed, execute the full pipeline without interaction using the brief provided. Otherwise, proceed interactively through the pipeline steps.

Pipeline

Step 1: Brief Intake

Parse the incoming brief (from user, Aria, or campaign brief file). Extract:

Field Required Default
Asset type Yes --
Brand name Yes {default_brand}
Style direction No Inferred from brand guidelines
Dimensions No Standard for asset type
Content/copy For flyers --
Output type No Digital

Asset types supported:

Type Models Primary Output
Logo (pictorial, abstract, combination) Recraft V4 Pro PNG + SVG
Icon Recraft V4 Pro PNG + SVG
Wordmark / Lettermark Ideogram V3 PNG + SVG
Avatar FLUX or Recraft V4 PNG (400x400)
Banner FLUX Pro PNG at target dimensions
Flyer (digital) FLUX Pro + HTML/CSS overlay PNG
Flyer (print) FLUX Pro + HTML/CSS overlay PNG + PDF (300 DPI)

If interactive and the brief is incomplete, ask targeted questions to fill gaps. In headless mode, use sensible defaults and note assumptions in the manifest.

Step 2: Brand Context

Load brand guidelines from {project-root}/.pawbytes/creative-suites/brands/{brand-name}/guidelines.md.

Extract and keep available throughout the pipeline:

  • Color palette (primary, secondary, accent hex values)
  • Typography (heading font, body font)
  • Logo paths (if existing logos are referenced)
  • Voice/tone keywords (inform style direction)
  • Any existing asset conventions

If no brand guidelines exist, inform the user and offer to proceed with the style direction from the brief alone, or suggest running Aria's brand onboarding first.

Step 3: Style Direction

Load ./references/style-direction.md for model selection logic and prompt engineering guidance.

Determine the generation approach based on asset type and brief:

Asset Category Approach
Logos / Icons Vector-style via Recraft V4 Pro -- clean, scalable, minimal
Wordmarks Typography-focused via Ideogram V3 -- precise letterforms
Flyers / Banners AI background via FLUX Pro + HTML/CSS text overlays
Avatars Character/brand mark via best-fit model

Build the generation prompt incorporating brand colors, style keywords, and asset-specific requirements. For logos and icons, emphasize simplicity, scalability, and clean lines. For flyers, separate background generation from text content.

If interactive, present the style direction and model choice for approval before generation. In headless mode, proceed with the determined direction.

Step 4: AI Generation

Load ./references/generation-pipeline.md for CLI commands and model-specific parameters.

Execute generation using the fal.ai CLI (curl). Model endpoints:

Model Endpoint Use For
Recraft V4 Pro fal-ai/recraft-v4 Logos, icons, brand marks
Ideogram V3 Discover via fal.ai MCP Wordmarks, text-heavy logos
FLUX.2 Pro fal-ai/flux-pro/v1.1 Flyer backgrounds, banners, avatars

Generate 2-3 variations for interactive mode (user picks best). Generate 1 best-fit for headless mode.

Download all generated images to {project-root}/.pawbytes/creative-suites/brands/{brand-name}/assets/wip/ immediately -- never leave assets as URLs only.

Step 5: Flyer Template Rendering (flyers only)

Load ./references/flyer-rendering.md for template architecture and rendering pipeline.

For flyers and banners that need text overlays:

  1. Use the AI-generated image as background
  2. Build HTML/CSS overlay with headline, body copy, CTA, brand logo, and contact info
  3. Apply brand typography and colors from guidelines
  4. Render via Puppeteer/Playwright using element-specific screenshots (never fullPage: true)
  5. For print: render at 300 DPI equivalent resolution (A4 = 2480x3508px)

Critical: Use element-specific screenshots on .design-container to avoid white gaps. See template system reference for the correct rendering approach.

Step 6: Brand Validation

Before export, verify every produced asset against brand guidelines:

Color check: All brand colors used match the palette from guidelines. No unapproved colors introduced by AI generation.

Typography check: For flyers/banners with text overlays -- fonts match brand specs, sizes maintain hierarchy, contrast meets 4.5:1 minimum.

Style consistency: Visual style aligns with brand tone (e.g., minimalist brand should not get a maximalist logo).

Technical check:

  • Logo/icon assets work at both small (32px) and large (1024px+) sizes
  • Flyer content stays inside safety zones (3mm from trim for print)
  • Resolution meets requirements (300 DPI for print, 72+ DPI for digital)

If validation fails, note the issues and either auto-correct (e.g., color replacement) or flag for revision. In interactive mode, present issues to user. In headless mode, attempt correction and log any unresolvable issues.

Step 7: Multi-Format Export

Export approved assets to final location:

Logos and Icons:

  • Full color PNG (transparent background) at 512px and 1024px
  • SVG: Use Recraft V4 Pro's native SVG output when available. For raster-only sources, use potrace or vtracer CLI for bitmap-to-vector tracing — note that AI-generated raster images produce approximate SVG outlines, not true vector art. Flag in manifest as svg_source: "traced" vs svg_source: "native".
  • Monochrome variant
  • Reversed (white on transparent) variant

Flyers:

  • Digital: PNG at target dimensions, RGB
  • Print: High-res PNG (300 DPI) + PDF with bleed margins. For 300 DPI rendering in Puppeteer, set viewport to print dimensions at 300/72 scale (e.g., A4 = { width: 2480, height: 3508, deviceScaleFactor: 1 }). Note: output is RGB — if CMYK is required for a professional print shop, inform the user that a post-export conversion via ImageMagick (convert input.png -colorspace CMYK output.tiff) or a dedicated prepress tool is needed. Flag in manifest as color_mode: "RGB" with a note when print output is requested.

Banners and Avatars:

  • PNG at exact target dimensions

File naming: {asset-type}_{descriptor}_{date}.{ext} Location: {project-root}/.pawbytes/creative-suites/brands/{brand-name}/assets/

Organize into subdirectories:

assets/
  brand-identity/
    logo/
    icons/
  flyers/
  banners/
  avatars/
Step 8: Manifest & Delivery

Write design-manifest.json to the brand assets directory:

{
  "workflow": "paw-cra-design-brand",
  "brand": "{brand-name}",
  "created": "ISO-8601 timestamp",
  "assets": [
    {
      "type": "logo",
      "description": "Primary logo, full color",
      "files": ["logo/logo-full-color-512.png", "logo/logo-full-color-1024.png", "logo/logo-full-color.svg"],
      "dimensions": "512x512, 1024x1024",
      "colorMode": "RGB",
      "status": "approved"
    }
  ],
  "validation": {
    "brandConsistency": "pass",
    "technicalSpecs": "pass",
    "issues": []
  }
}

Append activity to daily log at {project-root}/.pawbytes/creative-suites/daily/YYYY-MM-DD.md:

[Designer] Brand asset production for {brand-name}: {count} assets created. See design-manifest.json.

Present final summary with file paths and any notes.

References

Reference Purpose Loaded When
./references/style-direction.md Model selection, prompt engineering by asset type Step 3
./references/generation-pipeline.md fal.ai CLI commands, async generation, download Step 4
./references/flyer-rendering.md HTML/CSS template architecture, Puppeteer rendering Step 5 (flyers only)
1---
2name: paw-cra-design-brand
3description: Brand asset and flyer production pipeline. Use when user requests 'create logo', 'design brand asset', 'make flyer', 'generate icon', or 'create banner'.
4---
5 
6# Brand Asset & Flyer Production
7 
8## Overview
9 
10This workflow produces brand assets (logos, icons, avatars, banners) and flyers from brief to finished files. It is the Designer's companion workflow for brand identity and promotional print/digital materials. Act as a visual production specialist who understands brand systems, vector aesthetics, and print production requirements.
11 
12**Args:** Accepts `--headless` / `-H` for non-interactive execution with sensible defaults.
13 
14**Output:** Production-ready assets in multiple formats (PNG + SVG for logos/icons, PNG/PDF for flyers at 300 DPI for print) plus a `design-manifest.json` cataloging everything produced.
15 
16**Pipeline:** Brief intake -> brand context load -> style direction -> AI generation -> brand validation -> multi-format export -> delivery with manifest.
17 
18**Key constraint:** Every output is verified against brand guidelines before delivery. Off-brand colors, fonts, or styles are caught and corrected before export.
19 
20## On Activation
21 
22Load available config from `{project-root}/.pawbytes/config/config.yaml` and `{project-root}/.pawbytes/config/config.user.yaml` (root level and `cra` section). If config is missing, let the user know `paw-cra-setup` can configure the module at any time. Resolve and apply throughout the session (defaults in parens):
23 
24- `{user_name}` (null) -- address the user by name
25- `{communication_language}` (English) -- use for all communications
26- `{fal_key}` (null) -- fal.ai API key (required for AI generation)
27- `{output_directory}` (`.pawbytes/creative-suites`) -- base output path
28- `{default_brand}` (null) -- default brand name
29 
30Load shared agency memory:
31- `{project-root}/.pawbytes/creative-suites/index.md` -- active brands and campaigns
32- `{project-root}/.pawbytes/creative-suites/brands/{brand}/guidelines.md` -- brand context (loaded after brand is identified)
33 
34Verify tool availability:
35- `fal_key` -- required for all AI generation
36- Puppeteer/Playwright -- required for flyer template rendering
37- ffmpeg -- optional, for format conversion
38 
39If `--headless` or `-H` is passed, execute the full pipeline without interaction using the brief provided. Otherwise, proceed interactively through the pipeline steps.
40 
41## Pipeline
42 
43### Step 1: Brief Intake
44 
45Parse the incoming brief (from user, Aria, or campaign brief file). Extract:
46 
47| Field | Required | Default |
48|-------|----------|---------|
49| **Asset type** | Yes | -- |
50| **Brand name** | Yes | `{default_brand}` |
51| **Style direction** | No | Inferred from brand guidelines |
52| **Dimensions** | No | Standard for asset type |
53| **Content/copy** | For flyers | -- |
54| **Output type** | No | Digital |
55 
56**Asset types supported:**
57 
58| Type | Models | Primary Output |
59|------|--------|----------------|
60| Logo (pictorial, abstract, combination) | Recraft V4 Pro | PNG + SVG |
61| Icon | Recraft V4 Pro | PNG + SVG |
62| Wordmark / Lettermark | Ideogram V3 | PNG + SVG |
63| Avatar | FLUX or Recraft V4 | PNG (400x400) |
64| Banner | FLUX Pro | PNG at target dimensions |
65| Flyer (digital) | FLUX Pro + HTML/CSS overlay | PNG |
66| Flyer (print) | FLUX Pro + HTML/CSS overlay | PNG + PDF (300 DPI) |
67 
68If interactive and the brief is incomplete, ask targeted questions to fill gaps. In headless mode, use sensible defaults and note assumptions in the manifest.
69 
70### Step 2: Brand Context
71 
72Load brand guidelines from `{project-root}/.pawbytes/creative-suites/brands/{brand-name}/guidelines.md`.
73 
74Extract and keep available throughout the pipeline:
75- Color palette (primary, secondary, accent hex values)
76- Typography (heading font, body font)
77- Logo paths (if existing logos are referenced)
78- Voice/tone keywords (inform style direction)
79- Any existing asset conventions
80 
81If no brand guidelines exist, inform the user and offer to proceed with the style direction from the brief alone, or suggest running Aria's brand onboarding first.
82 
83### Step 3: Style Direction
84 
85Load `./references/style-direction.md` for model selection logic and prompt engineering guidance.
86 
87Determine the generation approach based on asset type and brief:
88 
89| Asset Category | Approach |
90|----------------|----------|
91| **Logos / Icons** | Vector-style via Recraft V4 Pro -- clean, scalable, minimal |
92| **Wordmarks** | Typography-focused via Ideogram V3 -- precise letterforms |
93| **Flyers / Banners** | AI background via FLUX Pro + HTML/CSS text overlays |
94| **Avatars** | Character/brand mark via best-fit model |
95 
96Build the generation prompt incorporating brand colors, style keywords, and asset-specific requirements. For logos and icons, emphasize simplicity, scalability, and clean lines. For flyers, separate background generation from text content.
97 
98If interactive, present the style direction and model choice for approval before generation. In headless mode, proceed with the determined direction.
99 
100### Step 4: AI Generation
101 
102Load `./references/generation-pipeline.md` for CLI commands and model-specific parameters.
103 
104Execute generation using the fal.ai CLI (curl). Model endpoints:
105 
106| Model | Endpoint | Use For |
107|-------|----------|---------|
108| Recraft V4 Pro | `fal-ai/recraft-v4` | Logos, icons, brand marks |
109| Ideogram V3 | Discover via fal.ai MCP | Wordmarks, text-heavy logos |
110| FLUX.2 Pro | `fal-ai/flux-pro/v1.1` | Flyer backgrounds, banners, avatars |
111 
112Generate 2-3 variations for interactive mode (user picks best). Generate 1 best-fit for headless mode.
113 
114Download all generated images to `{project-root}/.pawbytes/creative-suites/brands/{brand-name}/assets/wip/` immediately -- never leave assets as URLs only.
115 
116### Step 5: Flyer Template Rendering (flyers only)
117 
118Load `./references/flyer-rendering.md` for template architecture and rendering pipeline.
119 
120For flyers and banners that need text overlays:
121 
1221. Use the AI-generated image as background
1232. Build HTML/CSS overlay with headline, body copy, CTA, brand logo, and contact info
1243. Apply brand typography and colors from guidelines
1254. Render via Puppeteer/Playwright using element-specific screenshots (never `fullPage: true`)
1265. For print: render at 300 DPI equivalent resolution (A4 = 2480x3508px)
127 
128**Critical:** Use element-specific screenshots on `.design-container` to avoid white gaps. See template system reference for the correct rendering approach.
129 
130### Step 6: Brand Validation
131 
132Before export, verify every produced asset against brand guidelines:
133 
134**Color check:** All brand colors used match the palette from guidelines. No unapproved colors introduced by AI generation.
135 
136**Typography check:** For flyers/banners with text overlays -- fonts match brand specs, sizes maintain hierarchy, contrast meets 4.5:1 minimum.
137 
138**Style consistency:** Visual style aligns with brand tone (e.g., minimalist brand should not get a maximalist logo).
139 
140**Technical check:**
141- Logo/icon assets work at both small (32px) and large (1024px+) sizes
142- Flyer content stays inside safety zones (3mm from trim for print)
143- Resolution meets requirements (300 DPI for print, 72+ DPI for digital)
144 
145If validation fails, note the issues and either auto-correct (e.g., color replacement) or flag for revision. In interactive mode, present issues to user. In headless mode, attempt correction and log any unresolvable issues.
146 
147### Step 7: Multi-Format Export
148 
149Export approved assets to final location:
150 
151**Logos and Icons:**
152- Full color PNG (transparent background) at 512px and 1024px
153- SVG: Use Recraft V4 Pro's native SVG output when available. For raster-only sources, use `potrace` or `vtracer` CLI for bitmap-to-vector tracing — note that AI-generated raster images produce approximate SVG outlines, not true vector art. Flag in manifest as `svg_source: "traced"` vs `svg_source: "native"`.
154- Monochrome variant
155- Reversed (white on transparent) variant
156 
157**Flyers:**
158- Digital: PNG at target dimensions, RGB
159- Print: High-res PNG (300 DPI) + PDF with bleed margins. For 300 DPI rendering in Puppeteer, set viewport to print dimensions at 300/72 scale (e.g., A4 = `{ width: 2480, height: 3508, deviceScaleFactor: 1 }`). Note: output is RGB — if CMYK is required for a professional print shop, inform the user that a post-export conversion via ImageMagick (`convert input.png -colorspace CMYK output.tiff`) or a dedicated prepress tool is needed. Flag in manifest as `color_mode: "RGB"` with a note when print output is requested.
160 
161**Banners and Avatars:**
162- PNG at exact target dimensions
163 
164**File naming:** `{asset-type}_{descriptor}_{date}.{ext}`
165**Location:** `{project-root}/.pawbytes/creative-suites/brands/{brand-name}/assets/`
166 
167Organize into subdirectories:
168```
169assets/
170 brand-identity/
171 logo/
172 icons/
173 flyers/
174 banners/
175 avatars/
176```
177 
178### Step 8: Manifest & Delivery
179 
180Write `design-manifest.json` to the brand assets directory:
181 
182```json
183{
184 "workflow": "paw-cra-design-brand",
185 "brand": "{brand-name}",
186 "created": "ISO-8601 timestamp",
187 "assets": [
188 {
189 "type": "logo",
190 "description": "Primary logo, full color",
191 "files": ["logo/logo-full-color-512.png", "logo/logo-full-color-1024.png", "logo/logo-full-color.svg"],
192 "dimensions": "512x512, 1024x1024",
193 "colorMode": "RGB",
194 "status": "approved"
195 }
196 ],
197 "validation": {
198 "brandConsistency": "pass",
199 "technicalSpecs": "pass",
200 "issues": []
201 }
202}
203```
204 
205Append activity to daily log at `{project-root}/.pawbytes/creative-suites/daily/YYYY-MM-DD.md`:
206```
207[Designer] Brand asset production for {brand-name}: {count} assets created. See design-manifest.json.
208```
209 
210Present final summary with file paths and any notes.
211 
212## References
213 
214| Reference | Purpose | Loaded When |
215|-----------|---------|-------------|
216| `./references/style-direction.md` | Model selection, prompt engineering by asset type | Step 3 |
217| `./references/generation-pipeline.md` | fal.ai CLI commands, async generation, download | Step 4 |
218| `./references/flyer-rendering.md` | HTML/CSS template architecture, Puppeteer rendering | Step 5 (flyers only) |
219 

Discussion