# Design Youtube Channel Art > Generate a YouTube channel banner — pixel-exact 2560×1440 full canvas + 1546×423 safe-zone preview canvas in a single HTML file. The full banner bleeds to the edges (TV display uses it all); the safe zone (1546×423 centered) is the cross-device area where critical content MUST sit. Reads ./design//DESIGN.md, tokens.css, and components.html. Triggers include "youtube banner", "youtube channel art", "channel banner", "/youtube-channel-art". - Skill: `slogsdon/design-youtube-channel-art` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add slogsdon/design-youtube-channel-art` - Raw SKILL.md: https://api.skillmd.com/api/skills/slogsdon/design-youtube-channel-art/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: slogsdon (https://skillmd.com/u/slogsdon) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/slogsdon/design-youtube-channel-art --- # Skill: youtube-channel-art Produces a single self-contained HTML file containing **two pixel-exact canvases**: 1. **Full banner** (2560×1440) — the TV-display-ready full asset that uploads to YouTube 2. **Safe zone preview** (1546×423) — what mobile + desktop visitors actually see; ALL critical content must sit inside this zone YouTube renders the same banner asset at vastly different aspect ratios across devices (TV uses the full 2560×1440; desktop crops to a wide letterbox; mobile crops to a tighter rectangle). The safe zone is the only region guaranteed visible everywhere. Brand mark + tagline live in the safe zone; the wider canvas extends with breathing room (or texture, or extension of brand surface) that TV viewers see. ## When to use - User runs a YouTube channel and needs banner art that works across TV / desktop / mobile - A `DESIGN.md` exists for the brand ## Inputs - **Required:** brand slug, channel name (or wordmark text) - **Required:** tagline (1 line, max ~10 words; sentence-case ending in period per brand voice) - **Optional:** category labels (e.g. "field notes · payments · platforms"), social handle for footer - **Optional:** secondary cue (e.g. upload schedule "new every Tuesday.") ## Output `./design//artifacts/youtube-channel-art-YYYY-MM-DD-.html` ## Steps ### 1. Verify brand exists ```bash test -f ./design//tokens.css ``` ### 2. Gather the brief Ask in one message: ``` 1. Channel name / wordmark 2. Tagline — 1 line, max 10 words, sentence-case ending in period 3. Optional category strip — short topic labels separated by mid-dot 4. Optional secondary cue — upload schedule or call-to-action 5. Social handle (optional, footer position) ``` If the user gives 11+ words for the tagline, push back: "It needs to fit in the 1546×423 safe zone with breathing room. What's the line that lands?" Don't proceed until they agree. ### 3. Pick variation — apply CONSISTENTLY to both canvases The full banner and safe zone preview must show the same content treatment — they're the same asset rendered at different framings. Pick ONE: - `chrome-led` — wordmark + tagline + small meta strip. Brand-earned for editorial channels (Shane's instinct). - `inverse-text` — full canvas dark inversion (canonical v2 feature treatment). Wordmark in cream on ink. - `type-only` — wordmark at max scale, tagline below; no chrome. - `object-of-content` — banner looks like a fragment of the channel's actual content (e.g. a working-notes index excerpt; a transcript line) The wider 2560×1440 canvas EXTENDS the safe zone composition with breathing room — typically empty cream space or a subtle column rule pattern. It does NOT add additional content beyond the safe zone. The reason: TV viewers see the empty bleed area; it should feel intentional (negative space), not like a missed opportunity. ### 4. Generate the HTML Template: ```html <Brand> — YouTube banner → FULL BANNER · 2560×1440 · the actual upload (TV display sees full; safe zone outlined)
→ SAFE ZONE PREVIEW · 1546×423 · what mobile + desktop visitors see (must hold all critical content)
``` ### 5. Verify - [ ] Full canvas is exactly 2560×1440 - [ ] Safe zone preview is exactly 1546×423 - [ ] All critical content (wordmark, tagline, meta) sits inside the safe zone region - [ ] Wider canvas treatment is INTENTIONAL negative space — not duplicated content, not random decoration - [ ] Safe-zone outline indicator (the dashed `::after`) is present in the file but commented out / `display:none` for final export - [ ] Architecture archetype documented and applied consistently to both canvases - [ ] **Read `../../design-anti-patterns.md` and verify the artifact violates none of its rules.** Pay special attention to sections 1 (no decorative orbs / patterns / icons), 2 (no italics-emphasis OR single-word color emphasis as default), and 4 (architecture must reach inner blocks) - [ ] Tagline is at most 10 words and ends in period > YouTube channel art at `./design//artifacts/youtube-channel-art-YYYY-MM-DD-.html`. > > Archetype: ``. Export the 2560×1440 canvas as PNG (remove the safe-zone dashed outline before export). Upload via YouTube Studio → Customization → Branding → Banner image. ## Anti-Slop Rules Governed by three shared canonical references — read them, do not restate them: - **`../../design-anti-patterns.md`** — the hard floor. Wins every conflict. - **`../../design-principles.md`** — the craft floor (typographic hierarchy, spatial rhythm, color theory, layout logic, visual tension). - **`../../design-variation-sop.md`** — the named-aesthetic roster + the procedure for varying every invocation. **Forbidden (fast scan — the references hold the full list):** - Indigo/violet/purple as default accent or primary — the `hsl(230–280)` family on a near-white surface. The single loudest AI tell. - Purple→blue / "aurora" / gradient-mesh backgrounds; gradient-fill text. - Glassmorphism without an explicit AA-contrast scrim; floating gradient "blobs" as atmosphere. - The three-up icon-card feature grid; the "hero → 3 cards → CTA" median skeleton. - One global border-radius on every element; timid evenly-weighted low-contrast palette. - Inter / Roboto / Arial / Open Sans / Lato / Helvetica / system as the primary family (Space Grotesk = yellow flag). Use a category-matched stack from the variation roster. - Value-free CTAs ("Get Started", "Learn More", "Sign Up"); the two-CTA hero. Name the real action and its value. **Required variation (every invocation):** - Make at least **two** intentional decisions that differ from the safe defaults (palette, layout structure, typographic voice, or spatial density) AND from the most recent artifact in this brand. - Never default to "clean / minimal / modern" — that is the absence of a direction (variation-sop Rule 1). - Sketch **three distinct directions**, offer them as a one-line menu, generate the best-fit by default, all three only if asked (variation-sop Rule 3). **Authenticity:** prefer specific over generic everywhere — real datelines (not "today"), the brand's actual voice (not "build the future" filler), concrete CTAs over placeholders. ## Rules - **Two canvases, one composition.** Both render the same brand treatment; they exist to verify cross-device legibility, not to show different designs. - **Safe zone is non-negotiable.** Mobile + desktop visitors see ONLY the 1546×423 center. If your wordmark or tagline doesn't fit there, redo with smaller scale. - **Wider bleed is intentional negative space.** Don't fill it with decoration to "use the space" — TV viewers should see committed cream surface or a subtle pattern, not panic-filled iconography. - **Pixel exactness on both canvases.** - **Token-pure.** Every visual value via `var(--*)` from tokens.css. - **Anti-pattern compliance.** This skill defers to three shared canonical references: `../../design-anti-patterns.md` (the hard floor — wins every conflict), `../../design-principles.md` (the craft floor), and `../../design-variation-sop.md` (direction roster + offer-3 procedure). The anti-patterns file is the canonical anti-tell list.