brand-designer

Q: How do I install brand-designer?

Run npx skills add https://github.com/daffy0208/ai-dev-standards --skill brand-designer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/brand-designer/ (personal) or .claude/skills/brand-designer/ (project).

by daffy0208Marketing & SEO

Expert in brand identity, logo design, and visual brand systems

Installs: 1.3K
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/daffy0208/ai-dev-standards --skill brand-designer

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads brand-designer automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Brand Designer Skill

I help you create cohesive brand identities, logos, and visual brand systems.

What I Do

Brand Identity:

Logo design and variations
Color palettes
Typography systems
Brand guidelines

Visual Assets:

Business cards, letterheads
Social media templates
Marketing materials
Brand presentation decks

Brand Strategy:

Brand positioning
Target audience definition
Competitor analysis
Brand voice and tone

Logo Design Process

Step 1: Brand Discovery

Questions to Answer:

What does the company do?
Who is the target audience?
What are the brand values?
What feeling should the logo evoke?
Any colors/symbols to avoid?

Example Brief:

## Brand Brief: TechStart

**Industry:** SaaS, developer tools
**Target Audience:** Software developers, 25-40 years old
**Brand Values:** Innovation, simplicity, reliability
**Personality:** Modern, technical, approachable
**Competitors:** GitHub, GitLab, Vercel

**Logo Requirements:**

- Works in monochrome
- Scales from 16px (favicon) to billboard
- Modern, not trendy (should age well)
- Unique, memorable

Step 2: Logo Concepts

Concept 1: Wordmark

Clean, modern typography
Focus on the company name
Example: Google, Facebook, Netflix

Concept 2: Lettermark

Initials in a distinctive way
Good for long company names
Example: IBM, HBO, CNN

Concept 3: Icon + Wordmark

Symbol + company name
Most versatile option
Example: Nike, Apple, Twitter

Example SVG Logo (React Component):

// components/brand/Logo.tsx

interface LogoProps {
  variant?: 'full' | 'icon' | 'wordmark'
  color?: 'primary' | 'white' | 'black'
  size?: number
}

export function Logo({ variant = 'full', color = 'primary', size = 40 }: LogoProps) {
  const colors = {
    primary: '#0066CC',
    white: '#FFFFFF',
    black: '#000000'
  }

  const fillColor = colors[color]

  if (variant === 'icon') {
    return (
      <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
        <circle cx="20" cy="20" r="18" fill={fillColor} />
        <path
          d="M15 20 L25 15 L25 25 Z"
          fill="white"
        />
      </svg>
    )
  }

  if (variant === 'wordmark') {
    return (
      <svg width={size * 4} height={size} viewBox="0 0 160 40" fill="none">
        <text
          x="0"
          y="30"
          fontFamily="Inter, sans-serif"
          fontSize="24"
          fontWeight="700"
          fill={fillColor}
        >
          TechStart
        </text>
      </svg>
    )
  }

  // Full logo (icon + wordmark)
  return (
    <svg width={size * 5} height={size} viewBox="0 0 200 40" fill="none">
      <circle cx="20" cy="20" r="18" fill={fillColor} />
      <path d="M15 20 L25 15 L25 25 Z" fill="white" />
      <text
        x="50"
        y="30"
        fontFamily="Inter, sans-serif"
        fontSize="24"
        fontWeight="700"
        fill={fillColor}
      >
        TechStart
      </text>
    </svg>
  )
}

Usage:

// Different logo variations
<Logo variant="full" />
<Logo variant="icon" size={32} />
<Logo variant="wordmark" color="white" />

Color Palette

Primary Brand Colors

// config/brand-colors.ts

