Collage & Layout Composition Expert
Expert in ALL forms of computational collage composition - from Instagram grids to Hockney joiners, from magazine layouts to generative art.
When to Use This Skill
✅ Use for:
- Grid Collages: Instagram profiles, regular layouts, tiled compositions
- Photo Mosaics: Small images forming larger pictures
- Hockney-Style Joiners: Multi-perspective photographic assemblies
- Scrapbook/Journal: Mixed media with text, frames, embellishments
- Magazine/Editorial: Professional layouts with text integration
- Vision/Mood Boards: Inspiration collections, design references
- Memory Walls: Scattered Polaroid-style arrangements
- Social Media: Stories, carousel previews, profile grids
- Abstract/Generative: Algorithmic and procedural arrangements
- Art-Historical: Dadaist, Surrealist, Pop Art styles
❌ Do NOT use for:
- Simple image editing → native-app-designer
- Generating new images → Stability AI
- Single photo quality → photo-composition-critic
- Image similarity search → clip-aware-embeddings
- Color palette extraction → color-theory-palette-harmony-expert
Expert vs Novice Shibboleths
| Topic | Novice | Expert |
|---|---|---|
| Layout | "Just arrange randomly" | Visual weight, balance, golden ratio |
| Blending | Hard edges or simple feather | Poisson blending preserves gradients |
| Color | "Match colors manually" | Optimal transport; LAB space advantages |
| Composition | Fills all space | Negative space as design element |
| Scale | Same size for everything | Varies scale for hierarchy |
| Mosaic | "More tiles = better" | Tile size vs. recognition tradeoff |
| Hockney | "Stitch seamlessly" | Imperfection IS the technique |
Decision Tree: Choosing a Style
What's the purpose?
- Systematic display → Grid Collage
- Artistic portrait from photos → Photo Mosaic
- Personal memories → Scrapbook or Memory Wall
- Design inspiration → Mood Board
- Professional/publication → Magazine Layout
- Social media → Social Templates
- Art project → Hockney/Dadaist/Surrealist
What's the vibe?
- Clean, modern → Grid with tight gutters
- Nostalgic, warm → Polaroid scatter, vintage frames
- Edgy, disruptive → Dadaist sharp cuts
- Dreamy, surreal → Seamless Poisson blending
- Cubist, intellectual → Hockney joiners
Core Algorithms (Summary)
| Algorithm | Use Case | Performance |
|---|---|---|
| Edge-Based Assembly | Hockney joiners | 0.5s for 10 photos |
| Poisson Blending | Seamless transitions | 20ms (512×512) |
| Optimal Transport | Color harmonization | Real-time w/ affine approx |
| Force-Directed | Organic scatter | 200ms (50 images) |
| K-d Tree Matching | Photo mosaic tiles | 2s for 10k tiles |
→ See references/algorithms.md for full implementations.
Anti-Patterns to Avoid
1. Ignoring Visual Weight
What it looks like: All images same size, random placement Why it's wrong: No focal point, viewer's eye wanders aimlessly Fix: Establish 60/30/10 hierarchy with one hero image
2. Over-Saturating the Canvas
What it looks like: Every pixel filled with image content Why it's wrong: Visual claustrophobia, no breathing room Fix: Use negative space intentionally (20-30% white space minimum)
3. Linear FFT for Color Matching
What it looks like: Poor perceptual color matches Why it's wrong: RGB is not perceptually uniform Fix: Use LAB color space for matching
4. Seamless Hockney Joiners
What it looks like: Perfectly stitched panorama Why it's wrong: Misses the entire point - multiple perspectives Fix: Embrace ±2° rotation variance, 5-15% overlap, intentional gaps
5. Global Poisson Blending
What it looks like: Entire image becomes washed out Why it's wrong: Destroys local contrast, looks fake Fix: Apply locally at seams only, preserve source gradients
6. Reusing Mosaic Tiles
What it looks like: Obvious repetition patterns in mosaic Why it's wrong: Human eye detects patterns immediately Fix: Track tile usage, penalize reuse, use larger tile library
MCP Integrations
| MCP | Purpose |
|---|---|
| Stability AI | Generate backgrounds, textures, missing elements |
| Firecrawl | Research techniques, algorithm papers, art history |
| WebFetch | Fetch documentation, tutorials, design references |
Performance Targets
| Operation | Mac M2 | iPhone 15 Pro |
|---|---|---|
| Grid layout (20 photos) | <50ms | <100ms |
| Photo mosaic (10k tiles) | 2s | 5s |
| Force-directed (50 images) | 200ms | 500ms |
| Poisson blending (512×512) | 20ms | 50ms |
| Hockney assembly (10 photos) | 0.5s | 2s |
References
→ references/collage-types.md - Grid, mosaic, scrapbook, magazine, social templates → references/art-historical-styles.md - Hockney, Dadaist, Surrealist, Rauschenberg → references/algorithms.md - Edge assembly, Poisson, optimal transport, force-directed → references/advanced-techniques.md - Cross-photo interactions, narrative sequences → references/implementation-guide.md - Metal shaders, Core ML, performance
Integrates With
- photo-composition-critic - Assess individual photos before collaging
- color-theory-palette-harmony-expert - Extract/match color palettes
- clip-aware-embeddings - Semantic grouping of images
- native-app-designer - Build collage creation UI
- metal-shader-expert - GPU-accelerated blending/effects
Remember: Great collages tell stories through arrangement. Whether grid-precise or Hockney-chaotic, the layout serves the narrative. Master both the math and the art.