graphic-design

name	graphic-design
description	This skill should be used when creating visual identity and graphic assets for web applications. It covers brand identity, color systems, typography, iconography, and visual asset production.
depends	["real.md","cog.md"]
generates	["spec-graphic-design.md"]

Note for AI Agents: This skill generates specification documents for AI/Agent consumption (especially Claude Code). Before generating specs, you MUST load context from real.md and cog.md. If these files don't exist, invoke the 00-meta skill first to create them.

Prerequisites

Pre-execution Checklist

Before using this skill, verify:

1. real.md exists - Contains reality constraints (max 4 required + 3 optional)
2. cog.md exists - Contains cognitive model (Agents + Information + Context)

If either file is missing, execute:

Invoke skill: 00-meta

Context Loading

From cog.md, extract:

• Brand context: Product name, positioning, personality
• Target agents: User demographics affecting visual preferences
• Information hierarchy: What needs visual emphasis

From real.md, extract:

• Brand constraints: Existing brand guidelines to follow
• Asset constraints: Required file formats, sizes
• Accessibility constraints: Color contrast requirements

Graphic Design

Overview

This skill guides the creation of visual identity and graphic assets. To establish strong visual branding, define brand identity, create color systems, select typography, design icons, and produce visual assets.

When to Use This Skill

• Creating brand identity guidelines
• Defining color palettes
• Selecting and configuring typography
• Designing icons and illustrations
• Producing marketing and app assets

Process

Phase 1: Define Brand Identity

Brand Positioning:

## Brand Definition

**Essence:** [Core idea in 2-3 words]
**Personality:** [3-5 adjectives]
**Promise:** [What the brand delivers]
**Voice:** [How the brand communicates]

Example for 42chat:

## Brand Definition

**Essence:** Intelligent, Flowing, Alive
**Personality:** Professional, Friendly, Modern, Trustworthy
**Promise:** AI conversations as natural as flowing water
**Voice:** Clear, Helpful, Confident but not arrogant

Naming Guidelines:

Element	Format	Example
Product Name	Title Case	42chat
Feature Names	Sentence case	Quick templates
Technical Terms	As defined	API key

Phase 2: Create Color System

Primary Colors:

/* Brand Colors */
--color-primary: #2563EB;      /* Main blue */
--color-primary-light: #3B82F6;
--color-primary-dark: #1D4ED8;

/* Secondary Accent */
--color-accent: #7C3AED;       /* Purple */
--color-success: #10B981;      /* Green */

Neutral Colors:

/* Gray Scale */
--gray-50:  #F9FAFB;   /* Lightest background */
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;   /* Borders */
--gray-300: #D1D5DB;
--gray-400: #9CA3AF;   /* Placeholder text */
--gray-500: #6B7280;   /* Secondary text */
--gray-600: #4B5563;
--gray-700: #374151;
--gray-800: #1F2937;   /* Dark background */
--gray-900: #111827;   /* Primary text */

Semantic Colors:

Purpose	Light Theme	Dark Theme
Success	#10B981	#34D399
Warning	#F59E0B	#FBBF24
Error	#EF4444	#F87171
Info	#3B82F6	#60A5FA

Color Usage Guidelines:

Use Case	Color
Primary actions	primary
Text on light	gray-900
Secondary text	gray-500
Borders	gray-200
Backgrounds	white, gray-50
User messages	primary-light bg
AI messages	gray-100 bg

Phase 3: Select Typography

Font Stack:

/* Sans-serif (UI) */
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
             'PingFang SC', 'Microsoft YaHei', sans-serif;

/* Monospace (Code) */
--font-mono: 'JetBrains Mono', 'Fira Code',
             'Source Code Pro', Consolas, monospace;

Type Scale:

Level	Size	Weight	Line Height	Use
Display	32px	700	1.2	Hero text
H1	24px	700	1.2	Page titles
H2	20px	600	1.3	Section headers
H3	16px	600	1.4	Subsections
Body	14px	400	1.5	Main text
Small	12px	400	1.4	Captions
Tiny	10px	400	1.4	Labels