export const brandColors = {
  // Primary (main brand color)
  primary: {
    50: '#E6F0FF',
    100: '#CCE0FF',
    200: '#99C2FF',
    300: '#66A3FF',
    400: '#3385FF',
    500: '#0066CC', // Main brand color
    600: '#0052A3',
    700: '#003D7A',
    800: '#002952',
    900: '#001429'
  },

  // Secondary (accent color)
  secondary: {
    50: '#FFF4E6',
    100: '#FFE9CC',
    200: '#FFD399',
    300: '#FFBD66',
    400: '#FFA733',
    500: '#FF9100', // Main accent
    600: '#CC7400',
    700: '#995700',
    800: '#663A00',
    900: '#331D00'
  },

  // Neutral (grays)
  neutral: {
    50: '#F9FAFB',
    100: '#F3F4F6',
    200: '#E5E7EB',
    300: '#D1D5DB',
    400: '#9CA3AF',
    500: '#6B7280',
    600: '#4B5563',
    700: '#374151',
    800: '#1F2937',
    900: '#111827'
  },

  // Semantic colors
  success: '#10B981',
  warning: '#F59E0B',
  error: '#EF4444',
  info: '#3B82F6'
}

Color Usage Guidelines

// Tailwind config
module.exports = {
  theme: {
    colors: {
      primary: brandColors.primary,
      secondary: brandColors.secondary,
      gray: brandColors.neutral,
      green: brandColors.success
      // ...
    }
  }
}

Color Palette Documentation:

## Brand Colors

### Primary Blue (#0066CC)

- **Use for:** Primary buttons, links, active states, brand elements
- **Don't use for:** Backgrounds, large areas
- **Accessibility:** Passes WCAG AA for text on white

### Secondary Orange (#FF9100)

- **Use for:** CTAs, highlights, important actions
- **Don't use for:** Body text
- **Pairing:** Works best with primary blue

### Neutral Grays

- **Use for:** Text, borders, backgrounds, UI elements
- **Hierarchy:**
  - 900: Headings
  - 700: Body text
  - 500: Secondary text
  - 300: Borders
  - 100: Backgrounds

Typography System

Font Selection

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* Font families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Font sizes */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
}

Typography Scale:

// components/Typography.tsx

export function Heading1({ children }: { children: React.ReactNode }) {
  return (
    <h1 className="text-4xl font-bold leading-tight text-gray-900">
      {children}
    </h1>
  )
}

export function Heading2({ children }: { children: React.ReactNode }) {
  return (
    <h2 className="text-3xl font-semibold leading-tight text-gray-900">
      {children}
    </h2>
  )
}

export function BodyText({ children }: { children: React.ReactNode }) {
  return (
    <p className="text-base font-normal leading-normal text-gray-700">
      {children}
    </p>
  )
}

export function Caption({ children }: { children: React.ReactNode }) {
  return (
    <p className="text-sm font-normal leading-normal text-gray-500">
      {children}
    </p>
  )
}

Brand Guidelines Document

Creating brand-guidelines.md

# TechStart Brand Guidelines

## Logo Usage

### Logo Variations

- **Full Logo**: Use on marketing materials, website header
- **Icon Only**: Use for app icon, favicon, social media avatars
- **Wordmark**: Use when icon doesn't fit context

### Clear Space

Maintain clear space around logo equal to height of the "T" in TechStart

### Minimum Size

- **Digital**: 120px width (full logo), 40px (icon)
- **Print**: 1 inch width (full logo), 0.25 inch (icon)

### Don'ts

❌ Don't rotate the logo
❌ Don't change colors (except approved variations)
❌ Don't add effects (shadows, gradients, etc.)
❌ Don't distort or stretch

---

## Color Palette

### Primary Colors

- **Brand Blue**: #0066CC
  - RGB: 0, 102, 204
  - CMYK: 100, 50, 0, 20
- **Accent Orange**: #FF9100
  - RGB: 255, 145, 0
  - CMYK: 0, 43, 100, 0

### Usage

- Primary buttons, links: Brand Blue
- CTAs, highlights: Accent Orange
- Backgrounds: Neutral grays

---

## Typography

### Fonts

- **Headings**: Inter Bold (700)
- **Body**: Inter Regular (400)
- **Code**: JetBrains Mono Regular (400)

