Files
our-claude-skills/custom-skills/06-ourdigital-designer/code/references/advanced_techniques.md
Andrew Yim 0bc24d00b9 feat: Add OurDigital custom skills package (10 skills)
Complete implementation of OurDigital skills with dual-platform support
(Claude Desktop + Claude Code) following standardized structure.

Skills created:
- 01-ourdigital-brand-guide: Brand reference & style guidelines
- 02-ourdigital-blog: Korean blog drafts (blog.ourdigital.org)
- 03-ourdigital-journal: English essays (journal.ourdigital.org)
- 04-ourdigital-research: Research prompts & workflows
- 05-ourdigital-document: Notion-to-presentation pipeline
- 06-ourdigital-designer: Visual/image prompt generation
- 07-ourdigital-ad-manager: Ad copywriting & keyword research
- 08-ourdigital-trainer: Training materials & workshop planning
- 09-ourdigital-backoffice: Quotes, proposals, cost analysis
- 10-ourdigital-skill-creator: Meta skill for creating new skills

Features:
- YAML frontmatter with "ourdigital" or "our" prefix triggers
- Standardized directory structure (code/, desktop/, shared/, docs/)
- Shared environment setup (_ourdigital-shared/)
- Comprehensive reference documentation
- Cross-skill integration support

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-31 16:50:17 +07:00

5.1 KiB

Advanced Visual Techniques

Sophisticated methods for complex visual narratives.

Metaphor Layering

Three-Layer Structure

Layer 1: Immediate visual (what viewer sees first)
Layer 2: Symbolic meaning (conceptual understanding)  
Layer 3: Philosophical depth (deeper reflection)

Example: "Digital Identity Crisis"
L1: Fragmented mirror with face
L2: Multiple reflections = multiple online personas
L3: Question of authentic self in digital age

Transition States

Show transformation between concepts:

  • Discrete: Clear before/after states
  • Continuous: Gradient transformation
  • Recursive: Self-referential loops
  • Parallel: Simultaneous states

Composition Dynamics

Sacred Geometry Applications

Golden Spiral

# Place key elements along spiral path
phi = 1.618
spiral_points = [(r * cos(θ), r * sin(θ)) 
                  where r = phi^(θ/2π)]

Rule of Triangles

  • Stable: Base down △
  • Unstable: Point down ▽
  • Dynamic: Multiple overlapping

Grid Breaking

  • Start with rigid grid
  • Selectively break for emphasis
  • Maintain overall structure

Negative Space as Active Element

Use empty space to:

  1. Create secondary images
  2. Guide eye movement
  3. Represent absence/loss
  4. Provide breathing room
  5. Suggest the ineffable

Cultural Symbolism Integration

Korean Elements (Subtle)

  • Ma (마/間): Pregnant emptiness
  • Jeong (정): Emotional bonds as visual threads
  • Han (한): Melancholic beauty in shadows
  • Nunchi (눈치): Implied awareness in composition

Western Elements (Structural)

  • Bauhaus: Function drives form
  • Swiss Grid: Underlying order
  • Brutalism: Raw honesty
  • Minimalism: Essential only

Fusion Techniques

Korean softness + Western structure =
- Geometric forms with organic edges
- Grid with breathing spaces
- Minimal palette with emotional depth
- Clean lines with textural warmth

Texture Integration

Digital Textures

  • Glitch: Controlled chaos, disruption
  • Grain: Film nostalgia, warmth
  • Pixels: Digital breakdown, transformation
  • Code: Underlying structure revealed

Organic Textures

  • Paper: Tangible, traditional
  • Water: Flow, change, transparency
  • Stone: Permanence, weight
  • Cloud: Ethereal, transient

Hybrid Approach

/* Layer organic over digital */
base: clean_vector;
overlay: paper_texture at 15% opacity;
accent: digital_grain at edges;

Color Psychology Advanced

Emotional Journey Mapping

Start → Middle → End
Cold Blue → Neutral Gray → Warm Gold
(Analysis) → (Process) → (Understanding)

Color Dissonance for Tension

  • Complementary colors at borders
  • Unexpected accent in monochrome
  • Temperature shift for emphasis

Cultural Color Codes

  • Red in Korea: More passionate than West
  • White in Korea: Death/purity duality
  • Black: Universal depth, different meanings

Temporal Narrative Techniques

Static Image, Dynamic Story

  1. Past-Present-Future: Three zones in composition
  2. Cycle Representation: Circular time
  3. Erosion/Growth: Time's effect
  4. Palimpsest: Layers of history

Motion Implied in Stillness

  • Blur suggesting movement
  • Repetition showing progression
  • Fragments indicating explosion
  • Spiral showing evolution

Abstraction Gradients

Level 1: Recognizable (0.3 abstract)

  • Clear objects with stylization
  • Obvious metaphors
  • Direct symbolism

Level 2: Suggestive (0.6 abstract)

  • Forms hint at objects
  • Metaphors require thought
  • Symbolism is layered

Level 3: Conceptual (0.9 abstract)

  • Pure form and color
  • Metaphors are felt
  • Symbolism is philosophical

Technical Excellence

File Optimization

# ImageMagick optimization
convert input.png \
  -quality 85 \
  -strip \
  -resize 1200x630 \
  -colorspace sRGB \
  output.webp

Accessibility Checks

  • Contrast ratio: minimum 4.5:1
  • Color-blind safe palettes
  • Clear focal points
  • Alternative interpretations valid

Prompt Engineering Advanced

Complex Concept Formula

[PHILOSOPHICAL CONCEPT] through [NATURAL METAPHOR]
+ [TECHNICAL ELEMENT] suggesting [EMOTIONAL JOURNEY]
+ [CULTURAL REFERENCE] without cliché
+ [TEMPORAL ASPECT] in single frame
= Sophisticated visual narrative

Negative Prompting

Always include what to avoid:

  • "No literal representations"
  • "Avoid tech clichés"
  • "No stock photo aesthetics"
  • "Exclude obvious symbols"

Quality Evaluation Matrix

Aspect Weight Evaluation Criteria
Concept 30% Captures essay essence?
Originality 25% Unique perspective?
Execution 20% Technical excellence?
Emotion 15% Evokes intended feeling?
Timelessness 10% Will age well?

Iteration Strategies

  1. Generate 3 variations: Different moods
  2. A/B test concepts: Literal vs abstract
  3. Color studies: Warm vs cool
  4. Composition alternatives: Central vs offset

Cultural Sensitivity Checklist

  • Avoids stereotypes
  • Respects both traditions
  • Universal symbolism
  • Inclusive imagery
  • Cross-cultural readable

Remember: Every image is a visual philosophy—not decoration, but thought.