brand-content-design
Brand Content Design
Create branded visual content (presentations, LinkedIn carousels, HTML pages) with consistent brand identity.
Trigger Phrases
- "create presentation" / "make slides"
- "create carousel" / "LinkedIn carousel"
- "create HTML page" / "make landing page" / "build web page"
- "html design system" / "design system"
- "setup brand" / "brand init" / "extract brand"
- "create template" / "new template"
- "get outline" / "outline for template" / "prepare content"
- "color palette" / "generate palette" / "alternative colors"
- NOT for: General design questions, non-branded content
- NOT for: Drupal conversion (use design-system-converter plugin instead)
Project Detection
Before ANY operation, find the PROJECT_PATH using this search order:
- Current directory - Check if
./brand-philosophy.mdexists - Parent directory - Check if
../brand-philosophy.mdexists - Subdirectories - Use
find . -maxdepth 2 -name "brand-philosophy.md"to find nearby projects - If multiple found - Ask user which project to use
- If none found - Direct user to run
/brand-initfirst
Once PROJECT_PATH is set, the folder structure is:
{PROJECT_PATH}/
├── brand-philosophy.md # Always exists
├── templates/
│ ├── presentations/
│ │ └── {template-name}/
│ │ ├── template.md
│ │ ├── canvas-philosophy.md
│ │ └── sample.pptx
│ ├── carousels/
│ │ └── {template-name}/
│ │ ├── template.md
│ │ ├── canvas-philosophy.md
│ │ └── sample.pdf
│ └── html/
│ └── {design-system-name}/
│ ├── canvas-philosophy.md
│ ├── design-system.md
│ └── components/ # Reusable HTML components
├── presentations/ # Output folder
├── carousels/ # Output folder
├── html-pages/ # Output folder (HTML pages)
└── assets/ # Brand assets
Finding templates:
- Presentations:
find {PROJECT_PATH}/templates/presentations -name "template.md" - Carousels:
find {PROJECT_PATH}/templates/carousels -name "template.md"
Three-Layer System
Apply this layered approach when creating content:
-
Layer 1 - Brand Philosophy (
brand-philosophy.mdin project)- Load and apply visual DNA (colors, typography, imagery)
- Load and apply verbal DNA (voice, tone, vocabulary)
-
Layer 2 - Content Type Guide (from plugin
references/)- Read
references/presentations-guide.mdfor presentations - Read
references/carousels-guide.mdfor carousels
- Read
-
Layer 3 - Template (from project
templates/)- Load template's
canvas-philosophy.mdfor visual design rules - Follow template's structure for slide/card sequence
- Load template's
Commands
Route user requests to the appropriate command:
| User Intent | Command |
|---|---|
| Status, switch projects, or start | /brand |
| Initialize new project | /brand-init |
| Extract brand from sources | /brand-extract |
| Generate alternative color palettes | /brand-palette |
| Manage assets (logos, icons, fonts) | /brand-assets |
| Create presentation template | /template-presentation |
| Create carousel template | /template-carousel |
| Get outline template + AI prompt with slide/card definitions | /outline |
| Create presentation (guided) | /presentation |
| Create presentation (quick) | /presentation-quick |
| Create carousel (guided) | /carousel |
| Create carousel (quick) | /carousel-quick |
| Create HTML design system | /design-html |
| Create HTML page (guided) | /html-page |
| Create HTML page (quick) | /html-page-quick |
| Add new content type | /content-type-new |
Underlying Skills
Use these skills during content generation:
| Skill | When to Use |
|---|---|
| visual-content | Generate visual output from canvas philosophy (bundled) |
| html-generator | Generate HTML pages and components from design system (bundled) |
| pptx | Convert presentation PDFs to PowerPoint |
| Create multi-page carousel PDFs |
The visual-content skill is bundled with this plugin. For HTML-to-Drupal conversion, use the design-system-converter plugin.
References
Bundled (Plugin-Specific)
references/brand-philosophy-template.md- Template for brand philosophyreferences/template-structure.md- Template for template.md filesreferences/canvas-philosophy-template.md- Template for canvas philosophyreferences/presentations-guide.md- Presentation best practicesreferences/carousels-guide.md- Carousel best practicesreferences/style-constraints.md- 13 visual styles with enforcement blocksreferences/color-palettes.md- Color theory and palette typesreferences/output-specs.md- Dimensions, formats, file sizes
Online Dev-Guides (Design Systems)
For design system recognition and analysis methodology, fetch the guide index:
Index: https://camoa.github.io/dev-guides/llms.txt
Likely relevant topics: design-systems/recognition
Usage: WebFetch the index to discover available topics, then fetch specific topic pages when extracting brand elements or analyzing design systems.