### Hierarchy

- H1: 48px / Bold / Tight leading
- H2: 36px / Semibold / Tight leading
- Body: 16px / Regular / Normal leading
- Caption: 14px / Regular / Normal leading

---

## Voice & Tone

### Brand Personality

- **Professional** but not corporate
- **Technical** but approachable
- **Innovative** but reliable

### Writing Style

- Use active voice
- Be concise and clear
- Avoid jargon (unless technical docs)
- Use "we" and "you" (not "I" or "one")

### Examples

✅ "Deploy your app in seconds"
❌ "Applications can be deployed quickly"

✅ "We built this for developers like you"
❌ "This product was designed for developer users"

Social Media Templates

Profile Image (SVG Template)

// templates/SocialProfileImage.tsx

export function SocialProfileImage() {
  return (
    <svg width="400" height="400" viewBox="0 0 400 400">
      {/* Background */}
      <rect width="400" height="400" fill="#0066CC" />

      {/* Logo (centered) */}
      <circle cx="200" cy="200" r="120" fill="white" />
      <path
        d="M160 200 L240 160 L240 240 Z"
        fill="#0066CC"
      />
    </svg>
  )
}

Social Media Post Template

// templates/SocialPost.tsx

interface SocialPostProps {
  title: string
  description: string
  imageUrl?: string
}

export function SocialPost({ title, description, imageUrl }: SocialPostProps) {
  return (
    <svg width="1200" height="630" viewBox="0 0 1200 630">
      {/* Background gradient */}
      <defs>
        <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#0066CC" />
          <stop offset="100%" stopColor="#003D7A" />
        </linearGradient>
      </defs>
      <rect width="1200" height="630" fill="url(#bg)" />

      {/* Content */}
      <text
        x="60"
        y="200"
        fontSize="60"
        fontWeight="700"
        fill="white"
        fontFamily="Inter"
      >
        {title}
      </text>
      <text
        x="60"
        y="270"
        fontSize="32"
        fill="#CCE0FF"
        fontFamily="Inter"
      >
        {description}
      </text>

      {/* Logo */}
      <Logo variant="icon" size={60} color="white" />
    </svg>
  )
}

Business Card Design

// templates/BusinessCard.tsx

interface BusinessCardProps {
  name: string
  title: string
  email: string
  phone: string
}

export function BusinessCard({ name, title, email, phone }: BusinessCardProps) {
  return (
    <svg width="350" height="200" viewBox="0 0 350 200">
      {/* Front side */}
      <rect width="350" height="200" fill="white" />

      {/* Logo */}
      <Logo variant="full" size={30} />

      {/* Contact info */}
      <text x="20" y="120" fontSize="20" fontWeight="700" fill="#111827">
        {name}
      </text>
      <text x="20" y="145" fontSize="14" fill="#6B7280">
        {title}
      </text>
      <text x="20" y="170" fontSize="12" fill="#6B7280">
        {email}
      </text>
      <text x="20" y="185" fontSize="12" fill="#6B7280">
        {phone}
      </text>
    </svg>
  )
}

Brand Asset Management

File Organization

brand-assets/
├── logo/
│   ├── svg/
│   │   ├── logo-full.svg
│   │   ├── logo-icon.svg
│   │   └── logo-wordmark.svg
│   ├── png/
│   │   ├── logo-full@1x.png
│   │   ├── logo-full@2x.png
│   │   └── logo-full@3x.png
│   └── favicon/
│       ├── favicon-16x16.png
│       ├── favicon-32x32.png
│       └── favicon.ico
├── colors/
│   └── palette.json
├── fonts/
│   ├── Inter-Regular.woff2
│   ├── Inter-Bold.woff2
│   └── JetBrainsMono-Regular.woff2
├── templates/
│   ├── social-profile.svg
│   ├── social-post.svg
│   └── business-card.svg
└── guidelines/
    └── brand-guidelines.pdf

Favicon Generation

// scripts/generate-favicons.ts

