设计智能引擎

import {
  generatePlaceholder,
  generateAnimation,
  optimizeSVG,
  generatePattern
} from 'taste-engine';

// 1. Context-aware placeholder
const hero = await generatePlaceholder({
  type: 'hero',
  style: 'photography',
  industry: 'hospitality',
  dimensions: [1920, 1080]
});
// → { url: 'https://picsum.photos/...', alt: 'Luxury hotel experience' }

// 2. Generate animation code (copy-paste ready!)
const animation = generateAnimation('logo-grid', {
  effect: 'logo-grid',
  library: 'framer-motion',
  stagger: 0.1,
  duration: 0.5
});
console.log(animation.code); // Full React component with Framer Motion

// 3. Optimize SVG
const result = optimizeSVG(rawSvg, { minify: true });
console.log(result.savings);         // 32.5 (% saved)
console.log(result.recommendations); // Accessibility/performance tips

// 4. Generate pattern background
const pattern = generatePattern({
  type: 'dots',
  opacity: 0.3,
  colors: { foreground: '#6366f1', background: '#0f172a' }
});
element.style.cssText = pattern.css; // Instant pattern background!

npm install taste-engine

import { createTasteEngineContext, scanUXContext, quickScan } from 'taste-engine';

// Quick scan - just get domain and primary audience
const quick = await quickScan('/path/to/your/project');
console.log(quick.domain);          // 'hospitality'
console.log(quick.primaryAudience); // 'Operator User'
console.log(quick.confidence);      // 0.73

// Full context scan
const context = await createTasteEngineContext('/path/to/your/project');

// Now you know:
console.log(context.summary.industry);         // 'hospitality'
console.log(context.summary.primaryAudience);  // 'Operator User'
console.log(context.summary.criticalWorkflows); // ['Create Booking', 'Guest Check-in', ...]
console.log(context.summary.designApproach);   // 'Warm, professional interface...'

// Design guidelines based on context
console.log(context.guidelines.colorTemperature);      // 'warm'
console.log(context.guidelines.informationDensity);    // 'medium'
console.log(context.guidelines.recommendedInspiration); // ['airbnb', 'booking.com', 'linear']

import { inspire, generateVisualAssets } from 'taste-engine';

// Learn from multiple inspirations
const result = await inspire(['linear', 'airbnb'], 'my-product');

// Get the generated taste profile
const { profile, cssVariables, tailwindConfig } = result;

// Apply CSS variables
console.log(cssVariables);
// :root {
//   --taste-bg: #FFFFFF;
//   --taste-accent: #FF385C;
//   ...
// }

// Use component recipes
console.log(profile.recipes.button.primary);
// 'inline-flex items-center justify-center font-medium rounded-xl...'

// Generate visual asset strategies
const assets = generateVisualAssets(profile);
console.log(assets.hero.style);        // 'photography-hero'
console.log(assets.illustration.style); // 'flat-illustration'
console.log(assets.motion.level);       // 'subtle'

import { themeEngine, chronicleDark } from 'taste-engine';

// Register and apply a theme
themeEngine.registerTheme(chronicleDark);
const theme = themeEngine.loadTheme('chronicle-dark');
if (theme) {
  themeEngine.applyTheme(theme, 'product');
}

// Access recipes for styling components
const recipes = themeEngine.getRecipesForContext(theme, 'product');
console.log(recipes.StatCard); // { style: 'minimal', accentMode: 'none', ... }

import { TasteProvider, useTaste, useTuners } from 'taste-engine/react';

function App() {
  return (
    <TasteProvider defaultTheme="chronicle-dark" useUrlParam>
      <Dashboard />
    </TasteProvider>
  );
}

function Dashboard() {
  const { recipes, isDarkMode, setTheme } = useTaste();
  const { tuners, setTuner } = useTuners();

  return (
    <div>
      {/* Use recipes for component styling */}
      <StatCard
        style={recipes.StatCard.style}
        accentElement={recipes.StatCard.accentElement}
      />

      {/* Adjust tuners for instant visual changes */}
      <input
        type="range"
        min={0}
        max={1}
        step={0.1}
        value={tuners.density}
        onChange={(e) => setTuner('density', parseFloat(e.target.value))}
      />
    </div>
  );
}

import { themeEngine } from 'taste-engine';
import type { ThemePack } from 'taste-engine';

const myTheme: Partial<ThemePack> & { name: string; mode: 'dark'; tokens: ThemePack['tokens'] } = {
  name: 'My Custom Theme',
  mode: 'dark',
  tokens: {
    bg: '222 47% 5%',
    surface: '220 35% 8%',
    // ... other tokens
  },
  recipes: {
    StatCard: {
      style: 'accent',
      accentMode: 'perCard',
      // ... other recipe options
    },
  },
};

themeEngine.registerTheme(myTheme);

# After installing the package
npx taste-engine-mcp

# Or run directly
node node_modules/taste-engine/dist/server/index.js

{
  "mcpServers": {
    "taste-engine": {
      "command": "npx",
      "args": ["taste-engine-mcp"]
    }
  }
}

// 1. Blend multiple elite URLs into a single DNA profile
const synthesis = await callTool('apply_inspiration', {
  sources: [
    'https://stripe.com', 
    'https://linear.app', 
    'https://vercel.com'
  ]
});
// → Returns a unique profile with Stripe grays, Linear motion, and Vercel type.

// 2. Generate a complete, unique marketing project
const project = await callTool('generate_marketing_site', {
  product_path: '/path/to/project',
  inspiration: ['stripe.com', 'linear.app', 'vercel.com'],
  product_name: 'Vibe Engine v1',
  target_audience: 'Modern Developers'
});
// → Generates App.tsx + 10 bespoke blocks + harvested SVGs.