Taste Engine MCP

味觉引擎🎨

上下文感知设计系统，将人工智能生成的UI从通用转换为独特。

问题：AI编码工具（Claude Code、Cursor、Codex）生成功能强大但视觉上通用的UI。每个应用程序看起来都一样——默认的shadcn+Tailwind美学。

解决方案：Taste Engine是一个设计智能层，能够理解 *上下文* （这是仪表板还是营销页面？）， *味道* （这应该是什么感觉？），并且适用 *食谱* （组件应该如何表现？）以产生独特、精致的UI。

v1.0.0（终极Vibe混音器）的新增功能🌪️

结构DNA合成（新！）

超越简单的颜色/字体匹配。味觉引擎现在提取 建筑 多个网站：

• 多URL混合：一次最多混合5个网址（例如，条纹+线性+Vercel）。
• 布局原型：自动检测和复制复杂的结构模式（Bento网格、拆分英雄、粘滞导航与浮动导航）。
• 创意混音器：一个智能合成引擎，从每个来源中挑选最佳功能，构建一个真正独特的零模板UI。

真实资产语义采集器（新！）

• SVG收获：直接从任何URL的实时DOM中深度提取和分类SVG（徽标、图标、图案）。
• 视觉主题提取：标识网格渐变、噪波纹理和特定的立面图案（阴影/半径）。

高保真生成UI

• 零模板项目生成：使用以前从未存在过的定制组件生成完整的React项目。
• 通用搅拌机工具：原生MCP支持多源吸气阵列。
• 工业级代码：生成的组件是可访问的、类型化的和上下文感知的。

用户体验上下文扫描器（v0.4.0）

自动扫描您的代码库，以了解世界卫生组织使用您的产品以及他们需要什么：

• 域检测：识别行业（酒店、电子商务、saas、医疗保健、金融科技等）
• 观众角色：检测用户类型（管理员、操作员、经理、客户、开发人员）
• 工作流提取：查找关键工作流和相关组件
• 内容层次：确定哪些内容应该是主要内容还是次要内容
• 设计指南：生成行业特定的设计建议

灵感模块（v0.3.0）

从最佳产品中学习——从顶级产品中提取设计模式：

• 品牌学习：从Linear、Airbnb、Stripe、Notion等中提取图案。
• 视觉资产：生成英雄风格、插图模式、数据即主题
• 知识库：持续学习，随着时间的推移而提高
• URL分析：分析任何网站以获得设计灵感

视觉资源快速入门

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!

特性

• 情境感知食谱：相同的组件，基于页面意图的不同行为

- product：浓重、实用、克制的口音 - marketing：表达性强，叙事性强，口音可以呼吸

• 5-调谐器系统：无需编写代码即可调整视觉感受

- abstraction：主题强度、信号复杂性、背景层 - density：间隙、最大宽度、工作台密度、表面填充 - motion：路径绘制、卡片扩展、悬停发光 - contrast：边框不透明度，文本静音级别 - narrative：节间距、英雄高度、丝带突出度

• 视觉MCP合同：用于AI集成的类型（Claude Code、Cursor等）

• 内置主题：编年史黑暗，行动冷静，热情好客

安装

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'

普通JavaScript/TypeScript

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 (
    
      
    
  );
}

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

  return (
    

      {/* Use recipes for component styling */}
      

      {/* Adjust tuners for instant visual changes */}
       setTuner('density', parseFloat(e.target.value))}
      />
    

  );
}

UX上下文扫描程序详细信息

UX扫描器分析您的代码库以提取：

域检测

自动从11个类别中识别行业：

• hospitality -酒店、预订、客人
• ecommerce -产品、购物车、订单
• saas -订阅、团队、集成
• healthcare -患者、预约、记录
• fintech -交易、付款、账户
• education -课程、学生、课程
• social -帖子、订阅源、消息
• productivity -任务、项目、日历
• developer-tools -repo、部署、构建
• marketing -活动、潜在客户、分析
• crm -联系人、交易、管道

观众角色

检测用户类型及其特征：

• 管理员 -高科技保存，系统配置
• 操作员 -日常运营、交易处理
• 经理 -报告、分析、决策
• 客户 -终端用户，偶尔使用
• 开发者 -API访问、集成