import sharp from 'sharp'
import fs from 'fs'

async function generateFavicons() {
  const sizes = [16, 32, 48, 64, 128, 256]

  for (const size of sizes) {
    await sharp('logo-icon.svg')
      .resize(size, size)
      .png()
      .toFile(`public/favicon-${size}x${size}.png`)

    console.log(`Generated ${size}x${size} favicon`)
  }

  console.log('Favicons generated!')
}

generateFavicons()

Favicon HTML:

<!-- In layout/head -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

When to Use Me

Perfect for:

Creating new brand identities
Designing logos and visual systems
Building brand guidelines
Creating marketing templates
Ensuring brand consistency

I'll help you:

Design memorable logos
Create cohesive color palettes
Build typography systems
Generate brand assets
Document brand guidelines

What I'll Create

🎨 Logo Designs (SVG)
🌈 Color Palettes
📝 Typography Systems
📄 Brand Guidelines
🖼️ Social Media Templates
💼 Business Cards

Let's build a strong, cohesive brand identity!

FAQ

What does the brand-designer skill do?

Expert in brand identity, logo design, and visual brand systems

How do I install brand-designer?

Run npx skills add https://github.com/daffy0208/ai-dev-standards --skill brand-designer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/brand-designer/ (personal) or .claude/skills/brand-designer/ (project).

Which AI agents can use brand-designer?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is brand-designer safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains brand-designer?

It is published by daffy0208 in daffy0208/ai-dev-standards. It has 1,262 recorded installs.

Popular marketing & seo skills

View category →

reddit-automation

flowkit-labs/skills

Find Reddit threads where people are genuinely asking for what you offer, then draft short, genuinely helpful replies — disclosing your affiliation honestly and naming your product only when it truly answers the question. Two moves: discovery — scan the right subreddits for real needs (recommendation asks, expressed pain, competitor mentions) and rank the few threads where you can actually help; drafting — write from real experience, respect each community's self-promo rules, and keep a human in the loop to review and post. This markets on Reddit the honest way: contribute value, disclose who you are, never astroturf. Distilled from the playbook behind doany.ai's Reddit agent. Triggers on "find reddit opportunities", "reddit marketing", "reddit automation", "reply on reddit for my product", "reddit community engagement", "reddit lead gen", or any ask to turn Reddit threads into genuine, disclosed marketing replies.

Marketing & SEO1.1M installs

twitter-automation

101-skills/superpowers

Automate Twitter/X with posting, engagement, and user management via inference.sh CLI. Apps: x/post-tweet, x/post-create (with media), x/post-like, x/post-retweet, x/dm-send, x/user-follow. Capabilities: post tweets, schedule content, like posts, retweet, send DMs, follow users, get profiles. Use for: social media automation, content scheduling, engagement bots, audience growth, X API. Triggers: twitter api, x api, tweet automation, post to twitter, twitter bot, social media automation, x automation, tweet scheduler, twitter integration, post tweet, twitter post, x post, send tweet

Marketing & SEO880K installs

twitter-automation

magentosh/superpowers

Marketing & SEO771.7K installs

twitter-automation

qu-skills/superpowers

Marketing & SEO564.3K installs

product-launch-video

heygen-com/hyperframes

Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes.

Marketing & SEO538.7K installs

twitter-automation

skills-shell/superpowers

Marketing & SEO453.7K installs

brand-designer

Install

Install

Describe the task

Review the result

SKILL.md

Brand Designer Skill

What I Do

Logo Design Process

Step 1: Brand Discovery

Step 2: Logo Concepts

Color Palette

Primary Brand Colors

Color Usage Guidelines

Typography System

Font Selection

Brand Guidelines Document

Creating brand-guidelines.md

Social Media Templates

Profile Image (SVG Template)

Social Media Post Template

Business Card Design

Brand Asset Management

File Organization

Favicon Generation

When to Use Me

What I'll Create

FAQ

More from daffy0208/ai-dev-standards

Popular marketing & seo skills