Add creative-design SKILL aesthetics

creative-design/SKILL.md

@@ -0,0 +1,207 @@
+---
+name: creative-design
+description: Create distinctive visual work across three modes - (1) Algorithmic art using p5.js with seeded randomness and interactive exploration for generative/flow fields/particle systems, (2) Static visual art in PNG/PDF for posters/prints/design pieces, (3) Production-grade frontend interfaces (websites, dashboards, React/HTML components). Use when user requests art, design, posters, web UI, landing pages, generative art, or any visual creative work. Generates original, museum-quality output avoiding generic AI aesthetics.
+---
+
+Create visual work that appears meticulously crafted by a master at the absolute top of their field. Output single-file HTML (algorithmic/frontend) or PNG/PDF (static art).
+
+## AESTHETIC DIRECTION
+
+Before creating, establish a BOLD aesthetic philosophy - an artistic worldview to express visually.
+
+**Name the movement** (1-2 words): "Organic Turbulence" / "Chromatic Silence" / "Brutalist Joy"
+
+**Articulate the philosophy** (4-6 paragraphs). To capture the VISUAL essence, express how this philosophy manifests through:
+
+For ALGORITHMIC work:
+- Computational processes and mathematical relationships
+- Noise functions, randomness patterns, particle behaviors
+- Field dynamics, temporal evolution, system states
+- Parametric variation and emergent complexity
+
+For STATIC art:
+- Space and form, color and material
+- Scale and rhythm, composition and balance
+- Visual hierarchy, spatial tension
+
+For FRONTEND interfaces:
+- Purpose and audience, tone and mood
+- Typography personality, color dominance
+- Motion philosophy, spatial composition
+- What makes this UNFORGETTABLE?
+
+**CRITICAL GUIDELINES:**
+
+- **Avoid redundancy**: Each aspect mentioned once. No repeating color theory, spatial relationships, or principles unless adding new depth.
+- **Emphasize craftsmanship REPEATEDLY**: Final work must appear as though it took countless hours, was labored over with painstaking care, comes from someone at the absolute top of their field. Use phrases: "meticulously crafted," "product of deep expertise," "master-level execution," "countless refinements."
+- **Leave creative space**: Specific about direction, concise enough for interpretive choices at extremely high craftsmanship level.
+- **Subtle conceptual DNA**: Embed a niche reference within the work itself - not literal, always sophisticated. Someone familiar with the subject feels it intuitively; others simply experience masterful composition. Like a jazz musician quoting another song - only those who know will catch it, but everyone appreciates the beauty.
+
+---
+
+## MODE 1: ALGORITHMIC ART (p5.js)
+
+Create gallery-quality computational art that lives and breathes.
+
+**ESSENTIAL PRINCIPLES:**
+- **PROCESS OVER PRODUCT**: Beauty emerges from the algorithm's execution - each run is unique
+- **LIVING ALGORITHMS**: This is about making algorithms that LIVE, not static images with randomness sprinkled on top
+- **PARAMETRIC EXPRESSION**: Ideas communicate through mathematical relationships, forces, behaviors - not static composition
+- **COMPUTATIONAL WORLDVIEW**: The philosophy becomes code; code expresses the philosophy
+
+**Philosophy examples:**
+
+*"Organic Turbulence"* - Chaos constrained by natural law. Flow fields driven by layered Perlin noise. Thousands of particles following vector forces, trails accumulating into organic density maps. Color emerges from velocity and density.
+
+*"Quantum Harmonics"* - Discrete entities exhibiting wave-like interference. Particles carrying phase values that interfere constructively/destructively. Simple harmonic motion generates complex emergent mandalas.
+
+*"Field Dynamics"* - Invisible forces made visible through effects on matter. Particles born at edges, flowing along field lines, dying at equilibrium. Ghost-like traces of invisible forces.
+
+### Technical Requirements
+
+**Seeded Randomness (Art Blocks Pattern)**:
+```javascript
+let seed = 12345;
+randomSeed(seed);
+noiseSeed(seed);
+// Same seed ALWAYS produces identical output
+```
+
+**Parameters emerge from philosophy** - not a menu of options:
+```javascript
+let params = {
+  seed: 12345,
+  // Quantities, scales, probabilities, ratios, angles, thresholds
+  // What qualities of THIS system can be adjusted?
+};
+```
+
+**Algorithm flows from philosophy**:
+- If philosophy is **organic emergence**: elements accumulate/grow, random processes constrained by natural rules, feedback loops
+- If philosophy is **mathematical beauty**: geometric relationships, trigonometric harmonics, precise calculations creating unexpected patterns
+- If philosophy is **controlled chaos**: random variation within strict boundaries, order emerging from disorder
+
+**Canvas Setup**:
+```javascript
+function setup() {
+  createCanvas(1200, 1200);
+}
+function draw() {
+  // Generative algorithm - static (noLoop) or animated
+}
+```
+
+### Interactive Artifact
+
+Single self-contained HTML. Everything inline (p5.js from CDN only external resource).
+
+**Required controls:**
+- Seed navigation: display, prev/next/random buttons, jump-to-seed input
+- Parameter sliders for all tunable values
+- Regenerate, Reset, Download PNG buttons
+- Real-time updates when parameters change
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
+  <style>/* All styling inline */</style>
+</head>
+<body>
+  <div id="canvas-container"></div>
+  <div id="controls"><!-- Parameter controls --></div>
+  <script>
+    // ALL p5.js code inline
+    // params object, classes, setup(), draw(), UI handlers
+  </script>
+</body>
+</html>
+```
+
+---
+
+## MODE 2: STATIC VISUAL ART (PNG/PDF)
+
+Create museum or magazine quality work. Single page, highly visual, design-forward output.
+
+**ESSENTIAL PRINCIPLES:**
+- **PURE DESIGN**: Making ART OBJECTS, not documents with decoration
+- **MINIMAL TEXT**: Text is sparse, essential-only, integrated as visual element - never lengthy
+- **SPATIAL EXPRESSION**: Ideas communicate through space, form, color, composition - not paragraphs
+- **90/10 RULE**: 90% visual design, 10% essential text
+
+**Philosophy examples:**
+
+*"Concrete Poetry"* - Communication through monumental form. Massive color blocks, sculptural typography, Brutalist spatial divisions. Text as rare, powerful gesture - never paragraphs.
+
+*"Chromatic Language"* - Color as primary information system. Geometric precision where color zones create meaning. Typography minimal - small sans-serif labels letting chromatic fields communicate.
+
+*"Analog Meditation"* - Quiet visual contemplation through texture and breathing room. Paper grain, ink bleeds, vast negative space. Images breathe. Text whispered.
+
+### Visual Execution
+
+Treat the design as if it were a scientific bible - dense accumulation of marks, repeated elements, layered patterns building meaning through patient repetition. Systematic reference markers suggest a diagram from an imaginary discipline. Anchor with simple phrase(s) positioned subtly. Limited, intentional color palette. The paradox: analytical visual language expressing ephemeral ideas.
+
+**Text as visual element**: Minimal, design-forward. Context guides whether whisper-quiet labels or bold typographic gestures. Punk venue poster ≠ minimalist ceramics identity. But sophistication is non-negotiable.
+
+**Spacing discipline**: Nothing falls off the page. Nothing overlaps. Every element has breathing room and clear separation. Proper margins. Check twice.
+
+**Refinement pass**: Before finalizing, ask: "How can I make what's already here more of a piece of art?" Don't add more graphics - refine what exists. Make it extremely crisp.
+
+---
+
+## MODE 3: FRONTEND INTERFACES
+
+Create distinctive, production-grade interfaces. Real working code with exceptional aesthetic attention.
+
+**Design Thinking:**
+- **Purpose**: What problem does this solve? Who uses it?
+- **Tone**: Pick an extreme - brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
+- **Differentiation**: What's the one thing someone will remember?
+
+### Aesthetics Execution
+
+**Typography**: Beautiful, unique, interesting. NEVER generic (Arial, Inter, Roboto, system fonts). Unexpected, characterful choices. Pair distinctive display font with refined body font.
+
+**Color & Theme**: Commit to cohesive aesthetic. CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+
+**Motion**: High-impact moments over scattered micro-interactions. One well-orchestrated page load with staggered reveals (animation-delay) creates more delight than random animations. Scroll-triggering and hover states that surprise. CSS-only for HTML; Motion library for React.
+
+**Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+
+**Backgrounds & Depth**: Create atmosphere. Gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, grain overlays.
+
+**NEVER**: Generic AI-generated aesthetics - overused font families, cliched purple gradients on white, predictable layouts, cookie-cutter AI slop. No two designs should be the same. Vary themes, fonts, aesthetics across generations.
+
+**Match complexity to vision**: Maximalist designs need elaborate code with extensive animations. Minimalist designs need restraint, precision, careful spacing/typography. Elegance = executing vision well.
+
+---
+
+## CRAFTSMANSHIP IMPERATIVES
+
+These apply to ALL modes:
+
+**Balance**: Complexity without visual noise, order without rigidity.
+
+**Color Harmony**: Thoughtful palettes, not random values. Limited palette feels intentional.
+
+**Composition**: Even in randomness, maintain visual hierarchy and flow.
+
+**Performance**: Smooth execution, optimized for real-time if animated.
+
+**The Standard**: Create work that could be shown to prove expertise - undeniably impressive, obviously the product of someone at the absolute top of their field who labored over every detail with painstaking care.
+
+**The Test**: Would this hang in a museum? Would this win design awards? Would someone pay for this? If no, refine further.
+
+---
+
+## CREATIVE PROCESS
+
+1. **Interpret intent** - What aesthetic is being sought?
+2. **Establish philosophy** - Name the movement, articulate the worldview
+3. **Identify subtle reference** - The conceptual DNA woven invisibly into the work
+4. **Execute with mastery** - Build what the philosophy demands
+5. **Refine relentlessly** - Every detail screams expert-level craftsmanship
+
+Trust creativity. Let philosophy guide implementation. Push aesthetics to the frontier. Show what can truly be created when thinking outside the box and committing fully to a distinctive vision.