Creative‑Dev MCP

Award‑level creative frontend AI brain — GSAP, Three.js, Lenis, Barba, Design Intelligence

Creative‑Dev MCP is a Model Context Protocol server that transforms any AI into a senior creative director capable of building websites that could win Awwwards, FWA, and CSS Design Awards. It provides production‑ready patterns, design systems, and anti‑generic frameworks used by world‑class studios like Locomotive, Active Theory, and Aristide Benoist.

🎯 Philosophy

This package exists to eradicate generic, template‑looking websites. Every output must be:

• Original – Never the same combination twice
• Emotionally resonant – Animation and design that creates feeling
• Technically flawless – Performance‑optimized, smooth, accessible
• Award‑ready – Would score ≥8.5 on Awwwards

🧠 The 8 Tools

The MCP server exposes eight tools that follow a deliberate creative workflow:

1. analyze_brief

Always called first.
Reads: creative‑brief‑analysis.md + uniqueness‑engine.md + design‑rules.md
Returns: signals, creative direction, unexpected element, tech decisions.

{
  "signals": {
    "industry": "luxury",
    "mood": "cinematic",
    "targetAudience": "affluent millennials",
    "budgetTier": "premium"
  },
  "creativeDirection": {
    "primaryAnimationStyle": "Cinematic Scroll‑Driven",
    "unexpectedElement": "Interactive 3D product configurator"
  },
  "techDecisions": {
    "smoothScroll": "Lenis + GSAP ticker",
    "threeJS": "WebGL background particles"
  }
}

2. get_animation_patterns

GSAP patterns filtered by type.
Reads: gsap.md
Returns: patterns for scroll/text/loader/transition/interaction with complete HTML+CSS+JS.

3. get_scroll_system

Complete Lenis + Barba + GSAP integration.
Reads: lenis‑barba.md
Returns: initialization order, ScrollTrigger config, Barba transitions, mobile behavior.

4. get_webgl_pattern

Three.js patterns filtered by effect.
Reads: threejs.md
Returns: particle systems, fluid simulations, geometry morphing, with CSS fallbacks.

5. get_design_system

Complete design system filtered by mood.
Reads: color.md + layout‑composition.md + motion‑language.md
Returns: palette, layout, motion principles, CSS custom properties.

6. get_typography_system

Font pairings, scale, animation patterns.
Reads: typography.md
Returns: Google Fonts imports, fluid type scale, kinetic text animations.

7. check_uniqueness

Validates originality.
Reads: uniqueness‑engine.md
Returns: approved/rejected with specific improvements and uniqueness matrix.

8. audit_output

Performance and quality audit.
Reads: performance.md + quality‑checklist.md
Returns: pass/fail with fixes and Awwwards score prediction.

📁 Knowledge Structure

knowledge/
├── gsap.md                    # 100+ GSAP patterns with emotion & gotchas
├── lenis‑barba.md             # Smooth scroll + page transitions integration
├── threejs.md                 # WebGL effects with performance fallbacks
├── css‑advanced.md            # Award‑winning CSS techniques
├── performance.md             # Animation‑heavy site optimization
├── design/
│   ├── design‑rules.md        # Psychology‑backed design principles
│   ├── typography.md          # Font systems used by top studios
│   ├── color.md               # 15 complete palettes with CSS vars
│   ├── layout‑composition.md  # Asymmetrical grids, broken layouts
│   └── motion‑language.md     # Motion design principles
└── thinking/
    ├── creative‑brief‑analysis.md # How to extract signals from prompts
    ├── uniqueness‑engine.md   # Anti‑generic combination matrix
    └── quality‑checklist.md   # 50‑point audit for award‑readiness

🚀 Installation

npm install -g ps-creative-engine

Or add to your MCP client configuration (Claude Desktop, Cursor, etc.):

{
  "mcpServers": {
    "creative-dev": {
      "command": "npx",
      "args": ["ps-creative-engine"]
    }
  }
}

💡 Example Workflow

When a user prompts: “Build me a site for a luxury perfume brand”

1. AI calls analyze_brief → extracts luxury, cinematic, premium signals
2. AI calls get_design_system with mood luxury → gets black‑gold palette, asymmetric layout
3. AI calls get_typography_system → gets Didot + Suisse Int'l pairing
4. AI calls get_animation_patterns with type scroll → gets cinematic text reveal
5. AI calls get_webgl_pattern with effect particles → gets floating scent particle system
6. AI calls check_uniqueness → validates originality, gets improvement suggestions
7. AI builds the site with production‑ready code
8. AI calls audit_output → passes performance and quality checks
9. AI delivers a website that could genuinely win Awwwards

🎨 Design Principles

Zero Tolerance For:

• Generic layouts (hero + 3 cards + footer)
• Overused fonts (Inter, Poppins, Roboto for display)
• Purple gradients on white
• Fade‑up‑only animations
• Cookie‑cutter hero sections
• Anything that looks like it came from a page builder

Mandatory Anti‑Patterns

Every knowledge file ends with an anti‑patterns section that explicitly forbids common generic choices. For example:

## ANTI‑PATTERNS
- ❌ Using `ease: "power2.out"` for every animation
- ❌ Centering all text with `text‑align: center`
- ❌ Applying the same stagger to every list
- ❌ Using `opacity: 0` → `opacity: 1` without transform

🔧 Development

git clone <repo>
cd ps-creative-engine
npm install
npm run dev  # starts the MCP server in watch mode

The server communicates via stdio using the Model Context Protocol. Tools are defined in src/server.js and knowledge files are in knowledge/.

📚 Knowledge File Format

Each pattern in knowledge files follows this structure:

PATTERN NAME: Cinematic hero text reveal with SplitText chars
CATEGORY: Text
USE WHEN: You need a premium, high‑impact first impression for a brand primary headline.
EMOTION IT CREATES: Sophistication, anticipation, premium quality.
CODE: [complete working HTML+CSS+JS]
GOTCHAS: Missing mask or overflow clipping so letters fade instead of rising.
MOBILE: Reduce stagger to 0.02 for stacked lines.
PAIRS WELL WITH: Clip‑path image reveal with scale.

🏆 Quality Bar

Before any output, we ask:

“If a senior developer at Locomotive, Active Theory, or Aristide Benoist's studio saw this, would they nod or cringe?”

If cringe → rewrite it.
If nod → deliver it.

The output of this package when used correctly should produce websites that could genuinely be submitted to Awwwards and score above 8.5.

🤝 Contributing

We welcome contributions that raise the creative bar. Please ensure any new patterns:

• Are production‑tested
• Include complete code (no placeholders)
• Have mobile behavior defined
• Include anti‑patterns to prevent generic use
• Reference real award‑winning sites as inspiration

📄 License

MIT © 2025 Creative‑Dev MCP Contributors

Built for the studios that refuse to build boring websites.