Brand Designer

daffy0208/ai-dev-standards/skills/brand-designer

作者 daffy020832c3241e48f9無授權條款37 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫9 個月前更新

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

僅含說明Design & CreativeMarketing & Sales
AI 產生的概覽

指導品牌識別建立：標誌、配色方案、字體系統與品牌規範。

功能
此技能提供建立一致品牌識別的說明與範本。內容涵蓋標誌設計概念（文字標誌、字母標誌、圖示加文字標誌）、配色方案定義、字體層級，以及品牌規範文件。它也提供標誌、社群媒體圖片與名片的 SVG/React 範例範本，並附上品牌策略與素材整理的指引。
適用情境
適合用於建立新的品牌識別、設計標誌或視覺系統，或撰寫品牌規範文件。也適合製作行銷與社群媒體範本，並維持品牌素材的一致性。
執行需求
未附帶指令碼，僅為說明與範例程式碼。依範例操作需要支援 SVG 的網頁／React 工具鏈，favicon 範例另引用 sharp 套件與 Google Fonts 匯入。

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:

markdown
## 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 typographyFocus on the company nameExample: Google, Facebook, Netflix

Concept 2: Lettermark

Initials in a distinctive wayGood for long company namesExample: IBM, HBO, CNN

Concept 3: Icon + Wordmark

Symbol + company nameMost versatile optionExample: Nike, Apple, Twitter

Example SVG Logo (React Component):

typescript
// 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:

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

Color Palette

Primary Brand Colors

typescript
// 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

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

Color Palette Documentation:

markdown
## 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

css
/* 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:

typescript
// 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

markdown
# 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)

typescript
// 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

typescript
// 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

typescript
// 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/│   │   ├── [email protected]│   │   ├── [email protected]│   │   └── [email protected]│   └── 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

typescript
// 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:

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!

來源與署名

來源：daffy0208/ai-dev-standards位於skills/brand-designer提交32c3241

授權條款： 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

更多來自 daffy0208/ai-dev-standards 的技能

Video Producer

daffy0208

指導建置自訂網頁影片播放器，涵蓋 HLS 串流、字幕、畫質選擇與上傳。

Design & Creative379 個月前更新

Data Visualizer

daffy0208

指導使用 Recharts、Chart.js 與 D3 建立圖表與儀表板，涵蓋版面、配色與匯出模式。

Data & Analytics379 個月前更新

3d Visualizer

daffy0208

指導使用 Three.js 與 React Three Fiber 建立 3D 場景、產品檢視器與 3D 資料視覺化。

Design & Creative379 個月前更新

Animation Designer

daffy0208

提供使用 Framer Motion 與 CSS 的網頁動畫模式與指引，用於介面動效設計。

Design & Creative379 個月前更新

更多Design & Creative技能

Theme Factory

anthropics

精選

提供 10 套預設配色與字型主題，並可即時產生新主題，為簡報、文件、報告與 HTML 頁面統一風格。

Design & Creative179K今天更新

Slack Gif Creator

anthropics

精選

為 Slack 製作尺寸與檔案大小經過最佳化的動畫 GIF，並提供 PIL 繪圖輔助、緩動函式與驗證工具。

包含腳本
Design & Creative179K今天更新

Frontend Design

anthropics

精選

在建立或改造使用者介面時，提供打造獨特、有意識視覺設計的指引。

Design & Creative179K今天更新

Canvas Design

anthropics

精選

依照寫好的設計理念創作原創視覺藝術，輸出 PNG 或 PDF，適合海報、藝術作品等靜態成品。

Design & Creative179K今天更新

Brand Guidelines

anthropics

精選

將 Anthropic 官方品牌配色與字體套用到需要呈現 Anthropic 外觀風格的各類成品上。

Design & Creative179K今天更新

Frontend Design

anthropics

精選

指導代理為新介面或改版介面進行獨特、有意的視覺設計。

Design & Creative149K今天更新