Role: 你是一名拥有 20 年经验的资深前端架构师。现在我们要构建一个商业级的图片处理生态系统,包含一个 Nuxt 3 Web 工具(主打 SEO 和广告变现)和一个 Node.js MCP Server(主打 AI 本地集成)。

Task: 请为我设计并初始化一个基于 pnpm workspaces 和 Turborepo 的 Monorepo 项目工程。

核心架构要求:

项目结构:

packages/image-core: 抽象逻辑层。定义统一的 ImageProcessor 接口。

packages/image-core/adapters: 实现两个适配器:WasmAdapter (供浏览器端使用@squoosh/lib) 和 NativeAdapter (供 Node.js 端使用,基于 sharp)。

apps/web-tool: 基于 Nuxt 3。必须包含动态路由设计以适配 SEO(例如 /convert/:from-to),并预留 AdSense 广告组件插槽。

apps/mcp-server: 基于 MCP SDK。调用核心层的 NativeAdapter 提供图片转换与缩放的 Tool 能力。

技术细节:

高性能: Web 端必须在 Web Worker 中运行 WASM 逻辑,严禁阻塞主线程。

类型安全: 全局使用 TypeScript,共享 TransformOptions 等类型定义。

工程化: 配置 turbo.json 实现跨包的任务流(build, dev)。

MCP 规范: 工具需包含完整且严谨的 JSON Schema 描述,支持 inputPath, outputPath, format, width, height 等参数。

商业化考量:

在 Nuxt 3 项目中,请演示如何利用 useSeoMeta 结合动态路由实现极致的 SEO 优化。

演示如何将核心转换逻辑解耦,确保 Web 端“零服务器开销(Client-side only)”,而 MCP 端“本地高性能(Sharp based)”。

交付内容:

根目录的 pnpm-workspace.yaml 和 package.json。

turbo.json 管道配置。

packages/image-core 的接口抽象与工厂模式代码。

apps/mcp-server 的核心实现脚本。

apps/web-tool 的目录结构建议及关键的 server-side-logic 与 client-wasm-bridge 代码示例。


https://zhangyingxuan.github.io/提示词模版/项目初始化/
作者
blowsysun
许可协议