Typography Guidelines:

## Do
- Use consistent type scale
- Maintain adequate line height
- Ensure sufficient contrast

## Don't
- Mix too many font sizes
- Use decorative fonts for UI
- Justify body text

Phase 4: Design Iconography

Icon Style:

## Icon Specifications

**Style:** Line icons (outlined)
**Stroke Width:** 1.5px
**Corner Radius:** 2px
**Sizes:** 16px, 20px, 24px

Icon Library:

Recommended: Lucide Icons

• Consistent with design style
• React component support
• Customizable colors and sizes

Standard Icons:

Function	Icon Name	Notes
New	Plus	Create actions
Send	Send	Message sending
Settings	Settings	Configuration
User	User	Profile/avatar
Search	Search	Search function
Edit	Pencil	Edit actions
Delete	Trash	Delete actions
Copy	Copy	Copy to clipboard
Attach	Paperclip	File attachment
Model	Bot	AI model

Phase 5: Create Visual Assets

Logo Specifications:

## Logo Variants

| Variant | Use Case | Min Size |
|---------|----------|----------|
| Full Logo | Website, documents | 120px wide |
| Icon Logo | App icon, favicon | 32px |
| Monochrome | Single-color contexts | 80px |
| Reversed | Dark backgrounds | 80px |

## Safe Zone
Maintain padding equal to 25% of logo height around all sides.

## Don'ts
- Stretch or distort
- Rotate
- Add effects (shadow, glow)
- Change colors
- Place on busy backgrounds

Favicon Package:

File	Size	Format
favicon.ico	16x16, 32x32	ICO
apple-touch-icon.png	180x180	PNG
icon-192.png	192x192	PNG
icon-512.png	512x512	PNG

Open Graph Image:

## OG Image Specifications

**Size:** 1200 x 630 px
**Format:** PNG or JPG
**Content:**
- Centered logo
- Product name
- Tagline

## Layout
┌─────────────────────────────────────┐
│                                     │
│            [Logo]                   │
│                                     │
│         Product Name                │
│           Tagline                   │
│                                     │
└─────────────────────────────────────┘

Phase 6: Generate User Avatars

Default Avatar Generation:

// Generate avatar from user name
function getAvatarConfig(name: string) {
  const colors = [
    '#F87171', '#FB923C', '#FBBF24', '#A3E635',
    '#34D399', '#22D3EE', '#60A5FA', '#A78BFA',
    '#F472B6', '#FB7185'
  ];
  
  const index = name.charCodeAt(0) % colors.length;
  
  return {
    background: colors[index],
    text: name.charAt(0).toUpperCase(),
    textColor: '#FFFFFF',
  };
}

Avatar Sizes:

Context	Size
List item	32px
Header	40px
Profile	64px
Settings	96px

Output Template

# Visual Design Specification

## 1. Brand Identity
- Brand definition
- Naming guidelines

## 2. Color System
- Primary colors
- Neutral scale
- Semantic colors
- Usage guidelines

## 3. Typography
- Font stack
- Type scale
- Guidelines

## 4. Iconography
- Icon style
- Standard icons
- Usage

## 5. Visual Assets
- Logo specifications
- Favicon package
- OG images
- Avatar generation

Asset Checklist

• Brand identity defined
• Color palette complete
• Typography configured
• Icon set selected
• Logo variants created
• Favicons generated
• OG image designed
• Avatar system implemented

File Deliverables

Asset	Location	Formats
Logo	/public/logo.*	SVG, PNG
Icon	/public/icon.*	SVG, PNG, ICO
Favicon	/public/	ICO, PNG
OG Image	/public/og-image.png	PNG
Brand Guide	/docs/	PDF, MD

Integration with Other Skills

Skill	Relationship
ui-design	Collaboration: visual system
coding	Output: assets for implementation