设计指南

行业特定建议：

知名品牌和灵感

该引擎包括以下预先分析的模式：

主题

编年史暗（默认）

高级深色主题，带紫色调。灵感来自线性、光线投射和现代开发工具。

行动冷静

以淡蓝绿色调为主题。专为可扩展使用的操作仪表板而设计。

热情好客

浅色主题，带有暖琥珀色调。专为酒店业设计，给人一种温馨的感觉。

创建自定义主题

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

const myTheme: Partial & { 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);

MCP 服务器

Taste Engine包括一个与Claude Code、Cursor和其他AI编码工具集成的模型上下文协议（MCP）服务器。

运行MCP服务器

# After installing the package
npx taste-engine-mcp

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

连接到克劳德桌面

添加到您的Claude桌面配置(~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "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.

api参考

UX扫描仪

• UXContextScanner -用于扫描代码库的类
• scanUXContext(repoPath) -完整的用户体验上下文扫描
• quickScan(repoPath) -快速域/受众检测
• getDesignGuidelines(manifest) -获取行业特定建议
• createTasteEngineContext(repoPath) -完整的上下文包

灵感

• inspire(brands[], name) -向品牌学习并生成个人资料
• learnFromInspirations(sources[]) -从源中提取模式
• generateVisualAssets(profile) -制定资产策略
• analyzeURL(url) -分析任何网站
• getKnowledgeBase() -获得持续学习

核心

• ThemeEngine -主题管理类
• themeEngine -默认单例实例
• normalizeThemePack() -转换传统主题包

类型

• ThemePack -完整的主题定义
• ThemeTokens -颜色、排版、密度标记
• ProductRecipes -产品背景食谱
• MarketingRecipes -营销背景下的食谱
• UXContextManifest -来自扫描仪的完整用户体验上下文
• TasteEngineContext -上下文+指南包

调谐器

• applyTuners() -应用调谐器值并获取CSS覆盖
• parseTunersFromURL() -从URL参数解析调谐器
• tunersToURLParams() -将调谐器序列化为URL参数

反应

• TasteProvider -React上下文提供者
• useTaste() -访问主题上下文
• useRecipes() -访问当前食谱
• useTokens() -访问当前令牌
• useTuners() -使用URL同步管理调谐器状态

哲学

“好的界面和好的界面之间的区别不是功能，而是品味。”

Taste Engine从一个简单的观察中得出：人工智能编码工具的生产力令人难以置信，但它们缺乏审美判断。他们不知道仪表板应该感觉密集和可操作，而登录页面应该感觉开阔和叙事。

我们将这些知识编码为 食谱--不是僵化的规则，而是适应环境的灵活模式。结果是一个AI可以生成UI的系统，这些UI不仅可以工作 *感觉对*.

两种操作模式

1. 交互模式：用户通过UI提供输入（品牌灵感、行业、受众）
2. MCP模式：自动扫描代码库以了解上下文

这两种模式都会产生相同的输出：一个指导设计决策的品味档案。

更新日志

v0.5.0（2024-12-18）

• 新：视觉资源模块

- generatePlaceholder() -上下文感知占位符图像 - generateAnimation() -Framer Motion、GSAP、CSS、Tailwind的动画代码 - optimizeSVG() -纯TypeScript SVG优化器 - generatePattern() -14种SVG图案类型

v0.4.0（2024-12-18）

• 新：用于代码库分析的UX上下文扫描器
• 新：领域/行业检测（11个行业）
• 新：受众角色提取
• 新：工作流和内容层次结构提取
• 新：基于行业背景的设计指南
• 新: createTasteEngineContext() 获取完整的上下文包

v0.3.0（2024-12-17）

• 新：带有品牌学习的灵感模块
• 新：可视化资产生成
• 新：任何网站的URL分析
• 新：持久的知识库
• 新：选择性灵感融合

v0.2.0（2024-12-16）

• 视觉MCP合同类型
• MCP服务器实现
• 内置主题

v0.1.0（2024-12-15）

• 初始版本
• 主题引擎核心
• 5调谐器系统
• React挂钩

许可证

麻省 理工© 2024年 Shokey Malik